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更新为最新版本，从而解决了类列表问题。但是，它确实引入了另一个较小的问题，即具有一些可变范围，但是很容易解决。

Mixin中的SASS / SCSS类列表参数

1 个答案: