Учимся работать с переменными в SCSS

Если ты только начал осваивать scss или еще не решился, но уже близок к этому то попав на этот блог, ты попал в правильное место. Сегодня я постараюсь рассказать и показать, как работать с переменными в scss, в прошлой статье мы уже разобрались как правильно компилировать scss, поэтому в дальнейшей работе у нас не будет никаких проблем.

Если ты знаешь, как пользоваться css, то освоить SassScript будет очень просто, даже слишком. Следующее из рубрики «Простое», это переменные, которые на самом деле смогут решить для кого-то огромную проблему, например, мне они экономят время.

Создаем тестовый проект

Я естественно создал тестовый, правда на момент просмотра этого материала, ты можешь делать свой продакшн, и легко подключить свой файл отдельно.

Кстати, для компиляции своего тестового проекта я использовал prepros. Для максимальной скорости. Вышло примерно такая картина:

Вид в редакторе Sublime Text 3
Вид в редакторе Sublime Text 3
Вид в браузере Google Chrome
Вид в браузере Google Chrome

Создаем переменными с переменными и заполняем его, а также подключаем в проект

Итак, создаем файлик с переменными, я его называл variables.scss, чтобы в будущем знать, что это файл с переменными.

список стелей в scss

В него я внес все те цвета и данные которые я могу использовать в проекте не один раз, а несколько, это могут быть цвета, размеры отступов, размеры текста и тому подобное. В некоторых случаях конечно удобнее использовать миксины, и даже в этом примере, но конкретной сейчас мы рассматриваем такую штуку как переменные.

Подключить наш файл в проект очень просто, для этого достаточно одной строчки @import «variables.scss»

Все, теперь все наши стили будут работать с переменными, все очень удобно и это ускоряет процесс верстки в несколько раз, в целом во врем верстки вы и сами заметите как это удобно.

Что в итоге получается:

  1. Мы храним все в переменных, что дает нам возможность задать цветовую гамму размер блоков и отступов и во время разработки не отклоняться от размеров, идти по плану и не запоминать какой конкретно оттенок синего мы должны вставить в этот блок. Меня это заставляло всего вернуться обратно наверх, скопировать вставить и так дальше, а тут просто написал синий и будь здоров.
  2. Так как мы храним переменные в отдельном файле, мы не захламляем основной файл, что позволяет разделить всю логику и точно знать где что искать.
  3. В этом примере мы видим, как работают переменные и как их можно создавать для работы своих целях.

Несколько слов о переменных

Чтобы было понятнее как работать с переменными в SCSS, ты должен понимать несколько простых вещей:

  • Переменные начинаются со знака $;
  • В них ты можешь хранить только значения css стиля, потому запись типа $color-black: color: black;
  • Ты можешь пользоваться ними сколько тебе угодно раз;
  • Они оптимизируют твою работу и ускоряют процесс;

Такая мелочь, а столько удобства в один момент. Если я был тебе полезен не забудь поделиться этой статьей в своей социалочке, возможно твоему другу или знакомому я тоже буду полезен, да и мне будет приятно видеть, что я помог многим людям.

Оставьте комментарий