Какие типы данных поддерживает SASS?

Sass — это язык сценариев препроцессора CSS. Здесь нам не нужно путать Sass и Scss, это одно и то же, но Sass имеет более старый синтаксис до CSS3, а после CSS3 он известен как SCSS. Как и все другие языки программирования, Sass также содержит типы данных для работы с различными типами используемых данных. Однако Sass не является стандартным языком программирования, но он состоит из типов данных. В этой статье мы рассмотрим все доступные типы данных, используемые в Sass, а также рассмотрим некоторые варианты использования. Если вы не знаете о SASS, обратитесь к статьям SASS Introduction и SASS в полной форме.
Sass содержит всего 7 типов данных:

Numbers
Booleans
Lists
Maps
Null
String
Colors

Давайте обсудим каждый тип данных по порядку.

Числа: Sass рассматривает число как целые и действительные числа вместе, во время использования он распознает, какие значения используются. Есть некоторые стандартные единицы измерения, которые используются как пиксели (единицы пикселей) или em (эфемерные единицы). Чтобы выполнить операцию с числами, мы должны убедиться, что мы используем одну и ту же единицу, иначе это вызовет некоторую ошибку.

Пример:

$len: 10;
$wid: 20.5;

.main{
    height: 10px + 10; // It is valid
    width: 20px - 5; // It is valid
}

.box0{
    height: 10px + $len; // Valid
    height: 10em + $wid; // Valid
}

.box{
    height: 10em + 10em; // It is valid
    width: 10px + 10em; // Error
}

Логические: Sass также имеет типы данных Boolean, Boolean имеет два значения, которые могут быть либо истинными, либо ложными. Для работы с логическим значением он предоставляет три основных оператора, которые известны как and или and not. Обратите внимание, что мы используем строчные буквы для операторов, потому что заглавные буквы будут рассматриваться как строки в Sass.

и: он возвращает истинные значения, если оба значения истинны, в противном случае он возвращает ложное значение.

@debug true and true; // Returns true value

или: возвращает истинное значение, если одно из обоих значений истинно или если оба значения истинны, и возвращает ложь, если оба значения ложны.

@debug true or false; // Returns true value
@debug false or false; // Returns false value

not: возвращает отрицательное значение текущего существующего значения.

@debug not true; // Returns false value
@debug not false; // Returns true value

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

Пример :

$number-list: 10, 23, 10; // Seperated by commas.
$number-list2: 10px 20px 30px; // Seperated by spaces.

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

$number-list3: 10, 20 30, 10; // Nested list.
$number-list4: 10, (20 30), 10; // Nested list same as $number-list3.

Будет еще один случай, когда список может быть пустым.

$empty-list: ();

Карты: Карты в Sass — это в основном пары ключ-значение. Эти пары должны быть разделены запятыми, и все пары должны быть заключены в круглые скобки.

$new-map: (primary: #fdfdfd, secondary: $fff, background: #f1f1f1);

Чтобы использовать Карты в Sass, мы не можем использовать их напрямую. Однако есть некоторые функции, доступные в sass, с помощью которых мы можем получить значение карт и использовать его в нужном месте. Вот некоторые функции: —

map-get
map-merge
map-keys
map-has-keys
map-remove
map-values

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

$primary-color: null;

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

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

$color: blue;
$font-family: 'Courier New', Courier, monospace;
$heading: "Welcome";

Есть еще одна вещь, которую нам нужно знать в Sass. Существует концепция интерполяции, которая используется для передачи переменной в селектор. Его синтаксис представлен как # {<переменная>}. Когда мы используем интерполяцию, строки в кавычках извлекаются из этих кавычек, как показано в примере.

$heading: "GeeksforGeeks";

h2.#{$heading} {
  color: green;
}

В приведенном ниже коде мы видим код CSS для указанного выше кода Sass, который используется для интерполяции.

h2.GeeksforGeeks {
 color: green;
}

Цвета: Sass поддерживает цвет как тип данных, поскольку он используется для определения значения цвета. Здесь мы видим те же самые цветовые выражения, которые используются в обычном CSS.

RGB (красный, зеленый, синий):

$primary: rgb(214,121,45);

RGBA (красный, зеленый, синий, альфа):

Альфа используется для прозрачности, и ее значение варьируется от 0,0 до 1,0, где 0 — полностью прозрачное, а 1,0 — полностью непрозрачное.

$color: rgba(210, 122, 54, 0.5)

HSL (оттенок, насыщенность, яркость):

Это выражение содержит несколько параметров, отличных от обычных цветов.

$color: hsl(0, 0%, 100%);

- Оттенок можно рассматривать как чистый цвет, который представлен на цветовом круге и может быть выбран значениями от 0 до 360, в которых каждое значение содержит немного разные цвета.
- Насыщенность применяет оттенок к цвету по мере увеличения его значения в процентах. При 0% цвет выглядит размытым, а по мере увеличения значения цвет приобретает чистейшую форму.
- Светлота применяет к цвету светлые слои. Его значение варьируется от 0 до 100%, при 0 он делает цвет полностью темным, а при 100% полностью белым.
- HSLA (оттенок, насыщенность, яркость, альфа):