SASS @for loop output CSS as one block of code?

Question

I have the following for loop:

@for $i from 1 through $columns {
    .tile#{$i}.noMargin {  
    margin:0;
     }
}

Which outputs as:

 .threeColForm .tile1.noMargin {
  margin: 0; }
.threeColForm .tile2.noMargin {
  margin: 0; }
.threeColForm .tile3.noMargin {
  margin: 0; }
.threeColForm .tile4.noMargin {
  margin: 0; }
.threeColForm .tile5.noMargin {
  margin: 0; }
.threeColForm .tile6.noMargin {
  margin: 0; }
.threeColForm .tile7.noMargin {
  margin: 0; }
.threeColForm .tile8.noMargin {
  margin: 0; }
.threeColForm .tile9.noMargin {
  margin: 0; }
.threeColForm .tile10.noMargin {
  margin: 0; }
.threeColForm .tile11.noMargin {
  margin: 0; }
.threeColForm .tile12.noMargin {
  margin: 0; }

Is there a way to write this so it would ouput like this:

.threeColForm .tile1.noMargin,
.threeColForm .tile2.noMargin,
.threeColForm .tile3.noMargin,
.threeColForm .tile4.noMargin,
.threeColForm .tile5.noMargin,
.threeColForm .tile6.noMargin,
.threeColForm .tile7.noMargin,
.threeColForm .tile8.noMargin,
.threeColForm .tile9.noMargin,
.threeColForm .tile10.noMargin,
.threeColForm .tile11.noMargin,
.threeColForm .tile12.noMargin {
  margin: 0; 
}

Any help is appreciated. Thanks

MY CSS (FYI):

.threeColForm {
    //cols, gutter
    @include grid(12, 1);
}

score 6 · Accepted Answer · answered May 16 '13 at 18:19

6

Use @extend

$columns: 12;

%no-margin {
    margin: 0;
}

@for $i from 1 through $columns {
    .tile#{$i}.noMargin {  
        @extend %no-margin;
    }
}

Output:

.tile1.noMargin, .tile2.noMargin, .tile3.noMargin, .tile4.noMargin, .tile5.noMargin, .tile6.noMargin, .tile7.noMargin, .tile8.noMargin, .tile9.noMargin, .tile10.noMargin, .tile11.noMargin, .tile12.noMargin {
  margin: 0;
}

answered May 16 '13 at 18:19

cimmanon

67,211
17
165
171

That works great. Could you explain what the % before no-margin does? – khollenbeck May 16 '13 at 18:28
1

It's called a *placeholder selector*: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholders – cimmanon May 16 '13 at 18:32

SASS @for loop output CSS as one block of code?

1 Answers1

Linked