以类名作为变量和 :lang() 的 Sass mixin答案

【问题标题】：Sass mixin with class name as variable and :lang()以类名作为变量和 :lang() 的 Sass mixin
【发布时间】：2020-08-28 15:49:52
【问题描述】：

我正在尝试创建 mixin。像这样的

 @mixin localesRule($class, $cssProp, $value) {
        .#{$class:lang(pt)}, //...other locales { 
            $cssProp: $value;
        }
    }

但出现错误...有人可以帮助我吗？可以这样做吗？

【问题讨论】：

mixin 的预期输出是什么？

标签： css sass scss-mixins

【解决方案1】：

@mixin localesRule($class, $cssProp, $value) {
  #{$class}:lang(pt), #{$class}:lang(pl), #{$class}:lang(sk), #{$class}:lang(mx), #{$class}:lang(pt-BR) {
    #{$cssProp}: $value;
  }
}

.foo {
  &-button {
    @include localesRule('&', padding-right, 0);
  }
}

输出：

.foo-button:lang(pt), .foo-button:lang(pl), .foo-button:lang(sk), .foo-button:lang(mx), .foo-button:lang(pt-BR) {
  padding-right: 0;
}

【讨论】：

` @mixin localesRule($class, $cssProp, $value) { .#{$class}:lang(pt), .#{$class}:lang(pl), .#{ $class}:lang(sk), .#{$class}:lang(mx), .#{$class}:lang(pt-BR) { #{$cssProp}: $value; } }` 然后：&-button { font-size: 12px; other rules... /*&:lang(pt), &:lang(pl), &:lang(br), &:lang(sk), &:lang(mx), &:lang(pt-BR) { padding-right: 0; }*/ @include localesRule(&, padding-right, 0); } 并且没有输出：|
现在看看——这就是你的意思？

【解决方案2】：

不知道您到底期待什么，这里有一些 SCSS 中的基本示例。假设您有这样的课程。

.login {}

现在创建一个你想在类中使用的 mixin。

@mixin main-button($parent-selector, $property, $selector, $size-value) {
    #{$parent-selector}__img {
        width: 100px;
        #{$property}: left;
    }

    #{$selector} {
        background: none;
    }

    &__button {
        font-size: $size-value;
    };
}

在类中使用 mixin。

.login {
    @include main-button(&, float, "text", 14px);
}

输出应该是这样的。

.login {
    .login__img {
        width: 100px;
        float: left;
    }

    .text {
        background: none;
    }

    .login__button {
        font-size: 14px;
    }
}

【讨论】：