Переменные языка SASS

В языке SASS переменные должны начинаться со знаками доллара ("$"). Двоеточие после переменной означает присваивание переменной какого-то значения, в выходном CSS-е это не будет отображено. Если после переменной нет двоеточия, то это говорит препроцессору заменить в выходном CSS-е переменную ее значением.

На видимость переменных влияет уровень вложенности селекторов. Если переменная определена вне каких-либо вложенных селекторов, она видна везде. Переменная может быть определена с !global (использование !global это плохая практика усложняющая поддержку проекта), и в этом случае она также будет видна везде. Например:

В языке sass имена переменных и все другие идентификаторы, как дефисы, так и нижнее подчеркивание являются взаимозаменяемыми. Например, если вы определяете переменную $main-width, вы можете получить доступ к ней, как $main_width, и наоборот.

Типы данных языка SASS

В языке sass поддерживается семь основных типов переменных:

1. 1 numbers - числовый тип, включает в себя все цифровые обозначения которые встречаются в CSS. Данный тип может быть представлен в px, %, em, rem.

   Примеры данного типа: 1.2, 3, 10px;

2. 2 strings - текстовый тип с кавычками и без "foo", 'foo', foo;
3. 3 colors - цветовой тип. Включает в себя зарезервированные слова обозначающие цвет (blue, red и тд), шестнадцатиричное обозначение цвета (#04a3f9), обозначение цвета в формате rgb (rgba(255, 0, 0, 0.5));
4. 4 booleans - логический тип (true, false). Данный тип тспользуется вкупе с управляющей конструкцией @if.
5. 5 nulls - не определенная переменная. Данный тип практически не используется. В объектно-ориентированном программировании он нужен для того, чтобы ввести переменную, а после в каком-либо классе задавать (правильнее менять) ее тип. Подразумевается, что в разных классах тип данной переменной будет разным. Через nulls ее просто вводят. В sass-е я ни разу не видел, чтобы это использовалось. При интерполяции переменная которая имеет значение nulls не будет выведена, насколько это полезно решайте сами.
6. 6 lists - списки значений, разделенных пробелами или запятыми - данный тип как правило используется для задания семейства шрифтов. Возможно для задания значений в margin-ах или padding-ах, но это редко, для этого используется тип numbers.

   Примеры данного типа: 1.5em 1em 0 2em, Helvetica, Arial, sans-serif.

7. 7 maps - карты от одного значения к другому. Данный тип по сути очень похож на объект в javascript.

   Пример данного типа: (key1: value1, key2: value2).

Числовой тип языка SASS (numbers)

Как видно из названия данного типа, это любые числа которые встречаются в CSS-e. Числа - это единицы измерения, и данный тип служит для определения единиц измерения. Это px, %, em, rem. Перед выводом данного типа в выходной CSS, сначало выполняются математические действия (+, -, *, /), и в выходной CSS выводится уже готовый результат. Строчка margin: 14px (20px+30px)/2px-5px будет преобразована в margin: 14px 20px. Любое из этих чисел можно вынести в переменную, результат будет тем же.

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

Впринципе это логично, эта часть кода у большинства разработчиков кочует от проекта в проект. Она одинаковая, меняется только основной цвет текста, размер и семейство шрифта. Если подумать, то удобнее переменные $fontSize, $fontFamily, $mainColor вынести в отдельный файл, открыл его, быстро поправил переменные, и все хорошо. Так вот, при компиляции данная конструкция работать не будет. Смотрите, у нас переменная $fontSize измеряется в px, а межстрочный интервал измеряется в процентах. / - в языке sass означает знак деления, а разделить "px" на проценты не возможно, как следствие компилятор выдаст ошибку. Для того, чтобы обойти выполнение арифметических операций и подставить значение переменных в выходной CSS делают так:

В языке SASS это называется интеполяция, она применяется для числовых и цветовых переменных. Это нужно для того, чтобы компилятор не выполнял математические операции, а подставил значение переменной в выходной CSS. Как видно в примере переменная оборачивается в фигурные скобки ({}) и перед ней ставится знак #.

Текстовый тип языка SASS (strings)

Текстовый тип - это почти все значения свойств которые встречаются в CSS-е. На практике, в большинстве случаев это семейство шрифтов (если указали одно название, без запятых), пути к картинкам в background-е. Что-то другое выносить в переменные особого смысла нет.

В CSS-е название шрифта которое содержит пробелы должно быть обернуто в кавычки, к примеру: "Courier New" или "Century Schoolbook L". В кавычки также может быть обернут и адрес к картинке в background-е. Большая часть свойств CSS пишется без кавычек, к примеру, если речь идет о шрифтах, то Tahoma, sans-serif пишутся без кавычек. Если отвлечься от шрифтов, то значение bold свойства font-weight, или значение italic свойства font-style тоже пишутся без кавычек. Если вы переменной присваиваете значение в кавычках, то и в выходном CSS-е значение этой переменной выведется с кавычками, а если без кавычек, то это значение выведется тоже без кавычек.

Если мы хотим занести значения свойств в переменные, то тип этих переменных будет текстовый (strings). На практике вам предстоит работать или с числовым типом, или задавать семейство шрифтов через тип lists. Строковый тип редко применяется. Для того, чтобы вывести строку в миксине делается так:

Для данного типа возможно применить сложение. Во многих языках программирования это называется конкатенация строк. Как я выше писал, данный тип применяется достаточно редко, но все же применяется. Пример:

Пример выше показывает стандартную заготовку для сайта, а вернее отдельный ее кусок. Переменные стоит вынести в отдельный файл, как я выше писал так удобнее работать. В данной зоготовки используются все типа переменных, с которыми вы будете в основном работать. К текстовому типу переменных относятся переменные - $fontStyle, $fontWeight:, $afterLinkT. Цветовой тип переменной это переменная $mainColor. Числовой тип переменных это перменные $fontSize, $fontLH. К списку значений, разделенных пробелами или запятыми относится переменная $fontFamily.

Цветовой тип языка SASS (colors)

В CSS цвета могут быть выведены в шестнадцатиричном формате, формате rgb (в том числе rgba). Так же для цветов зарезервированы слова (это red, blue и тд). Для данного типа доступны все арифметические операции, можно даже умножать данный тип на число, но есть одно но....

Как известно в web-е используется модель rgb. Перед выполнением математической операции сначало произойдет разложение цвета на эту модель, а потом будет выполнено математическое действие. Проще это увидеть на примере:

Почему так происходит? Давайте возьмем к примеру первое число, это у нас #010203. Красная составляющая данного цвета 01, зеленая составляющая это 02, синяя составляющая это 03. Если также разложить второе число, а это у нас #040506, то красная составляющая это 04, зеленая составляющая это 05, а синяя составляющая это 06. Соответственно сложение произойдет по красной (01+02), зеленой (02+05) и синей составляющей (03+06), в резудьтате получим #050709. Посмотрите следующий пример:

В данном примере произошло тоже самое, сперва на цветовые составляющие было разложено первое число, затем второе, и произошло сложение по цветовым составляющим.

Как я выше писал для данного типа зарезервированы слова. Для нас это означает, что возможна и такая запись:

Сперва произошло разложение первого числа на цветовые составляющие, а затем на цветовые составляющие было разложено второе число, поскольку слову red соответствует форма записи #ff0000, red было заменено этим значением. Посмотрите следующий пример:

Рузультат вывода зависит от компилятора которым вы пользуетесь, если вы установили компилятор по моим советам, то вы пользуетесь компилятором gulp-sass. Gulp-sass будет стараться сжимать выходные значения. Вывод значения в формате rgb занимает больше места чем вывод в шeстнадцатиричном формате, поэтому выходное значение будет выведено в шестнадцатиричном формате, даже если складываются два значения в формате rgb. Если посмотреть на пример выше, то по зеленой и синей составляющей у нас получаются нули, а по красной составляющей выходит 255, в итоге получаем rgb(255, 0, 0), по сути это соответствует красному цвету. Компилятор gulp-sass выведет просто red, так как red пишется короче. Зарезервированное для цвета слово blanchedalmond компилятор выведет как #FFEBCD, так как это короче.

Во многих языках программирования для каждой переменной зарезервировано определенное количество символов. Так вот, цветовой тип переменной языка sass, если разложить его на цветовые составляющие не может быть более 255 для формата rgb, и не может быть больше #fff для шестнадцатиричного формата.

В примере выше красная составляющая для первого цвета составляет 200, красная составляющая для второго цвета составляет 100, при сложении получается 300. Но максимальный объем для формата rgb не может быть больше 255, происходит переполнение, и на выходе получаем rgb(255, 0, 0) или просто red.

Есть еще один формат для цветового типа, это формат rgba. Он стоит особняком по сравнению с другими форматами. В sass нельзя сложить два числа с разными альфа каналами. Посмотрите пример:

Как мы видим сложение по альфаканалам не произошло. Более того, если мы попытаемся к чмслу в формате rgba добавить шестнадцатиричное число, или число в формате rgb, то мы получим ошибку.

Cписки значений, разделенных пробелами или запятыми языка SASS (lists)

Как следует из названия данного типа, к нему относятся все значения разделенные пробелами или запятыми. К примеру, это может быть значения padding-а - 15px 0 или значение font-face - Arial, "Helvetica CY", "Nimbus Sans L", sans-serif.

Для работы с данным типом в языке sass существует множество функций. Списки можно соединять, можно добавлять отдельные элементы в списки. Все это можно делать, но я этого делать не советую. Не стоит усложнять.

Тип lists может быть как простым, так и составным. Простой тип lists это 10px 20px, составной тип lists это 10px 20px, 30px 40px. Составные списки могут состоять из 2, 3 и более списков. Для того, чтобы понять где начинается первый, или второй элемент списка официальная документация по языку sass советует группировать их следующим образом: (10px 20px) (30px 40px). После компиляции в выходной CSS компилятор не добавит скобки.

Тип lists может не иметь никаких пунктов вообще, иначе говоря быть пустым. Такой тип lists представлен как () (это как тип map который не имеет значений, о типе map будет написано ниже). Пустой тип lists при компиляции не будет выведен в выходной CSS. такая запись вызовет ошибку компиляции: padding: (). Если же вы используете составные списки, и один из элементов составного списка пустой, то он не будет выведен в выходном CSS.

От себя могу сказать, что с тип lists в большинстве случаев используется для задания font-family. Каким может быть тип lists знать нужно, нужно знать методы которые к нему применяются, но на практике вы будете использовать его только для задания font-family. Для margin и padding лучше использовать числовые переменные, они понятнее и ими проще манипулировать.

Карты от одного значения к другому языка SASS (maps)

Тип maps очень похож на объекты в javascript. Данный тип представляет собой набор ключей и значений. В качетве значения может быть использован любой тип переменных языка sass. Обычно для вывода типа maps используют управляющую конструкцию @each, хотя есть и другие методы которые с ним работают. Без использования этих методов вывести значение ключей данного типа не получится.

Не трудно догадаться, что в последнем примере будут выведены заголовки от h1 до h2 с заданными размерами шрифтов.