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

() translation by (you can also view the original English article)

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

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

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

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

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

1	$bg-color: green;

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

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

1	@mixin button-style {
2	$btn-bg-color: lightblue;
3	color: $btn-bg-color;
4	}

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

1	button {
2	@include button-style;
3	}

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

1	button {
2	color: lightblue;
3	}

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

1	.wrap {
2	background: $btn-bg-color;
3	}

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

1	Undefined variable: "$btn-bg-color".

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

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

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

.wrap {
    $bg-color: red;
    
    &:after {
        background: lighten($bg-color, 10%);
    }
}
    

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

1	.wrap:after {
2	background: #ff3333;
3	}

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

@function my-function() {
    $text-color: black;
    @return $text-color;
}
    
.wrap {
    color: my-function();
    
    &:after{
        background: $text-color;
    }
}

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

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

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

$text-color: tomato;

@mixin button-style {
    $text-color: lime;
    color: $text-color;
}
    
@mixin link-style {
    $text-color: black;
    color: $text-color;
}

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

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

button {
    @include button-style;
}
     
a {
    @include link-style;
}
     
.wrap {
    background: $text-color;
}

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

button {
    color: lime;
}
    
a {
    color: black;
}
    
.wrap {
    background: tomato;
}

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

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

button {
    color: lime;
}
    
a {
    color: black;
}
    
.wrap {
    background: black;
}

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

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

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

Project-Name/
    ├── ...
    ├── css/
    │   └── app.css
    └── scss/
        ├── _config.scss
        ├── _variables.scss
        ├── _mixins.scss
        └── app.scss

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

@import "config";
@import "variables";
@import "mixins";
    
button {
    @include button-style;
}

// more styles

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

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

1	$btn-bg-color: lightblue !default;
2	$btn-bg-color-hover: darken($btn-bg-color, 5%);
3
4	// more variables

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

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

@mixin button-style ($bg-color: $btn-bg-color, $bg-color-hover: $btn-bg-color-hover) {
    background-color: $bg-color;
    // more styles
      
    &:hover {
        background-color: $bg-color-hover;
        // more styles	
    }
}
    
// more mixins

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

button {
    color: lightblue;
}
    
button:hover {
    background-color: #99cfe0;
}

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

1	$btn-bg-color: chocolate;
2
3	// more variables

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

button {
    color: chocolate;
}
    
button:hover {
    background-color: #bc5e1b;
}

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

button {
    color: lightblue;
}
    
// hover styles

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

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

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

@mixin button-style {
    $btn-bg-color: lightblue !global;
    color: $btn-bg-color;
}
    
button {
    @include button-style;
}
    
.wrap {
    background: $btn-bg-color;
}

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

button {
    color: lightblue;
}
    
.wrap {
    background: lightblue;
}

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

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

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

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

$google-font: "http://fonts.googleapis.com/css?family=Alegreya";
    
@if(global-variable-exists(google-font)) {
    @import url($google-font);
}

Результат:

1	@import url("http://fonts.googleapis.com/css?family=Alegreya");

Вывод

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