Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Стили (CSS) Как правильно прописать асоциативный массив + цикл в SCSS?

Как правильно прописать асоциативный массив + цикл в SCSS?


     14.05.2015    Стили (CSS)    1282

вопрос
Доброго времени суток. Есть следующая функция:


@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}');
   }
  
}



Помогите пожалуйста, кто знает как его правильно прописать?

Ответил: evenegrad


На всякий, вот функция самой калькуляции:


@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);
                }
            }
        }
    }
}

Комментарии пользователей (7)

evenegrad
1

27 | 1

evenegrad - 14 мая 2015 14:42 - Юзер

Проблему решил:




$intgrid: ("768": "2 3 4 5 6 7 8 9", "440": "2 4 5 6 2");

@each $number, $i in $intgrid {
   @media (max-width: #{$number}px) {
      @include grid-calc($i, '--#{$number}');
   }
}


Но появилась другая проблема, $i, в которой находятся значения для создания калькуляции, сейчас отказываються работаь с ошибкой: is not integer

Можно ли как-то занести эту переменную в int?

evenegrad
1

27 | 1

evenegrad - 14 мая 2015 14:44 - Юзер

***Комментарий удален***

pavel31
4

340 | 158

pavel31 - 14 мая 2015 22:47 - Юзер

Это вообще что за язык такой? Просто ради интереса спрашиваю.

ПафНутиЙ
1064

3393 | 2433

ПафНутиЙ - 14 мая 2015 23:15 - Админ

Это более удобный CSS, если в двух словах.
Если сложно понять - начните с LESS для этого даже модуль для DLE есть https://github.com/pafnuty/LessForDle

Каков вопрос - таков и ответ. Просто помните об этом.

pavel31
4

340 | 158

pavel31 - 15 мая 2015 16:34 - Юзер

Ясно, спасибо за ответ и за ссылку.

evenegrad
1

27 | 1

evenegrad - 14 мая 2015 14:49 - Юзер

Проблема решена

ps:
, "440": (2 4 5 6 2)

evenegrad
1

27 | 1

evenegrad - 14 мая 2015 14:53 - Юзер

удаляйте вопрос :)

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы