Bootstrap-Sass: переопределение переменных с использованием другой переменной

Я использую Bootstrap-sass для одного из своих проектов, и я хотел бы настроить его с помощью переменных Sass (конечно).

Я создал новый файл .scss с именем "_variables.scss" и импортировал его в свой основной файл .scss ПЕРЕД файлом bootstrap-sass. Он отлично работает, пока я не дойду до одной точки:

Если я хочу использовать переменные bootstrap-sass в своей настройке, очевидно, что переменная неизвестна (потому что она импортируется позже). Но это неизбежно, если я хочу правильно изменить определенные переменные, например:

$container-desktop: (940px + $grid-gutter-width);

Если я хочу изменить только «фиксированное» значение 940 пикселей на что-то, но я хочу по-прежнему использовать переменную $grid-gutter-width в моем определении, я получаю эту ошибку, которую я объяснил выше.

Любые идеи, как я могу это сделать?


css twitter-bootstrap sass bootstrap-sass
person rasmus1610    schedule 13.05.2015    source источник
comment
stackoverflow.com/questions/19430217/ stackoverflow.com/questions/19393264/   -  person Al-Mothafar    schedule 13.05.2015
comment
Я сомневаюсь, что ссылка на два других вопроса очень полезна в stackoverflow. На самом деле это довольно неубедительно. И на самом деле эти ссылки не являются ответом на мои вопросы. Это решает мою проблему с сеткой, но это был всего лишь пример. Я могу легко справиться с этим, вручную установив $grid-gutter-width на 30px, но в целом это не лучшая практика. Это более общая вещь, как перезаписать переменные bootstrap sass переменными bootstrap-sass: D   -  person rasmus1610    schedule 13.05.2015
comment
Я боюсь, что вам придется добавить дополнительный файл для переопределения переменных или напрямую изменить файл sass начальной загрузки.   -  person Hieu Le    schedule 13.05.2015
comment
Вы не можете использовать переменную, которая еще не была объявлена.   -  person cimmanon    schedule 13.05.2015
comment
Это не решение вашей проблемы, это описание вашей проблемы! и если вы прочитаете проблемы и решения, вы узнаете корень своей проблемы, в частности: stackoverflow.com/questions/19430217/   -  person Al-Mothafar    schedule 13.05.2015

Ответы (1)


arrow_upward
2
arrow_downward

Единственное решение, которое я видел, - это объявить переменные, от которых вы зависите. Итак, в _variables.scss bootstrap-sass вы найдете строку $grid-gutter-width: 30px !default; и используете ее в своем собственном файле следующим образом:

$grid-gutter-width: 30px;
$container-desktop: (940px + $grid-gutter-width);

Как вы себе представляете, просто копировать такую ​​информацию просто неудачно, особенно если вам придется копировать несколько определений переменных только для того, чтобы объявить одно, которое вы действительно хотите. Мне тоже было бы очень интересно, если бы у кого-то было решение, более "СУХИЕ".

person Chris Clark    schedule 14.05.2015
comment
Было бы здорово, если бы кто-нибудь написал программу, которая просматривала бы ваши объявления переменных (в данном случае только $container-desktop), а затем создала бы временную копию _variables.scss, заменяя объявления переменных на месте. Затем вы можете передать измененный _variables.scss компилятору sass. Это фактически решит проблему - не нужно повторно объявлять $grid-gutter-width. - person Chris Clark; 18.05.2015