obsidian/Веб/Фронтенд/CSS-препроцессоры.md

Языки стилей, позволяющие повысить уровень абстракции CSS-кода и упростить структуру таблиц стилей По сравнению с обычным CSS:

• Можно использовать переменные
• Можно использовать вложенные правила
• Более мощные возможности по импорту, наследованию стилей
• Поддержка математических операторов Браузеры не поддерживают Less & Sass / SCSS таблицы стилей - нужен специальный транслятор, который преобразует эти правила в обычный CSS

LESS

CSS-like синтаксис

.box-1 {
	color: #BADA55;
	.set-bg-color(#BADA55);
}

SASS

Ruby-like синтаксис

.my-element
	color= !primary-color
	width= 100%
	overflow= hidden

SCSS

Диалект SASS с CSS-like синтаксисом

.my-element {
	color: $primary-color;
	width: 100%;
	overflow: hidden;
}

Есть возможность создавать константы $md-font-size-h1: 24px; И затем также их устанавливать в свойства Еще удобство - вложенные стили

#header {
	background: #FFFFFF;
	
	.error {
		color: #FF0000;
	}
	a {
		text-decoration: none;
		&:hover {
			text-decoration: underline;
		}
	}
}

Тот же код на чистом CSS

#header {
	background: #FFFFFF;
}
#header .error {
	color: #FF0000;
}
#header a {
	text-decoration: none;
}
#header a:hover {
	text-decoration: underline;
}

Есть импорт стилей

@import `reset`;

Наследование стилей

.message {
	border: 1px solid;
}
.error {
	@extend .message;
	border-color: red;
}

Поддержка математики

width: 600px / 960px * 100%;*

Компиляция

CSS-препроцессоры могут компилировать либо плагинами в редакторе кода, либо утилитами в консоле, либо при сборке проекта (например через Maven/Gradle зависимости)