Типы данных в 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 Как вы можете видеть в демонстрации ниже, это действительно так.

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

 1px

 border-radius

 #{}

 hsla

 $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.

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

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