类名中的 SASS 匹配号答案

【问题标题】：SASS match number in class name类名中的 SASS 匹配号
【发布时间】：2014-03-07 21:50:19
【问题描述】：

我正在寻找一种方法来匹配类名中的数字。

.col-2 {...}
.col-3 {...}
.col-4 {...}
...
.col-12 {...}

如果类名是数字的倍数，我想匹配。假设我想匹配.col-3、.col-6、.col-9 等。

现在我知道你可以使用(Number) mod(other number)，但这不是类名的一部分。

编辑： 我找到了答案：

@include breakpoint(500px) {
    @for $i from 1 through $number-of-columns {
        @if $i % 4 == 0{
            [class$="#{$i}"] {
               background-color: red;
            }
        }
    }
}

【问题讨论】：

用例？ 12 显然是 1、2、3、4 和 6 的倍数，所以你可能会遇到麻烦。
为什么不直接做.col-3, .col-6, .col-9, .col-12 { /*do stuff*/ }？你能举一个你想做什么的例子吗？
我正在创建一个动态网格，但我不知道会有多少列。列数由 SASS 设置定义。
在此处查看更新答案：stackoverflow.com/a/17559740/2129835。编辑：我其实更喜欢这个解决方案：stackoverflow.com/a/17566530/2129835
感谢@thgaskell，这让我走上了正轨。我现在找到了正确答案！

标签： css math sass modulus

【解决方案1】：

使用这两个答案，我想出了这个 mixin：

SASS

@mixin col-mod($n, $max) {
    %mod-#{$n} {
        @content;
    }
    $i: $n;
    @while $i <= $max {
        .col-#{$i} {
            @extend %mod-#{$n}
        }
        $i: $i+$n;
    }
}

@include col-mod(3, 12) {
    /* Your styles here */
}

输出 CSS

.col-3, .col-6, .col-9, .col-12 {
  /* Your styles here */
}

【讨论】：

这很酷，它比我所做的更有效，因为它不会多次声明样式。谢谢！