Sass mixin 以類名作為變量和 :lang()

Question

我正在嘗試創建 mixin。 像這樣的東西

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

但是出現錯誤...有人可以幫助我嗎？ 有可能做到這一點嗎？

Answer 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;
}

Answer 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;
    }
}