SASS: установить переменную во время компиляции

Можно ли установить переменную sass во время компиляции? Я в основном хочу сделать это:


$color: red !default;
div#head {

  background-color: $color;

}

Когда я компилирую в css, я хочу установить для $color значение «синий» (желательно из командной строки). Кто-нибудь смог это сделать?

Спасибо, Крис


person Kenzic    schedule 08.04.2011    source источник
comment
Я не совсем уверен, что понимаю ваш вопрос, вы хотите установить эту переменную в командной строке? Вроде как sass --style compressed --watch scss:css --vars $color=blue; <- this line won't work, I just made it up to illustrate my question   -  person Jannis    schedule 09.04.2011
comment
Да, это именно то, что я хотел бы сделать!   -  person Kenzic    schedule 09.04.2011
comment
В таком случае я не думаю, что это возможно прямо сейчас. Извините, я не мог больше помочь. Единственное, что я могу себе представить, это создать собственный скрипт bash/ruby, который добавляет переменную в файл, а затем, я думаю, компилирует стек файлов scss в css.   -  person Jannis    schedule 09.04.2011


Ответы (2)


Я нашел это в их FAQ http://sass-lang.com/docs/yardoc/file.FAQ.html

Если вы просто хотите передавать некоторые переменные в CSS каждый раз, когда он компилируется, например, используя --watch, вы можете использовать функции Sass для определения скриптов Ruby даже для запросов к базе данных. Но код будет компилироваться только один раз и обслуживаться статически.

Но если вам нужно перекомпилировать его при каждом запросе с разными вариантами,

вы можете использовать Sass::Engine для отображения кода, используя < href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#custom-option" rel="noreferrer">:настраиваемый параметр для передачи данных, которые может быть доступен из ваших функций Sass.

Хотя, похоже, это не рекомендуется. Вероятно, из соображений производительности.

person Caio Cunha    schedule 10.07.2012
comment
Ссылка 404d. Любое обновление? - person underscore_d; 01.05.2021

Альтернативой параметрам командной строки является создание других файлов, присваивающих значения переменным.

Предположим, что приведенный выше код находится в файле с именем 'style.scss'. Чтобы установить для $color значение «синий», создайте файл, например:

$color: blue;
@import "style";

и назовите его, например, blue.scss. Затем скомпилируйте его ниже.

sass blue.scss:style.css

Если вы хотите присвоить переменной другое значение, создайте другой файл с именем «green.scss», например:

$color: green;
@import "style";

Затем скомпилируйте его с помощью

sass green.scss:anotherstyle.css

Это несколько беспокоит, но позволяет определять значения переменных во время компиляции.

person reppets    schedule 07.03.2012
comment
Не думаю, что это сработает. Мой пример прост для демонстрационных целей, но я хотел бы установить несколько переменных. - person Kenzic; 08.03.2012
comment
Конечно, вы можете поместить несколько переменных в файл импорта. Вы имели в виду, что вам нужно создавать отдельные файлы с большим количеством комбинаций значений, таких как {var1: val1A, var2: val2A, ...} в файл A.css, {var1: val1B, var2: val2B, ...} в файл B. css, файлC.css, файлD.css...? Если так, то очень плохо, что мой ответ не может помочь. Но это все еще полезно, когда вы хотите создать файлы css, которые мало чем отличаются друг от друга из одного файла scss. Например. Большинство стилей css являются общими, и необходимы некоторые настройки, чтобы адаптировать стили к различным устройствам, таким как ПК/планшет/смартфон. Для определения набора переменных требуется всего 3 файла. - person reppets; 08.03.2012
comment
Или, если вы имеете в виду, что хотите попробовать много специальных значений, отредактируйте файл импорта и запустите sass с опцией --watch. - person reppets; 08.03.2012