在我正在工作的Sass表中,我希望能够在变量内部存储一些body
类,并在一些元素的选择器内嵌套的选择器中使用它们,如:
$classes: ".bodyClass1, .bodyClass2";
.aClass, .anotherClass {
/* some styles */
#{$classes} & {
/* Styles under $classes */
}
#{$classes} &:hover {
/* Styles under $classes when hovering */
}
}
我要找的输出是:
.aClass, .anotherClass {
/* some styles */
}
.bodyClass1 .aClass, .bodyClass2 .aClass, .bodyClass1 .anotherClass, .bodyClass2 .anotherClass {
/* Styles under $classes */
}
.bodyClass1 .aClass:hover, .bodyClass2 .aClass:hover, .bodyClass1 .anotherClass:hover, .bodyClass2 .anotherClass:hover {
/* Styles under $classes when hovering */
}
但是它呈现为:
.aClass, .anotherClass {
/* some styles */
}
.aClass .bodyClass1, .bodyClass2 .aClass, .anotherClass .bodyClass1, .bodyClass2 .anotherClass {
/* Styles under $classes */
}
.aClass .bodyClass1, .bodyClass2 .aClass:hover, .anotherClass .bodyClass1, .bodyClass2 .anotherClass:hover {
/* Styles under $classes when hovering */
}
我可以通过在body
类之后创建&
, &:hover
, &:active
等单独的变量来解决这个问题,但我想知道是否有一种方法可以用我试图使用它们的方式使用变量。
srekobble使用循环的解决方案对我来说非常有效!我把它改编成一个函数,如果有人想要使用它,这里是:
$classes: ".bodyClass1", ".bodyClass2";
@function c($classes, $append: null){
$processedClasses: "";
$length: length($classes);
@for $i from 1 through $length {
@if $append {
$processedClasses: #{$processedClasses}#{nth($classes, $i)} #{$append}#{", "};
} @else {
$processedClasses: #{$processedClasses}#{nth($classes, $i)}#{", "};
}
}
@return $processedClasses;
}
.aClass, .anotherClass {
/* some styles */
#{c($classes, "&")} {
/* Styles under $classes */
}
#{c($classes, "&:hover")} {
/* Styles under $classes when hovering */
}
}
输出为:
.aClass, .anotherClass {
/* some styles */
}
.bodyClass1 .aClass, .bodyClass2 .aClass, .bodyClass1 .anotherClass, .bodyClass2 .anotherClass {
/* Styles under $classes */
}
.bodyClass1 .aClass:hover, .bodyClass2 .aClass:hover, .bodyClass1 .anotherClass:hover, .bodyClass2 .anotherClass:hover {
/* Styles under $classes when hovering */
}
你可以尝试这样做:
$classes: ".bodyClass1" , ".bodyClass2";
.aClass, .anotherClass {
/* some styles */
@for $i from 1 through 2 {
#{nth($classes, $i)} & {
/* Styles under $classes */
}
#{nth($classes, $i)} &:hover {
/* Styles under $classes when hovering */
}
}
}
示例:http://sassmeister.com/gist/acb0096e9d35e1ae437d
这将是另一种在我看来更具可扩展性的方法。因为您不必在每次更新变量时都编辑for循环中的数字。
$classes: (bodyClass1, bodyClass2);
@each $class in $classes {
.aClass, .anotherClass {
// your styles
.#{$class} & {
// your styles
&:hover {
// your styles
}
}
}
}
On SassMeister http://sassmeister.com/gist/6edf0319bd4d8462fa95