Основы Sass: Операторы
HTML&CSS

Основы Sass: Операторы

Оригинал: Sass Basics: Operators, George Martsoukos

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

Обратите внимание: примеры в данной статье реализованы для Ruby Sass. Я рекомендую взглянуть на статью, где обсуждаются вопросы совместимости движков Sass.

Оператор присваивания

Sass использует двоеточие (:) для присваивания значения переменной. Например:


$main-color: lightgray;

Арифметические операторы

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

Список арифметических операторов, которые поддерживает Sass:

ОператорОписание
+Сложение
-Вычитание
*Умножение
/Деление
%Остаток от деления

Как мы увидим в следующем разделе, оператор сложения (+) также может использоваться для конкатенации строк.

Обратите внимание, что арифметические операторы работают только для значений в совместимых единицах измерения:


h2 {
    font-size: 5px + 2em; // несовместимые единицы измерения

    font-size: 5px + 2; // 7px
}

Кроме того, умножение двух значений в одной и той же единице измерения будет скомпилировано в некорректный CSS:


h2 {
    font-size: 5px * 2px; // invalid CSS
}

Символ / используется в сокращенной записи свойств в CSS. Например:


font: 16px / 24px Arial sans-serif;

background: url("http://example.com") no-repeat fixed center / cover;

А Sass использует этот символ (/) для опреации деления. Рассмотрим, как Sass понимает этот символ:


h2 {
    // Выведется в CSS
    font-size: 16px / 24px


    // Используются круглые скобки, произведет деление
    font-size: (16px / 24px)

    // Используется интерполяция, выведется в CSS
    font-size: #{$base-size} / #{$line-height};


    // Используются переменные, произведет деление
    font-size: $base-size / $line-height


    // Используется функция, произведет деление
    opacity: random(4) / 5;

    // Используются арифметические выражения, произведет деление
    padding-right: 2px / 4px + 3px
}

В Sass учитывается приоритет операций:

  • Выражения в скобках вычисляются в первую очередь
  • Умножение (*) и деление (/) имеют больший приоритет, чем сложение (+) и вычитание (-).

Рассмотрим пример:


h2 {
    width: 3px * 5 + 5px; // 20px

    width: 3 * (5px + 5px); // 30px

    width: 3px + (6px / 2) * 3; // 12px
}

Операторы равенства

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

Sass поддерживает следующие операторы равенства:

ОператорОписание
==Равно
!=Не равно

Они поддерживаются для любых типов.

Давайте взглянем на два примера.

В первом примере мы используем оператор ==, чтобы проверить тип переменной $font и вывести соответствующее сообщение:


@mixin font-fl($font){
    &:after {
        @if(type-of($font) == string) {
            content: 'My font is: #{$font}.';
        } @else {
            content: 'Sorry, the argument #{$font} is a #{type-of($font)}.';
        }
    }
}

h2{
    @include font-fl(sans-serif);
}

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


h2:after {
    content: 'My font is: sans-serif.';
}

Во втором примере мы зададим список цветов и проверим длину каждого элемента в нем. Используя оператор получения остатка от деления (%), находим элемент нечетной длины и задаем этот цвет элементу h2:


$list: "tomato", "lime", "lightblue";

@mixin fg-color($property) {
    @each $item in $list {
        $color-length: str-length($item);
        @if( $color-length % 2 != 0 ) {
            #{$property}: unquote($item);
        }
    }
}

h2 {
    @include fg-color(color);
}

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


h2 {
    color: lightblue;
}

Стоит отметить, что Sass не поддерживает оператор строгого равенства (===), который вы найдете в других языках программирования. Тем не менее, как вы увидите в следующем примере, Sass обрабатывает оператор равенства таким же образом, как другие языки обрабатывать оператор строгого равенства.


// сравнение в Javascript
("5" == 5) // вернет true

("5" === 5) // вернет false

// сравнение в Sass
("5" == 5) // вернет false

(20px == 20) // вернет true (не работает в LibSass)

Операторы сравнения

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

Sass поддерживает следующие операторы сравнения:

ОператорОписание
>Больше
>=Больше либо равно
<Меньше
<=Меньше либо равно

Пример:


$padding: 50px;

h2 {
    @if($padding <= 20px) {
        padding: $padding;
    } @else {
        padding: $padding / 2;
    }
}

Скомпилированный CSS:


h2 {
    padding: 25px;
}

Логические операторы

Логические операторы позволяют проверить несколько условий в условном выражении.

Sass поддерживает следующие логические операторы:

ОператорУсловияОписание
andx and yИстина, если оба выражения истинны
orx or yИстина, если x или y истинно
notxИстина, если x ложно

Рассмотрим их на примере.

Определим список, который будет содержать состояния кнопки в качестве ключей и соответствующие цвета в качестве значений. Затем зададим условия для оценки его длины. Если все условия верны, элементу .btn добавим свойство background-color. Ниже показан код Sass для этого примера:


$list-map: (success: lightgreen, alert: tomato, info: lightblue);

@mixin button-state($btn-state) {
    @if (length($list-map) > 2 or length($list-map) < 5) {
        background-color: map-get($list-map, $btn-state);
    }
}

.btn {
    @include button-state(success);
}

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


.btn {
    background-color: lightgreen;
}

Как мы видим, логическое выражение возвращает true, поскольку обы условия, использованные в выражении (length($list-map) > 2 — length($list-map) < 5) истинны.

Обратите внимание на различия:


@if (length($list-map) > 2 or not (length($list-map) == 3)) {...} // returns true, applies background-color

@if (length($list-map) > 2 and not (length($list-map) == 3)) {...} // returns false, doesn't apply background-color

Строковые операторы

Как мы уже говорили, оператор сложения (+) предоставляет нам возможность конкатенации строк.

Вот основные правила:

  • Если сложить строку в кавычках (ту, что перед оператором +) cо строкой без кавычек, в результате получим строку в кавычках.
  • Если сложить строку без кавычек со строкой в кавычках, то получим строку без кавычек.

Рассмотрим следующий пример. Код Sass приведен ниже:


@mixin string-concat {
    &:after {
        content: "My favorite language is " + Sass;
        font: Arial + " sans-serif";
    }
}

h2 {
    @include string-concat;
}

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


h2:after {
    content: "My favorite language is Sass";
    font: Arial sans-serif;
}

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


@mixin string-concat ($language) {
    &:after {
        content: "My favorite language is #{$language}";

        // second way without using interpolation
        //content: "My favorite language is " + $language;
    }
}

h2 {
    @include string-concat(Sass);
}

Результирующий CSS:


h2:after {
    content: "My favorite language is Sass";
}

Операторы для работы с цветом

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

Давайте посмотрим как:


h2 {
    color: #468499 + #204479;
}

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


h2 {
    color: #66c8ff;
}

Как работают операции с цветом? Sass производит вычисления парами, т.е.:


46+20=66 (red color), 84+44=c8 (green color), and 99+79=ff (blue color).

Шестнадцатеричные значения представляют собой сочетания красного, зеленого и синего цветов.

Рассмотрим последний пример. Единственное отличие от предыдущего в том, что здесь мы используем rgba представление цвета.


h2 {
    color: rgba(70, 132, 153, 1) + rgba(32, 68, 121, 1);

    // ошибка, значения альфа-канала должны совпадать
    color: rgba(70, 132, 153, .9) + rgba(32, 68, 121, .7);
}

Обратите внимание, что при использовании в выражении rgba или hsla представлений, значения альфа-канала должны совпадать. В противном случае, Sass выдаст сообщение об ошибке.

Заключение

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

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться