Sass довольно популярен и, как правило, является важным инструментом для каждого фронт-энда разработчика. Sitepoint уже опубликовал несколько вводных статей об этом языке препроцессора CSS.
В этой статье мы продолжим изучение Sass, углубившись в его работу.
Примечание: примеры будут основаны на Ruby Sass. Я также предлагаю вам взглянуть на статью Хьюго , в которой обсуждается Sass-совместимость.
Оператор присваивания
Sass использует оператор двоеточия (:) для определения переменной. Например:
$main-color: lightgray;
Арифметические Операторы
Арифметические операторы используются для выполнения стандартных арифметических операций.
Вот арифметические операторы, которые поддерживает Sass:
| оператор | Описание |
|---|---|
| + | прибавление |
| — | Вычитание |
| * | умножение |
| / | разделение |
| % | остаток |
Как мы увидим в следующем разделе, оператор сложения (+) также может быть использован для объединения строк.
Обратите внимание, что операторы выше работают только для номеров с совместимыми единицами:
h2 { font-size: 5px + 2em; // error incompatible units 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 { font-size: 16px / 24px // Outputs as CSS font-size: (16px / 24px) // Uses parentheses, does division font-size: #{$base-size} / #{$line-height}; // Uses interpolation, outputs as CSS font-size: $base-size / $line-height // Uses variables, does division opacity: random(4) / 5; // Uses a function, does division padding-right: 2px / 4px + 3px // Uses an arithmetic expression, does division }
Sass заботится о порядке операций (приоритет оператора). Например, вот некоторые общие правила:
- Выражения в скобках оцениваются в первую очередь.
- Операторы умножения (
*) и деления (/) имеют более высокий приоритет по сравнению с операторами сложения (+) и вычитания (-).
Пример их показан ниже:
h2 { width: 3px * 5 + 5px; // 20px width: 3 * (5px + 5px); // 30px width: 3px + (6px / 2) * 3; // 12px }
Операторы равенства
Операторы равенства используются в условных выражениях, чтобы проверить, являются ли два значения одинаковыми или нет. На основании их оценки они возвращают Boolean значение.
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.'; }
Во втором примере мы определяем список и проверяем длину его элементов. Используя оператор модуля (остаток) ( % ), мы оцениваем их длину и, наконец, устанавливаем свойство color элемента 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 обрабатывает оператор равенства так же, как другие языки обрабатывают оператор строгого равенства.
// comparison in Javascript ("5" == 5) // returns true ("5" === 5) // returns false // comparison in Sass ("5" == 5) // returns false (20px == 20) // returns true (this does not work in LibSass)
Операторы сравнения
Подобно операторам равенства, операторы сравнения используются для сравнения чисел.
Sass поддерживает следующие операторы сравнения:
| оператор | Описание |
|---|---|
| > | Больше чем |
| > = | Больше или равно |
| Меньше, чем | |
| Меньше или равно |
Вот простой пример:
$padding: 50px; h2 { @if($padding <= 20px) { padding: $padding; } @else { padding: $padding / 2; } }
И скомпилированный CSS:
h2 { padding: 25px; }
Логические Операторы
Логические операторы позволяют нам тестировать несколько условий в условном выражении.
Sass поддерживает следующие логические операторы:
| оператор | условия | Описание |
|---|---|---|
| и | х и у | true если x и y true |
| или | х или у | true если x или y true |
| не | Икс | true если х не true |
Давайте объясним их на примере.
Мы определяем карту списка, которая содержит состояния кнопок в качестве ключей и соответствующие цвета в качестве значений. Затем мы создаем условие для оценки его длины. Если все условие имеет значение true , мы применяем background-color к элементу h2 . Ниже приведен наш исходный код 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 . Это происходит потому, что длина карты равна 3 и, следовательно, вложенные условия ( length($list-map) > 2 — length($list-map) ) return true .
Обратите внимание на различия, если мы изменим выражение:
@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
Строковые операции
Как мы уже обсуждали, оператор сложения ( + ) предоставляет нам способ объединения строк.
Вот основные правила:
- Если мы добавим строку в кавычках (это сказано перед оператором
+) в строку без кавычек, результатом будет строка в кавычках. - Если мы добавим строку без кавычек (это сказано перед оператором
+) в строку в кавычках, результатом будет строка без кавычек.
Чтобы продемонстрировать это, мы рассмотрим следующий пример. Наш код 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"; }
Операции с цветом
Во втором разделе мы проанализировали арифметические операторы. Одна интересная вещь заключается в том, что мы также можем использовать их для получения значений цвета.
Давайте посмотрим.
Вот наш код Sass:
h2 { color: #468499 + #204479; }
И сгенерированный CSS:
h2 { color: #66c8ff; }
Итак, как работают эти цветовые операции? Sass выполняет соответствующий расчет по парам. Это значит:
46+20=66 (red color) , 84+44=c8 (green color) и 99+79=ff (blue color) .
Помните, что шестнадцатеричные значения представляют собой комбинацию красного, зеленого и синего цветов. Кроме того, для их представления используются цифры 0-9 и буквы AF.
Ниже приведен наш последний пример. Единственное отличие от предыдущего состоит в том, что теперь мы используем функцию rgba для представления цветов.
Наш Sass:
h2 { color: rgba(70, 132, 153, 1) + rgba(32, 68, 121, 1); // error alpha channels must be equal color: rgba(70, 132, 153, .9) + rgba(32, 68, 121, .7); }
Обратите внимание, что при использовании цветовых функций rgba или hsla цвета должны иметь одинаковое альфа-значение. В противном случае Sass выдаст ошибку.
Вывод
В этой статье я объяснил операторы Sass. Как вы видели, некоторые из них похожи на операторы, поддерживаемые другими языками программирования. Надеюсь, эта статья помогла вам улучшить свои навыки в этом удивительном языке. И последнее, но не менее важное: на этой странице Sassmeister вы найдете все примеры статей .