mixin 中的 SASS/SCSS 类列表参数答案

【问题标题】：SASS/SCSS classlist argument in mixinmixin 中的 SASS/SCSS 类列表参数
【发布时间】：2018-12-17 01:48:47
【问题描述】：

我制作了一个 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 );

现在，如果我将多个选择器传递给最后一个参数，除了最后一个选择器将获得嵌套样式。

li.product 样式中的示例，带有 2 个选择器：

@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 中是不可能的？

【问题讨论】：

如果我把它放在 Sassmeister 中，它会正确编译：sassmeister.com 你使用的是哪个编译器？
我正在使用 Leafo 的 scssPHP https://github.com/leafo/scssphp，但版本非常过时。更新应该可以解决问题。
更新永远不会受到伤害。希望对您有所帮助！

标签： sass scss-mixins

【解决方案1】：

对于查看此主题的其他人：

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

【讨论】：