Define variables with recurring names in Compass (SASS)

Question

Define variables with recurring names in Compass (SASS)

Navigation

#1 by (0 votes)

2

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?

css variables sass scss

asked by mononelo 04.12.2018 в 14:01

source

1 answer

PHP IF if there are three conditions, search engine can not filter for prices Problem to order related table laravel

score 0 · Accepted 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);
}