Как использовать разную ширину желоба сетки с медиа-запросами?

Я бы как-то хотел иметь разную ширину желоба сетки с помощью переменной Bootstrap SASS $grid-gutter-width, но присвоение ей разных значений в медиа-запросах не работает. Я знаю, что это невозможно, но приветствуется любая помощь с использованием миксинов или циклов.

Пример того, что не работает, но указывает на то, чего я хочу достичь:

$grid-gutter-width: 30px !default;

@media ($screen-sm-min) {
    $grid-gutter-width: 50px;
}
@media ($screen-md-min) {
    $grid-gutter-width: 70px;
}

Кто-нибудь знает, как этого добиться по-умному?


css twitter-bootstrap sass bootstrap-sass
person AdmireNL    schedule 20.08.2014    source источник
comment
Я думаю, что это не совсем дубликат, так как я ищу более конкретное решение ... но сталкиваюсь с той же проблемой с переменными.   -  person AdmireNL    schedule 21.08.2014

Ответы (1)


arrow_upward
1
arrow_downward

У вас нет доступа к медиа-запросам до тех пор, пока Sass не будет обработан в CSS, а переменные актуальны только до обработки.

Вам нужно будет найти, где используется $ grid-gutter-width (возможно, в миксин make-grid-columns в файле grid-framework), которые генерируют разную ширину желоба для разной ширины экрана.

Возможно, вам потребуется добавить вложенный цикл, чтобы каждая спецификация столбца (xs, sm, md и т. Д.) Была охвачена для каждой ширины экрана.

person Gregory Avery-Weir    schedule 20.08.2014
comment
Спасибо за ваш ответ. Я понимаю, что медиа-запросы нельзя использовать для изменения переменных. Как бы вы ни указали, где это можно сделать, я не уверен, как именно это должно быть сделано, так как я не настолько профессионален с миксинами и циклами SASS. Любая помощь горячо приветствуется. - person AdmireNL; 21.08.2014
comment
Боюсь, что я тоже не большой эксперт, и это будет во многом зависеть от того, как вы создаете свой (S) CSS. Я бы изучил синтаксис, выяснил, что он делает по умолчанию, а затем выяснил, как его переопределить. - person Gregory Avery-Weir; 21.08.2014