[英]Sass mixin with class name as variable and :lang()
i am trying create mixin.我正在尝试创建 mixin。 Something like this像这样的东西
@mixin localesRule($class, $cssProp, $value) {
.#{$class:lang(pt)}, //...other locales {
$cssProp: $value;
}
}
But got error... Can someone help me?但是出现错误...有人可以帮助我吗? It is possible to do this?有可能做到这一点吗?
@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);
}
}
output:输出:
.foo-button:lang(pt), .foo-button:lang(pl), .foo-button:lang(sk), .foo-button:lang(mx), .foo-button:lang(pt-BR) {
padding-right: 0;
}
Don't know what you exactly expect, here are a few basic examples in SCSS .不知道你到底期望什么,这里有一些SCSS 的基本例子。 Let's assume you have a class like this.假设你有一个这样的类。
.login {}
Now create a mixin you want to use in the class.现在创建一个你想在课堂上使用的 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;
};
}
Use the mixin in the class.在类中使用mixin。
.login {
@include main-button(&, float, "text", 14px);
}
The output should be like this.输出应该是这样的。
.login {
.login__img {
width: 100px;
float: left;
}
.text {
background: none;
}
.login__button {
font-size: 14px;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.