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-файла не пройдёт.