mixin 中的 SASS/SCSS classlist 参数

Question

我做了一个mixin，用于在最小/最大媒体查询中制作一些网格列。看起来像这样：

@mixin woo-grid($min: 0px, $max: 9999px, $cols: 3, $class: '') {
@media only screen and (min-width: $min) and (max-width: $max){
.woocommerce, #{$class}{
ul.products[class*="columns"]{
margin-right: -2%;
margin-left: 0px;
}
ul.products[class*="columns"] li.product{
width: (100% / $cols) - 2% ;
margin-right: 2%;
margin-left: 0px;
&:nth-of-type(#{$cols}n+#{$cols}){
width: (100% / $cols) - 2% ;
clear: right ;
float: right;
}
&:nth-of-type(#{$cols}n+1){
width: (100% / $cols) - 2% ;
clear: both !important;
float: left;
}
@for $i from 2 through $cols{
@if($i != $cols){
&:nth-of-type(#{$cols}n+#{$i}){
width: (100% / $cols) - 2% ;
clear: none !important;
float: left;
}
}
}
}
}
}
}

如何使用：

@include woo-grid(480px, 769px, 2, '.product-slider-section );

现在，如果我将几个选择器传递给最后一个参数，则只有最后一个选择器才能获得嵌套样式。

具有 2 个选择器的li.product样式示例：

@include woo-grid(480px, 769px, 2, '.product-slider-section, .product-cats' );

将在 CSS 中输出以下选择器：

.woocommerce ul.products[class*="columns"] li.product:nth-of-type(2n+1),
.product-slider-section, 
.product-cats ul.products[class*="columns"] li.product:nth-of-type(2n+1)

$class参数的第一个选择器在所有嵌套样式中都会被完全忽略。

我做错了什么吗？或者这在 SASS 中是不可能的？

Answer 1

对于查看此线程的其他任何人：

我将Leafo的scssPHP更新到最新版本，解决了类列表问题。然而，它确实引入了一些变量范围的另一个小问题，但这很容易解决。