Языки стилей, позволяющие повысить уровень абстракции CSS-кода и упростить структуру таблиц стилей
По сравнению с обычным [[CSS]]:
- Можно использовать переменные
- Можно использовать вложенные правила
- Более мощные возможности по импорту, наследованию стилей
- Поддержка математических операторов
Браузеры не поддерживают `Less & Sass` / `SCSS` таблицы стилей - нужен специальный транслятор, который преобразует эти правила в обычный CSS
## LESS
CSS-like синтаксис
```LESS
.box-1 {
	color: #BADA55;
	.set-bg-color(#BADA55);
}
```
## SASS
Ruby-like синтаксис
```SAS
.my-element
	color= !primary-color
	width= 100%
	overflow= hidden
```
## SCSS
Диалект `SASS` с CSS-like синтаксисом
```SCSS
.my-element {
	color: $primary-color;
	width: 100%;
	overflow: hidden;
}
```
Есть возможность создавать константы
`$md-font-size-h1: 24px;`
И затем также их устанавливать в свойства
Еще удобство - вложенные стили
```SCSS
#header {
	background: #FFFFFF;
	
	.error {
		color: #FF0000;
	}
	a {
		text-decoration: none;
		&:hover {
			text-decoration: underline;
		}
	}
}
```
Тот же код на чистом CSS
```CSS
#header {
	background: #FFFFFF;
}
#header .error {
	color: #FF0000;
}
#header a {
	text-decoration: none;
}
#header a:hover {
	text-decoration: underline;
}
```
Есть импорт стилей
```SCSS
@import `reset`;
```
Наследование стилей
```SCSS
.message {
	border: 1px solid;
}
.error {
	@extend .message;
	border-color: red;
}
```
Поддержка математики
```SCSS
width: 600px / 960px * 100%;*
```
## Компиляция
CSS-препроцессоры могут компилировать либо плагинами в редакторе кода, либо утилитами в консоле, либо при сборке проекта (например через Maven/Gradle зависимости)