Статьи

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

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

Значение NULL

null Это не truefalse Это не имеет никакого значения вообще. Одна вещь, о которой вы должны знать, это то, что любой вариант nullnull Это означает, что ни NULLNullnull Они оба строки.

Даже если nulllength(..) Это потому, что null Кроме того, вы не можете объединить null По этой причине 'text' + null

Булевы

Этот тип данных имеет только два возможных значения: truefalse В Sass только два значения оцениваются как falsefalsenull Все остальное возвращается 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$a-number Прежде чем объяснить код дальше, я должен упомянуть, что оператор not! оператор присутствует на других языках. Следовательно, условие @if not $i-am-trueif (!$i-am-true)$i-am-truetrue Это приводит к синему фону.

Как я упоминал ранее, все, кроме falsenulltrue Это означает, что переменная $a-numbertrue Поэтому абзац с warn Как вы можете видеть в демонстрации ниже, это действительно так.

номер

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

Следует иметь в виду, что эти операции действительны только для номеров с совместимыми единицами. Например:

 $size: 18;                  // A number
$px-unit: $size * 1px;      // A pixel measurement
$px-string: $size + px;     // A string
$px-number: $px-unit / 1px; // A number

На данный момент у нас есть четыре переменные. $size $px-unit$size1px $px-string18pxне является числом. Это строка. Это потому, что сам пиксель обрабатывается как строка, и добавление строки к числу приводит к строке. 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;
}
background
Свойство rgba(255, 0, 0, 0.54) Однако свойство padding В сопровождающей демонстрации я использовал различные числа и стилизовал некоторые элементы на основе полученных значений.

Струны

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

 border-radius

$website: 'SitePoint'; // Stores SitePoint

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

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

$date: 'Month/Year : ' + (3/2016);
// 'Month/Year : 0.00149'
// This is because 3/2016 is evaluated first.

$variable: 3/2016; // Evaluated to 0.00149
$just-string: '3/2016'; // '3/2016'
Интересно, что во втором утверждении значение $name Это означает, что строка может объединяться и с другими типами данных. Тем не менее, вы все еще не можете объединить 3/2016

В третьем операторе переменная оценивается напрямую, потому что нет другой строки, которая инициирует объединение вместо оценки. Если вы хотите сохранить что-то вроде null

Поскольку мы занимаемся этой темой, я также хотел бы отметить, что если вы хотите использовать переменные внутри строки, вам придется использовать процесс, называемый интерполяцией переменных. Чтобы быть более точным, вам придется заключить переменные в 3/2016 Вот пример:

 #{}

Метод интерполяции может быть полезен в ситуациях, когда значение переменной определяется некоторыми условными выражениями. Этот кодекс должен прояснить ситуацию:

Цвета

Цветовые выражения CSS подпадают под тип данных $name: 'Gajendar';
$author: 'Author : $name'; // 'Author : $name'

$author: 'Author : #{$name}';
// 'Author : Gajendar'
Вы можете ссылаться на цвета в шестнадцатеричном формате, как значения colorrgbrgbahsl Например, вы можете добавить цветовые значения в Sass!

Рассмотрим следующие манипуляции с цветом, которые стали возможны благодаря Sass:

 hsla

Если вам интересно, как 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
#ff0000#008000#ff8000
Также следует помнить, что вы не можете добавлять цвета с разными значениями альфа вместе с этим методом.

Остальные цветовые функции говорят сами за себя. Осветление только осветляет данный цвет заданным значением и так далее. Вот демонстрационная программа со всеми этими функциями в действии:

Списки

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

 $font-list: 'Raleway','Dosis','Lato';
// Three comma separated elements

$pad-list: 10px 8px 12px;
// Three space separated elements

$multi-list: 'Roboto',15px 1.3em;
// This multi-list has two lists.

Как видно из этих утверждений, вы можете хранить несколько типов значений в списке. Первые два списка имеют три элемента каждый. Однако следующий список с именем $multi-list Первым элементом является строка 'Roboto' Это подразумевает, что использование разных разделителей в одном и том же списке создает вложенные списки.

При использовании вместе с циклами списки могут оказаться действительно полезными. Следующая демонстрация codepen подчеркивает это:

Я использовал функцию nth($list, $n)nth Есть много других полезных функций списка, о которых вы тоже должны знать.

Карты

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

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

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

В приведенном выше коде мы сначала создали map$styling Карта имеет различные пары ключ-значение для определения различных свойств CSS.

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

Вы также можете перебирать карту, чтобы получить доступ ко всем парам ключ-значение по одной. Эта демонстрация codepen показывает, как перебирать карты:

Вывод

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

Поскольку карты и списки являются более сложными, чем другие типы данных, я буду писать более подробные руководства по ним в ближайшие недели. Если у вас есть какие-либо вопросы относительно типов данных, дайте мне знать в комментариях ниже.