Can I use SASS/SCSS variables to set class names?

Question

I'm trying to create a bunch of columns for a grid layout, and wondering if I can automate the width calculations with a SASS/SCSS mixin.

I'm currently writing

@mixin setWidth($a, $b){
 width : ($a / $b)*100%;
}
.col-1-2{
 @include setWidth(1, 2);
}

That's fine, but I'm just wondering if there's a way to make it even more DRY, by setting the class with a variable name and creating the class with a mixin.

Something like

@mixin setClass($a, $b){
  .col-$a-$b{
    width : ($a / $b)*100%;
  }
}

@include setClass(1, 2);

Tried it, doesn't work. (I didn't expect it to anyway because the syntax doesn't look right, but I'm not really sure what it should be.) — suryanaga, May 25 '14 at 14:10
You can use them pretty much everywhere including property name. https://github.com/zurb/foundation/blob/master/scss/foundation/components/_grid.scss — JAre, May 25 '14 at 15:37

Vangel Tzo · Accepted Answer · 2014-05-26T11:00:34.423

5

You just need to interpolate the variables #{$a}when they are being used for naming conventions

@mixin setClass($a, $b){
  .col-#{$a}-#{$b} {
    width : ($a / $b)*100%;
  }
}

@include setClass(1, 2);

An example : http://sassmeister.com/gist/8634660fa4b32f50b4c1

edited May 26 '14 at 11:00

answered May 26 '14 at 10:47

Vangel Tzo

8,885
3
26
32

Can I use SASS/SCSS variables to set class names?

1 Answers1