Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Web Design
  2. Sass
Webdesign

Понимание области переменных в Sass

by
Length:ShortLanguages:

Russian (Pусский) translation by Sergey Zhuk (you can also view the original English article)

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

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

Область переменных Sass

Sass поддерживает два типа переменных: локальные переменные и глобальные переменные.

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

С другой стороны, локальные переменные - это те, которые объявлены внутри селектора. Позже мы рассмотрим, как мы можем настроить это поведение. Но сейчас давайте посмотрим наш первый пример.

Здесь мы определяем mixin, а затем переменную btn-bg-color внутри нее. Это локальная переменная, поэтому она видима только для кода внутри этого mixin:

Далее мы можем вызвать mixin следующим образом:

Получившийся CSS:

Представьте, однако, что мы также хотим использовать эту переменную (а не mixin) в другом селекторе:

Это даст нам следующую ошибку:

Этого следовало ожидать, верно? Мы попытались получить доступ к переменной mixin, которая имеет локальный масштаб. Не беспокойтесь, хотя, как уже упоминалось выше, мы исправим эту проблему в следующем разделе.

Вложенные селекторы

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

Он компилируется в:

Однако рассмотрим пример ниже, где мы определяем функцию, затем используем эту функцию вместе с вложенным селектором:

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

Имена переменных

Глобальные и локальные переменные могут иметь одинаковые имена. Чтобы продемонстрировать это поведение, мы рассмотрим четвертый пример:

Здесь мы определили три разные переменные (text-color) с тем же именем. Первая - это глобальная переменная, а две другие - локальные.

Вот некоторые стили, использующие их:

И сгенерированный CSS:

Это то, что вы ожидали?

Имейте в виду, что мы не увидим эти стили, если не скомпилируем их с текущей версией Sass (3.4). Например, предположим, что мы используем Sass 3.3, наш вывод CSS будет выглядеть так:

Обратите внимание на разницу в цвете фона селектора .wrap. Это происходит потому, что в соответствии с более ранними версиями Sass (такими же для LibSass), если мы локально переопределим значение глобальной переменной (например, text-color), это будет новое (глобальное) значение переменной. Итак, в нашем примере скомпилированные стили зависят от порядка, который мы объявляем переменной и миксами.

Флаг по умолчанию (default)

Этот флаг позволяет нам установить значение переменной в случае, если оно еще не установлено или его текущее значение равно null (рассматривается как неназначенное). Чтобы лучше объяснить, как мы можем использовать его в реальном сценарии, давайте предположим, что у нас есть проект со следующей структурой:

Файл app.scss выглядит следующим образом:

Посмотрим содержимое частичных файлов.

Во-первых, файл variables.scss содержит наши переменные:

Обратите внимание на флаг default, назначенный переменной btn-bg-color.

Во-вторых, файл mixins.scss включает наши миксы:

Затем сгенерированный файл app.css будет выглядеть следующим образом:

Итак, наши кнопки имеют стили по умолчанию. Но давайте предположим, что мы хотим иметь возможность перезаписать их, применяя наши собственные значения. Чтобы сделать это, мы можем переназначить желаемые (по умолчанию) переменные в частичном файле config.scss:

Установка значения этой переменной в chocolate приведет к игнорированию соответствующего значения (lightblue), получившего флаг default. Поэтому сгенерированный CSS изменяется, как мы видим ниже:

Примечание: если мы не добавили флаг default в переменную btn-bg-color, наш CSS будет, из-за каскадной природы CSS, следующим образом:

Глобальный флаг (global)

Этот второй флаг помогает нам изменить область действия локальной переменной.

Помните ошибку, которую мы видели в нашем первом примере? Что ж, это произошло потому, что мы пытались использовать переменную btn-bg-color в селекторе .wrap. Давайте изменим наш пример, чтобы включить этот новый флаг. Вот новые стили:

Как вы можете видеть ниже, благодаря этому флагу CSS компилируется без ошибок:

Флаг global полезен, но имейте в виду, что не всегда целесообразно изменять область видимости переменной.

Проверка наличия переменной

Sass предоставляет две функции самоанализа для проверки существования переменной или нет. Мы можем использовать функции variable-exists и/или global-variable-exist, чтобы проверить, существуют ли наши локальные и/или глобальные переменные соответственно.

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

Результат:

Вывод

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.