类名中的 SASS 匹配号 [英] SASS match number in class name

问题描述

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

I am looking for a way to match a number in a class name.

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

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

I want to match if the class name is a multiple of a number. Say I want to match .col-3, .col-6, .col-9 etc.

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

Now I know you can do (Number) mod(other number), but this is not part of a class name.

我找到了答案:

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

推荐答案

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

Using those two answers, I came up with this mixin:

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

这篇关于类名中的 SASS 匹配号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！