roma-dxunvrs
87 lines
2.3 KiB
Markdown
87 lines
2.3 KiB
Markdown
Языки стилей, позволяющие повысить уровень абстракции 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 зависимости)
|