Как создать переменные в препроцессоре sass
Перейти к содержимому

Как создать переменные в препроцессоре sass

  • автор:

Переменные — SASS: Основы работы

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

С помощью переменных вы можете избавиться от дублирования кода. Посмотрим, как это работает на примере создания цветовой схемы проекта. Возьмём несколько основных цветов, которыми мы хотим пользоваться:

  • Тёмный — #303846
  • Светлый — #f7f7f7
  • Основной — #09d3ac
  • Вторичный — #2196f3

Теперь в начале нашего SASS-файла мы можем объявить переменные и записать эти значения в них. Для этого используется символ $ и указывается уникальное имя.

$dark: #303846; $light: #f7f7f7; $primary: #09d3ac; $secondary: #2196f3; 

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

.card  background: $light; border: 1px solid $dark; > 

В результате компиляции получится следующий CSS-код:

.card  background: #f7f7f7; border: 1px solid #303846; > 

Обратите внимание, что также, как и шаблонные селекторы, переменные не попадают в наш CSS-файл после компиляции. Они используются только внутри SASS-файла, что помогает избежать лишней информации внутри CSS.

Многие могут возразить, что переменные уже существуют в CSS и их использование похоже на то, что было описано выше. Вы будете правы — в CSS сейчас возможно управлять цветами точно таким же образом. Но при этом появляются лишние значения и само использование переменных чуть сложнее, чем это происходит в препроцессорах. Также важно понимать разницу переменных в SASS и в CSS. Переменные в CSS существуют в «настоящем времени», то есть они находятся в CSS-файле, их можно менять непосредственно в CSS и браузеры постоянно ссылаются на них, когда это необходимо. Переменные же в SASS исчезают после компиляции, а вместо них в CSS просто подставляются значения.

Область видимости

Переменная может быть объявлена как внутри селектора, так и вне его. В зависимости от того, где была объявлена переменная, ей можно пользоваться или во всём проекте или только внутри определённого селектора. Посмотрите на пример такого кода:

$margin-top: 20px; .card  $bg-color: #f9f9f9; > .wrapper  margin-top: $margin-top; background: $bg-color; > 

В данном случае мы объявили две переменные: $margin-top и $bg-color. Впоследствии обе переменные были использованы в селекторе .wrapper. Что произойдёт после компиляции? На самом деле никакой компиляции не произойдёт. Мы получим сообщение об ошибке:

$bg-color; │ ^^^^^^^^^ ╵ 

Компилятор говорит нам, что на 9 строке используется неизвестная переменная. Но ведь она есть — мы её объявили на 4 строке! Да — в коде действительно существует переменная $bg-color, но она существует только внутри селектора .card и вне этого селектора просто невидна.

Такое поведение называется областью видимости переменной. В зависимости от того, где мы объявили переменную, мы можем получать доступ к ней или во всём проекте, или только внутри одного селектора. Переменная $margin-top в этом примере является глобальной переменной, так как доступ к ней есть в любом участке нашего SASS-файла. Переменная $bg-color в примере является локальной переменной и доступна она только внутри того селектора, где была определена.

Разберём ещё один пример:

.card  $main-bg: #f9f9f9; $header-bg: #2196f3; .card-header  background: $header-bg; > .card-body  background: $main-bg; > > 

Обратите внимание, что переменные $main-bg и $header-bg объявлены внутри селектора .card. Так как селекторы .card-header и .card-body лежат внутри селектора .card, то переменные $main-bg и $header-bg будут доступны для этих селекторов. После компиляции мы получим следующий CSS-код:

.card .card-header  background: #2196f3; > .card .card-body  background: #f9f9f9; > 

Именование переменных

Как говорилось выше, имена переменных должны быть уникальны. Это правило создано для предотвращения возможных ошибок. Ведь на самом деле глобальная и локальная переменная может иметь одно и то же имя. Попробуем в наш последний пример добавить глобальную переменную:

$main-bg: #f7f7f7; .card  $main-bg: #f9f9f9; $header-bg: #2196f3; .card-header  background: $header-bg; > .card-body  background: $main-bg; > > .wrapper  background: $main-bg; > 

Заметьте, что переменная $main-bg объявлена и в начале SASS-файла и в селекторе .card. Скорее всего с первого взгляда вы не определите какой $main-bg будет использован в проекте. Попробуем скомпилировать этот код. В этот раз ошибок не будет:

.card .card-header  background: #2196f3; > .card .card-body  background: #f9f9f9; > .wrapper  background: #f7f7f7; > 

Созданная внутри селектора .card переменная $main-bg на самом деле не имеет ничего общего с глобальной переменной $main-bg. Даже при условии того, что они имеют одинаковые имена. Но вот путаницу это может внести, поэтому никогда не используйте одинаковые имена для глобальных и локальных переменных.

Подключение переменных из другого файла

Часто для удобной организации SASS стили разбиваются на несколько независимых файлов, в зависимости от их назначения. Например, у нас может быть следующая структура файлов:

В данной структуре у нас есть главный файл app.scss, в котором мы хотим подключить настройки из файла config.scss и стандартные настройки переменных из файла default_variables.scss. Подключить эти файлы в файл app.scss можно с помощью директивы @import, указав путь к необходимому файлу:

@import "config.scss"; @import "default_variables.scss"; 

Также при подключении SASS-файлов необязательно указывать расширение. Компилятор найдёт необходимый файл в указанной директории и подключит его. Значит, мы можем немного переписать код и не указывать лишнее расширение:

@import "config"; @import "default_variables"; 

Порядок подключения файлов в данном случае очень важен. Если внутри файлов config.scss и default_variables.scss будут конфликтующие значения, то возьмётся то, которое было указано последним. Здесь работает то же правило каскадности, что и в CSS: стили, записанные позже, имеют больший приоритет.

Флаг default

Вернёмся к структуре нашего проекта. В default_variables.scss запишем базовые цвета для нашего проекта:

$primary: #A0D788; $secondary: #71D0A7; $third: #CCD47D; 

Теперь, подключив файл к нашему основному файлу стилей, мы можем использовать эти переменные. Используем цвета в файле app.scss:

@import "config"; @import "default_variables"; .card  background: $primary; .btn  background: $secondary; > > 

После компиляции получим следующий CSS-код:

.card  background: #A0D788; > .card .btn  background: #71D0A7; > 

Проходит какое-то время, наш файл с переменными растёт. Возможно, мы даже используем его как пакет во многих проектах (например, похожий файл есть во фреймворке Bootstrap) и вдруг появилось желание изменить базовый цвет. Это абсолютно нормально, и все проекты ждёт такой этап.

Если мы изменим цвет непосредственно в файле default_variables.scss, то получим необходимый нам результат. Но иногда такой подход не работает. Представим, что мы используем такой файл в виде пакета, который загружается извне. В таком случае мы не сможем получать обновления, изменив значение в локальном файле. Наш файл уже не идентичен тому, который расположен на общем сервере.

Решить эту проблему помогает специальный флаг !default. Данный флаг выставляется после значения переменной и говорит о том, что значение по умолчанию необходимо использовать только в том случае, если ранее значение переменной нигде не было указано. Проставим для нашей цветовой схемы флаг !default:

$primary: #A0D788!default; $secondary: #71D0A7!default; $third: #CCD47D!default; 

Теперь, если мы добавим переменную $primary в файл config.scss, то именно её значение будет использовано в качестве фонового цвета для селектора .card:

config.scss

$primary: #09D3AC; 

default_variables.scss

$primary: #A0D788!default; $secondary: #71D0A7!default; $third: #CCD47D!default; 

app.scss

@import "config"; @import "default_variables"; .card  background: $primary; .btn  background: $secondary; > > 

После компиляции этого кода мы получим следующий результат:

.card  background: #09D3AC; > .card .btn  background: #71D0A7; > 

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

Наши выпускники работают в компаниях:

Переменные

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

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

SCSS Syntax

$base-color: #c6538c; $border-dark: rgba($base-color, 0.88); .alert  border: 1px solid $border-dark; > 

Sass Syntax

$base-color: #c6538c $border-dark: rgba($base-color, 0.88) .alert border: 1px solid $border-dark 

CSS Output

.alert  border: 1px solid rgba(198, 83, 140, 0.88); > 

⚠️ Внимание!

В CSS есть собственные переменные, которые полностью отличаются от переменных Sass. Знай различия!

  • Все переменные Sass компилируются с помощью Sass. Переменные CSS включены в вывод CSS.
  • Переменные CSS могут иметь разные значения для разных элементов, но переменные Sass имеют только одно значение за раз.
  • Переменные Sass являются императивными, что означает, что если вы используете переменную, а затем измените ее значение, предыдущее использование останется прежним. Переменные CSS декларативны, что означает, что если вы измените значение, это повлияет как на предыдущее, так и на последующее использование.

SCSS Syntax

$variable: value 1; .rule-1  value: $variable; > $variable: value 2; .rule-2  value: $variable; > 

Sass Syntax

$variable: value 1 .rule-1 value: $variable $variable: value 2 .rule-2 value: $variable 

CSS Output

.rule-1  value: value 1; > .rule-2  value: value 2; > 

�� Интересный факт:

Переменные Sass, как и все идентификаторы Sass, рассматривают дефисы и подчеркивания как идентичные. Это означает, что $font-size и $font_size оба относятся к одной и той же переменной. Это историческое наследие самых ранних дней Sass, когда в именах идентификаторов разрешались только символы подчеркивания. После того, как Sass добавил поддержку дефисов в соответствии с синтаксисом CSS , они стали эквивалентными, чтобы упростить миграцию.

Значения по умолчанию permalink Значения по умолчанию

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

Чтобы сделать это возможным, Sass предоставляет флаг !default . Это присваивает значение переменной, только если эта переменная не определена или ее значение равно null . В противном случае будет использоваться существующее значение.

Настройка модулей permalink Настройка модулей

Совместимость:
Dart Sass since 1.23.0

В настоящее время только Dart Sass поддерживает @use . Пользователи других реализаций должны использовать правило @import rule вместо этого.

Переменные, определенные с помощью !default , могут быть настроены при загрузке модуля с помощью правила @use . Библиотеки Sass часто используют переменные !default , чтобы позволить своим пользователям настраивать CSS библиотеки.

Чтобы загрузить модуль с конфигурацией, напишите @use с (: , : ) . Настроенные значения заменят значения переменных по умолчанию. Могут быть настроены только переменные, записанные на верхнем уровне таблицы стилей с флагом !default .

SCSS Syntax

// _library.scss $black: #000 !default; $border-radius: 0.25rem !default; $box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default; code  border-radius: $border-radius; box-shadow: $box-shadow; > 
// style.scss @use 'library' with ( $black: #222, $border-radius: 0.1rem ); 

Sass Syntax

// _library.sass $black: #000 !default $border-radius: 0.25rem !default $box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default code border-radius: $border-radius box-shadow: $box-shadow 
// style.sass @use 'library' with ($black: #222, $border-radius: 0.1rem) 

CSS Output

code  border-radius: 0.1rem; box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15); > 

Встроенные переменные permalink Встроенные переменные

Переменные, определенные встроенным модулем, не могут быть изменены.

SCSS Syntax

@use "sass:math" as math; // Это задание будет провалено. math.$pi: 0; 

Sass Syntax

@use "sass:math" as math // Это задание будет провалено. math.$pi: 0 

Область видимости permalink Область видимости

Переменные, объявленные на верхнем уровне таблицы стилей, являются глобальными. Это означает, что к ним можно получить доступ в любом месте их модуля после того, как они были объявлены. Но это верно не для всех переменных. Те, которые объявлены в блоках (фигурные скобки в SCSS или код с отступом в Sass), обычно являются локальными, и к ним можно получить доступ только внутри блока, в котором они были объявлены.

SCSS Syntax

$global-variable: global value; .content  $local-variable: local value; global: $global-variable; local: $local-variable; > .sidebar  global: $global-variable; // Это не удастся, потому что $local-variable не входит в область видимости: // local: $local-variable; > 

Sass Syntax

$global-variable: global value .content $local-variable: local value global: $global-variable local: $local-variable .sidebar global: $global-variable // Это не удастся, потому что $local-variable не входит в область видимости: // local: $local-variable 

CSS Output

.content  global: global value; local: local value; > .sidebar  global: global value; > 

Затенение permalink Затенение

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

SCSS Syntax

$variable: global value; .content  $variable: local value; value: $variable; > .sidebar  value: $variable; > 

Sass Syntax

$variable: global value .content $variable: local value value: $variable .sidebar value: $variable 

CSS Output

.content  value: local value; > .sidebar  value: global value; > 

Если вам нужно установить значение глобальной переменной из локальной области видимости (например, в миксине), вы можете использовать флаг !global . Объявление переменной, помеченное как !global , всегда будет присвоено глобальной области видимости.

SCSS Syntax

$variable: first global value; .content  $variable: second global value !global; value: $variable; > .sidebar  value: $variable; > 

Sass Syntax

$variable: first global value .content $variable: second global value !global value: $variable .sidebar value: $variable 

CSS Output

.content  value: second global value; > .sidebar  value: second global value; > 

⚠️ Внимание!

Совместимость:
Dart Sass since 2.0.0

Старые версии Sass позволяли использовать !global для переменной, которая еще не существует. Это поведение устарело, чтобы гарантировать, что каждая таблица стилей объявляет одни и те же переменные независимо от того, как она выполняется.

Флаг !global может использоваться только для установки переменной, которая уже была объявлена на верхнем уровне файла. Его нельзя использовать для объявления новой переменной.

Область управления потоком permalink Область управления потоком

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

SCSS Syntax

$dark-theme: true !default; $primary-color: #f8bbd0 !default; $accent-color: #6a1b9a !default; @if $dark-theme  $primary-color: darken($primary-color, 60%); $accent-color: lighten($accent-color, 60%); > .button  background-color: $primary-color; border: 1px solid $accent-color; border-radius: 3px; > 

Sass Syntax

$dark-theme: true !default $primary-color: #f8bbd0 !default $accent-color: #6a1b9a !default @if $dark-theme $primary-color: darken($primary-color, 60%) $accent-color: lighten($accent-color, 60%) .button background-color: $primary-color border: 1px solid $accent-color border-radius: 3px 

CSS Output

.button  background-color: #750c30; border: 1px solid #f5ebfc; border-radius: 3px; > 

⚠️ Внимание!

Переменные в области управления потоком могут назначаться существующим переменным во внешней области, но они не могут объявлять там новые переменные. Убедитесь, что переменная уже объявлена, прежде чем присваивать ей значение, даже если вам нужно объявить ее как null .

Продвинутые функции переменных permalink Продвинутые функции переменных

Основная библиотека Sass предоставляет несколько дополнительных функций для работы с переменными. Функция meta.variable-exists() возвращает, существует ли переменная с данным именем в текущей области, а функция meta.global-variable-exists() делает то же самое. но только в глобальном масштабе.

⚠️ Внимание!

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

SCSS Syntax

@use "sass:map"; $theme-colors: ( "success": #28a745, "info": #17a2b8, "warning": #ffc107, ); .alert  // Вместо $theme-color-# background-color: map.get($theme-colors, "warning"); > 

Sass Syntax

@use "sass:map" $theme-colors: ("success": #28a745, "info": #17a2b8, "warning": #ffc107) .alert // Вместо $theme-color-# background-color: map.get($theme-colors, "warning") 

CSS Output

.alert  background-color: #ffc107; > 

Переменные

Самое простое, что поддерживает SassScript — это использование переменных. Переменные начинаются со знака доллара $ и задаются как свойства CSS:

$width: 5em; // Вы можете обратиться к переменной в свойствах #main  width: $width; > 
$width: 5em // Вы можете обратиться к переменной в свойствах #main width: $width 

Переменные доступны только в пределах того уровня вложенности селекторов, на котором они определены. Если они определяются вне каких-либо вложенных селекторов, они доступны глобально. Если вы хотите, чтобы объявленная на каком-либо уровне вложенности переменная также была доступна глобально, вы можете определить её со специальной меткой !global . Например:

#main  $width: 5em !global; width: $width; > #sidebar  width: $width; > 
#main $width: 5em !global width: $width #sidebar width: $width 
#main  width: 5em; > #sidebar  width: 5em; > 

Основы препроцессора Sass: переменные, миксины, операторы, импорт, вложенность, наследование

От автора: CSS сам по себе веселый, однако стили становятся все больше, сложнее и труднее в обслуживании. Здесь может помочь препроцессор. Sass позволяет использовать функции, которых пока что нет в CSS. Например, переменные, вложенность, миксины, наследование и другие хорошие функции, которые оживляют CSS.

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

Самый прямой способ через терминал. После установки Sass из терминала можно запустить sass input.scss output.css. Следить можно как за отдельными файлами, так и за всеми директориями. Кроме того, следить за папками или директориями можно с помощью флага —watch. Пример запуска Sass и отслеживания целой директории:

sass — watch app / sass : public / stylesheets

Переменные

Представьте переменные, как способ хранения информации, которую можно использовать повторно в стилях. Хранить можно цвета, стеки шрифтов или любые значения CSS, которые необходимо повторно использовать. Sass использует символ $ для создания переменной. Пример:

$ font — stack : Helvetica , sans — serif ;
$ primary — color : #333;
font : 100 % $ font — stack ;
color : $ primary — color ;

Когда Sass отработает, он заменит переменные $font-stack и $primary-color на нормальные значения CSS и поместит их в код. Это крайне удобно при работе с цветами бренда и их последовательном распространении на сайте.

font : 100 % Helvetica , sans — serif ;
color : #333;

Вложенность

При написании HTML вы могли заметить, что он имеет четкую вложенную и визуальную иерархию. CSS же такой структуры не имеет.

Sass позволяет использовать схожую с HTML визуальную иерархию вложенности CSS-селекторов. Учтите, что слишком сложные правила вложенности приведут к усложнению CSS, и его будет трудно обслуживать. Это плохая практика.

Пример типичных стилей для навигации на сайте:

padding : 0 ;
list — style : none ;
display : block ;
padding : 6px 12px ;
text — decoration : none ;

Обратите внимание на то, как ul, li и a селекторы вложены внутрь nav. Это отличный способ организовать CSS и сделать его более читаемым. После генерации CSS вы получите примерно следующее:

padding : 0 ;
list — style : none ;
display : inline — block ;
display : block ;
padding : 6px 12px ;
text — decoration : none ;

Фрагменты

Вы можете создавать фрагментные файлы Sass, в которых будут храниться небольшие кусочки CSS, и эти файлы можно подключать в другие Sass файлы. Это отличный способ создания модульного CSS, упрощающий обслуживание кода. Фрагмент – это просто Sass файл, в имени которого первый символ нижнее подчеркивание. Файлы можно называть примерно так _partial.scss. Нижнее подчеркивание позволяет Sass понять, что это всего лишь фрагмент, и его не нужно генерировать в CSS файл. Sass фрагменты подключаются с помощью директивы @import.

Импорт

В CSS есть важная опция, с помощью которой можно разбить CSS на меньшие, более обслуживаемые кусочки. Единственный минус – каждый раз, когда в CSS встречается @import, происходит HTTP-запрос. Sass построен на основе CSS @import, однако вместо HTTP-запроса Sass совместит импортируемый файл с основным файлом, чтобы вы могли загрузить всего один CSS файл в браузер.

Например, у вас есть пара Sass файлов _reset.scss и base.scss. Мы хотим импортировать _reset.scss в base.scss.

Добавить комментарий

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