CODEWITHSUNDEEP
sass
dannymcgee
dannymcgee

Reputation: 673

Is there any way to pass a parameter throgh a class in SASS?

What I want to achieve is something like this:

.indent-me-($num) {
    text-indent: ($num * 2.5em);
}

So if I add the class indent-me-10 to some element, it would receive the style text-indent: 25em. I want to do this because 1) I need a fair amount of flexibility (there probably won't be more than 4 or so levels of "indent", but I like to have all my bases covered — these classes will be generated by javascript logic, I'm not hard-coding them into the HTML), and 2), I would hate to have to write something like the following in a language as smart as SASS. I'm not super familiar with all of its intricacies, so I feel like I must be missing something.

.indent-me-1 { text-indent: 2.5em; }
.indent-me-2 { text-indent: 2 * 2.5em; }
.indent-me-3 { text-indent: 3 * 2.5em; }
.indent-me-4 { text-indent: 4 * 2.5em; }
...

Upvotes: 2

Views: 38

Answers (1)

Denis Tsoi
Denis Tsoi

Reputation: 10414

You can achieve this by using a combination of SCSS interpolation and a loop.

sass interpolation using #{$variable}

$num: 1;
.indent-me-#{$num} {
    text-indent: ($num * 2.5em);
}

and a @for loop to do this as well

@for $num from 1 through 10 {
  .indent-me-#{$num} {
    text-indent: ($num * 2.5em);
  } 
}

Upvotes: 2

Related Questions