SCSS class names with values as input

Question

I am trying to make a css class that can use a number as input for a style associated with the class. For example:

.font-<size> {
  font-size: <size>px;
}

where 'size' is a number.

Is this possible with scss?

MY SOLUTION:

This is what I ended up doing which is hard coded but gets the job done:

 // Generates some useful quick font size classes
$f-sizes: 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30;
@each $i in $f-sizes {
  &.font-#{$i*2}:before {
    font-size: #{$i*2}px;
  }
}

Which will allow me to access font sizes 2 through 60 via class .font-28.

score 0 · Answer 1 · answered Dec 18 '15 at 21:03

0

You would need a mixin. http://thesassway.com/advanced/pure-sass-functions

@mixin size-mixin($some-number) {
  font-size: $some-number;
}

Then you would just include this mixing on your classes.

.font-class {
  @include size-mixin(10px);
}

answered Dec 18 '15 at 21:03

Nichole Boseman

57
2

1

yes but can the actual class name be used give the 10px into the mixin? It looks like this would be hard coded like the answer by @bass-jobsen – bneigher Dec 18 '15 at 21:13
what are you trying to do? sass works by generating css for you, but does not process css on the fly so that if you have a class named font-size-{number} it would read the number and generate the styles needed. you can utilize mixins to create various classes with different properties without retyping in all the data, but i do not think you would be able to do what you are looking to do. – Nichole Boseman Dec 18 '15 at 21:35
ahh right that is true. So this is impossible to do. Thanks! – bneigher Dec 18 '15 at 21:58

score -2 · Answer 2 · answered Dec 18 '15 at 21:05

-2

$number: 10;

.font-#{$number} {
  font-size: #{$number}px;
}

The SCSS code above compiles into CSS code as follows:

.font-10 {
  font-size: 10px; }

answered Dec 18 '15 at 21:05

Bass Jobsen

48,736
16
143
224

this is not answering my question. I don't want to ever set $number, I want this to be passed in from my markup... – bneigher Dec 18 '15 at 21:14
i do not understand your question. SCSS precompiles into static CSS code "knowing" nothing about your HTML – Bass Jobsen Dec 18 '15 at 21:29

SCSS class names with values as input

2 Answers2