вопрос
Доброго времени суток. Есть следующая функция:
Не могу понять, как в SCSS создать не простой цикл, а с ассоциативным массивом. Мне нужно, что бы подобные медиаквери, с данной фукнцией, но значениями взятыми из массива, повторялись до пока в массиве есть значения. пытался сделать так, но ничего не вышло:
Помогите пожалуйста, кто знает как его правильно прописать?
@media (max-width: 768px) {
@include grid-calc(2 3 4 5 6, '--768');
}
Не могу понять, как в SCSS создать не простой цикл, а с ассоциативным массивом. Мне нужно, что бы подобные медиаквери, с данной фукнцией, но значениями взятыми из массива, повторялись до пока в массиве есть значения. пытался сделать так, но ничего не вышло:
$intgrid: ("2 3 4 5 6 7 8": "768", "3 4 5 6 8": "320");
@each $number, $i in $intgrid {
@media (max-width: #{$i}px) {
@include grid-calc($i , '--#{$number}');
}
}
Помогите пожалуйста, кто знает как его правильно прописать?
На всякий, вот функция самой калькуляции:
@function gcf($a, $b) {
@if $b == 0 { @return $a; }
@else { @return gcf($b, $a % $b); }
}
@function contains($list, $value) {
@if type-of($list) == list { @return not not index($list, $value); }
@else { @return $list == $value; }
}
@mixin grid-calc($units, $modifier: '') {
@if $modifier != '' {
.x1#{$modifier}{
width: 100%;
}
}
@each $n in $units {
$x: $n - 1;
@for $i from 1 through $x {
$i-r: 0;
$n-r: 0;
$g: gcf($i, $n);
@if $g > 1 {
$i-r: $i/$g;
$n-r: $n/$g;
}
$canreduce: contains($units, $n-r);
.x#{$i}d#{$n}#{$modifier} {
@if $canreduce {
@extend .x#{$i-r}d#{$n-r}#{$modifier};
}
@else {
width: percentage($i / $n);
}
}
}
}
}
