Вычисления

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

В примере ниже используем переменную $width для хранения общей ширины макета страницы, а затем переменную $column, в ней будет храниться ширина одной колонки.

$width: 960px;
$column: $width/12;
.page {
  width: 8*$column;
}
.sidebar {
  width: 4*$column;
}

Теперь, если нам понадобится установить ширину любого элемента в колонках, достаточно умножить число колонок на переменную $column. Вот что в итоге получим в CSS.

.page {
  width: 640px;
}

.sidebar {
  width: 320px;
}

В вычислениях допустимо использовать стандартные знаки математических операций:

  • + — сложение;
  • - — вычитание;
  • / — деление;
  • * — умножение.

При вычислении учитывайте, что разные единицы CSS несовместимы друг с другом. Нельзя сложить 10% и 500px, можно только 10px и 500px, иными словами, значения должны быть с одинаковыми единицами измерения. В противном случае будет ошибка и компиляция CSS-файла не пройдёт.

Автор: Влад Мержевич
Последнее изменение: 19.02.2024