0

我制作了一个 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 中是不可能的？

4

1 回答 1

0

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

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

于 2018-10-09T08:29:04.473 回答