Domanda

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

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

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.

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

EDIT: I have found the answer:

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

Soluzione

Using those two answers, I came up with this 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 */
}

Output CSS

.col-3, .col-6, .col-9, .col-12 {
  /* Your styles here */
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top