I don't have much familiarity with the .scss syntax.
I am working with angular CLI and using the .scss extension for my css files.
My goal is to determine the background-color value conditionally.
@function getBgColor($value) {
$modular: #{$value}%2;
@debug $modular;
@if($modular == 0) {
@return red;
} @else {
@return green;
}
};
@for $i from 0 through 25 {
.mat-column-#{$i} {
max-width: 178px;
margin-right: 10px;
background-color: getBgColor(#{$i})
}
}
The code works correctly when I try to print 2%2 without using a variable name.
However, when introducing a variable like in my case ($value), it simply prints 1%2, 2%2, 3%2 ... 25%2 without performing any calculations.