Заметки об использовании Sass

Sass.md

Source maps

Редактировать исходники в браузере оказалось не особенно-то и удобно:

• изменения применяются не сразу, как только их ввели (как когда редактируешь обычный стиль), а только при нажатии "Сохранить". Для микроправок (например, когда двигаешь по пикселю) это неудобно.

• если сайт отдается через веб-сервер, нужны какие-то специальные ухищрения, чтобы файл исхоника можно было сохранять на диск, ведь браузеру он отдается не с локального диска (даже если там фактически находится, а веб-сервер запущен на том же компьютере)

Sourcemaps, тем не менее, остаются полезными для определения исходного положения того или иного стилевого правила (т.е. "только для чтения").

Про переменные вместе с медиа-запросами

Было бы удобно задать значение некоторого свойства, различающегося для разных медиа-запросов, с помощью переменной, а потом объявить его в одном месте. Например:

$h: 200px;

@media (max-width: 360px) {
    $h: $h/2;
}

.something {
    height: $h;
}

Однако это не сработает, т.к., в отличие от деклараций правил, разных "версий" значения переменных для различных медиа-запросов не существует.

Один из способов добиться желаемого - включить объявление свойств внутрь того же медиа-запроса, где определяется значение новой переменной:

$h: 200px;

@media (max-width: 360px) {
    $h: $h/2;
    .something {
        height: $h;
    }
}

.something {
    height: $h;
}

Это не очень удобно, поскольку объявление в таком случае нужно дублировать. Чтобы этого избежать, нужно использовать mixin:

@mixin something-height($height) {
	.something {
		height: $height;
	}
}

$h: 200px;

@include something-height($h);

@media (max-width: 360px) {
	@include something-height($h/2);
}

Конечно, не очень удобно заводить mixin на каждый подобный случай.

Впрочем, такая ситуация встречается нечасто - как правило, только когда определение значения свойства требует каких-то вычислений, часть которых является общей для всех применяемых медиа-запросов, а остальные имеют индивидуальную для каждого случая логику. (Пример: сложные анимации, ход которых имеет отличия на разных устройствах.)

Кроме того, если mixin поместить внутрь декларации правил для какого-то конкретного селектора (что рекомендуется сделать), он не попадёт в глобальную область видимости.

Использование в качестве пакета npm

Требуется, в частности, для работы соотв. плагина PhpStorm.

npm install sass

Отдельные модули (string, math и пр.) устанавливаются как отдельные пакеты:

npm install sass-string

и т.д.

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

@use "sass:string"