css - SASS 匹配类名中的数字

Question

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

.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;
            }
        }
    }
}

Answer 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 */
}