Типы данных в Sass

Дата публикации: 2016-05-06

Типы данных в Sass

От автора: почти во всех языках программирования есть типы данных, и Sass не исключение. Тип данных – это способ классификации данных по определенным категориям для различных целей. К примеру, 2 – это тип number, а SitePoint – тип string. В этой статье я расскажу вам про все семь типов данных в Sass, а также покажу пример использования каждого типа данных.

Null

Null – самый базовый из всех типов данных в Sass. Это не true и не false, данный тип просто означает пустоту. Значения у данного типа данных нет. Вам нужно лишь знать, что любая неправильная запись «null», даже если всего одна буква записана не в том регистре, уже не является null. А значит, ни NULL ни Null не являются типом данных null. Это уже будут строки.

Хотя null и означает пустоту, если пропустить его через функцию length(..), на выходе получится 1, так как сама переменная существует, а null сам по себе является показателем отсутствия значения. Переменную типа null нельзя присоединить с помощью конкатенации к строкам. Запись ‘text’ + null будет неправильной и вызовет ошибку.

Булев тип данных

Тип данных с двумя возможными значениями, true и false. В Sass только два значения оцениваются как false: собственно, сам false и null. Все остальное возвращает true. Рассмотрим код ниже:

$i-am-true: true;
$a-number: 2;

body {
  @if not $i-am-true {
    background: rgba(255, 0, 0, 0.6);
  } @else {
    background: rgba(0, 0, 255, 0.6); // expected
  }
}

.warn {
  @if not $a-number {
    color: white;
    font-weight: bold;
    font-size: 1.5em;
  } @else {
    display: none; // expected
  }
}

$i-am-true: true;

$a-number: 2;

body {

@if not $i-am-true {

background: rgba(255, 0, 0, 0.6);

} @else {

background: rgba(0, 0, 255, 0.6); // expected

}

.warn {

@if not $a-number {

color: white;

font-weight: bold;

font-size: 1.5em;

} @else {

display: none; // expected

}

В коде я задал две переменные $i-am-true и $a-number. Перед пояснением кода скажу, что оператор not в Sass эквивалентен оператору ! в других языках. А следовательно, условие @if not $i-am-true – то же самое, что if (!$i-am-true), и оно будет равно false, так как $i-am-true – true. Результат можно посмотреть в демо ниже.

Как я сказал выше, все кроме false и null оценивается как true. Т.е. переменная $a-number будет true. Поэтому параграф с классом warn не будет показываться. В демо ниже видно, что так оно и есть.

Числовой тип данных Number

Числа в CSS используются повсюду. Большей частью они записаны с различными единицами измерения, но технически это все еще числа. Ну и естественно в Sass тоже есть тип данных numbers. С числами можно проводить простые математические операции. Стоит помнить лишь, что операции можно проводить над числами с совместимыми единицами измерения. К примеру:

$size: 18;                  // Число
$px-unit: $size * 1px;      // Пиксели
$px-string: $size + px;     // Строка
$px-number: $px-unit / 1px; // Число

$size: 18; // Число

$px-unit: $size * 1px; // Пиксели

$px-string: $size + px; // Строка

$px-number: $px-unit / 1px; // Число

У нас есть 4 переменные. $size – обычное число. $px-unit – результат умножения $size на 1px, при этом тип данных теперь пиксели. В переменной $px-string записано значение 18px, но это не число, это строка. Сама по себе запись px воспринимается как строка, а результатом сложения строки и числа будет строка. Значение переменной $px-number получено путем деления $px-unit на 1px, что превращает эту переменную в простое число. Взгляните на код ниже, я использовал эти переменные в стилях кнопки:

.button {
   background: rgba(255, 0, 0, $px-number * 3 / 100);
   padding: $px-unit / 2;
   border-radius: $px-string * 3; // throws error
   margin-top: $px-number * 2px;
}

.button {

background: rgba(255, 0, 0, $px-number * 3 / 100);

padding: $px-unit / 2;

border-radius: $px-string * 3; // throws error

margin-top: $px-number * 2px;

}

Свойству background задано значение rgba(255, 0, 0, 0.54). Свойство padding также будет нормально работать. А вот свойство border-radius выкинет ошибку, так как нельзя умножить строку на число. В демо ниже я стилизовал несколько элементов на основе данных значений.

Строки

С помощью строк в CSS задаются различные стили шрифтов, а также другие свойства. Sass, как и CSS, принимает как строки в кавычках, так и без кавычек, даже если в них есть пробелы. Стоит помнить лишь, что строки со специальными символами могут выдавать ошибки. К примеру:

$website: 'SitePoint'; // значение SitePoint

$name: 'Gajendar' + ' Singh'; 
// 'Gajendar Singh'

$date:  'Month/Year : ' + 3/2016;
// 'Month/Year : 3/2016'

$date:  'Month/Year : ' + (3/2016);
// 'Month/Year : 0.00149' 
// Так как 3/2016 вычисляется в первую очередь.

$variable: 3/2016;      // равно 0.00149
$just-string: '3/2016'; // '3/2016'

$website: 'SitePoint'; // значение SitePoint

$name: 'Gajendar' + ' Singh';

// 'Gajendar Singh'

$date: 'Month/Year : ' + 3/2016;

// 'Month/Year : 3/2016'

$date: 'Month/Year : ' + (3/2016);

// 'Month/Year : 0.00149'

// Так как 3/2016 вычисляется в первую очередь.

$variable: 3/2016; // равно 0.00149

$just-string: '3/2016'; // '3/2016'

В переменной $name ничего необычного, там хранится обычная строка. Интереснее второе выражение – значение 3/2016 не вычислилось, но распозналось как строка. Т.е. строки можно легко присоединять к другим типам данных, кроме null.

В третьем выражении переменная вычисляется как обычно, так как там всего одна строка. А если нет конкатенации, значит, переменная будет сразу вычислена. Если нужно объявить запись 3/2016 строкой, используйте кавычки, как в последнем выражении.

Также стоит сказать, если вам необходимо использовать переменную внутри строки, вам придется воспользоваться «интерполяцией переменных». А если проще, вам нужно будет завернуть переменные в #{}. Пример:

$name: 'Gajendar';
$author: 'Author : $name'; // 'Author : $name'

$author: 'Author : #{$name}';
// 'Author : Gajendar'

$name: 'Gajendar';

$author: 'Author : $name'; // 'Author : $name'

$author: 'Author : #{$name}';

// 'Author : Gajendar'

Метод интерполяции может пригодиться, если значение переменной зависит от условия. Демо:

Цвета

Цвета в CSS подпадают под тип данных color. Цвета можно задавать в шестнадцатеричной системе счисления rgb, rgba, hsl и hsla или можно использовать ключевые слова типа pink, blue и т.д. Sass делает использование цветов более эффективным. К примеру, в Sass можно хранить значения цветов! Рассмотрим манипуляции с цветом в Sass:

$color: yellowgreen;           // #9ACD32
color: lighten($color, 15%);    // #b8dc70
color: darken($color, 15%);     // #6c9023
color: saturate($color, 15%);   // #a1e01f
color: desaturate($color, 15%); // #93ba45
color: (green + red);           // #ff8000

$color: yellowgreen; // #9ACD32

color: lighten($color, 15%); // #b8dc70

color: darken($color, 15%); // #6c9023

color: saturate($color, 15%); // #a1e01f

color: desaturate($color, 15%); // #93ba45

color: (green + red); // #ff8000

Если вам интересно, как Sass складывает цвета, то я сейчас объясню. Перед сложением цветов Sass разделяет все цветовые каналы и складывает их по отдельности. Т.е. если сложить красный со значением #ff0000 и зеленый со значением #008000, мы получим цвет #ff8000. Также стоит знать, что с помощью данного метода нельзя складывать цвета с разными значениями прозрачности.

Назначение всех остальных функций можно угадать по их названиям. Функция Lighten осветляет цвет до заданного значения и т.д. В codepen демо представлены все функции:

Списки

Если вы знакомы с массивами, то быстро поймете, как работают списки. Списки – аналог массивов в Sass. Они могут хранить ноль, одно или несколько значений, а также другие списки. Чтобы создать список со значениями разных типов, значения необходимо отделить при помощи разделителя – пробел или запятая. Взгляните на код ниже:

$font-list: 'Raleway','Dosis','Lato';
// Элементы разделены тремя запятыми
			
$pad-list: 10px 8px 12px;
// Элементы разделены тремя пробелами

$multi-list: 'Roboto',15px 1.3em;
// Многомерный список с двумя списками внутри.

$font-list: 'Raleway','Dosis','Lato';

// Элементы разделены тремя запятыми

$pad-list: 10px 8px 12px;

// Элементы разделены тремя пробелами

$multi-list: 'Roboto',15px 1.3em;

// Многомерный список с двумя списками внутри.

В списке можно хранить несколько типов значений. В первых двух списках хранятся по 3 элемента. В последнем списке всего два элемента, разделенных запятой. Первый элемент – строка ‘Roboto’, второй элемент – еще один список из двух элементов, разделенных пробелом. Т.е. Разные разделители в одном списке создают вложенные списки. Списки крайне полезны в циклах, что наглядно показывает демо ниже:

Для получения элемента списка я использовал функцию nth($list, $n). По ссылке вы найдете еще больше полезных функций.

Таблицы

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

$styling: (
  'font-family': 'Lato',
  'font-size': 1.5em,
  'color': tomato,
  'background': black
);

h1 {
  color: map-get($styling, 'color');
  background: map-get($styling, 'background');
}

$styling: (

'font-family': 'Lato',

'font-size': 1.5em,

'color': tomato,

'background': black

);

h1 {

color: map-get($styling, 'color');

background: map-get($styling, 'background');

}

В коде выше мы создали таблицу $styling, в которой хранятся пары ключ/значение для разных свойств CSS. Для работы с таблицами были созданы различные функции. Я использовал одну из таких функций map-get. Она принимает два параметра, саму таблицу и ключ значения, которое необходимо вытянуть. Я использовал эту функцию для стилизации заголовка первого уровня h1.

Для получения доступа ко всем парам таблицу можно прогнать через цикл. В демо ниже показано, как это сделать:

Заключение

Сами по себе типы данных в Sass могут казаться не такими и нужными, однако при правильном использовании и в сочетании с другими возможностями Sass они могут творить чудеса. Таблицы и списки – самые сложные типы данных в Sass. Поэтому я решил написать побольше уроков о том, как с ними работать.

Автор: Gajendar Singh

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Метки: sass