0

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;
            }
        }
    }
}
Alex McCabe
  • 1,852
  • 2
  • 20
  • 33
  • Use case? 12 would obviously be a multiple of 1, 2, 3, 4, & 6 so you might have troubles. – Paulie_D Mar 07 '14 at 12:06
  • Why not just do `.col-3, .col-6, .col-9, .col-12 { /*do stuff*/ }`? Could you give an example of what you want to do? – thgaskell Mar 07 '14 at 12:07
  • I am creating a grid that is dynamic and I don't know how many columns there will be. The number of columns is defined by the SASS setup. – Alex McCabe Mar 07 '14 at 12:11
  • Check out the update answer here: http://stackoverflow.com/a/17559740/2129835. *Edit*: I actually like this solution better: http://stackoverflow.com/a/17566530/2129835 – thgaskell Mar 07 '14 at 12:14
  • Thanks @thgaskell, that set me on the right track. I found the correct answer now! – Alex McCabe Mar 07 '14 at 12:24

1 Answers1

3

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 */
}
Community
  • 1
  • 1
thgaskell
  • 12,772
  • 5
  • 32
  • 38
  • This is cool, it's more efficient that what I had done as it doesn't declare the styles multiple times. Thank you! – Alex McCabe Mar 07 '14 at 12:52