Define variables with recurring names in Compass (SASS)


I need to define 100 variables which are composed of a prefix and the number such that:

$negro_trans1 : rgba(0,0,0,.01);
$negro_trans2 : rgba(0,0,0,.02);
$negro_trans3 : rgba(0,0,0,.03);
$negro_trans4 : rgba(0,0,0,.04);
$negro_trans5 : rgba(0,0,0,.05);
$negro_trans6 : rgba(0,0,0,.06);
$negro_trans7 : rgba(0,0,0,.07);

I need to create a @for so that I do not have to write the definition of the variables one by one. For me it would make sense to do something like this:

@for $i from 1 through 99{
    $alpha : $i/100;
    $negro_trans#{$i}' : rgba(0,0,0,$alpha);

But it does not work!
Does anyone have any idea how to make this variable statement?

asked by mononelo 04.12.2018 в 14:01

1 answer


I have never had the need to have 100 variables declared as such, however, if I needed something like that, I would solve it with a sass function, something like this:

@function negro-trans($nivel){
    @return rgba(0,0,0,$nivel/100);

And I would use it this way:

.mi-clase {
    color: negro-trans(1);
answered by 06.12.2018 / 06:33