Elena0394
@Elena0394

Зачем пользоваться сейчас препроцессорами sass и scss?

Решила познакомиться с этими препроцессорами и вообще не поняла, зачем сейчас их изучать...
Может есть какие-нибудь примеры, где лучше использовать scss, а не css?
  • Вопрос задан
  • 173 просмотра
Пригласить эксперта
Ответы на вопрос 4
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Посмотрите на бутстрап.
Единственный файл variables.scss позволяет гибко кастомизировать весь фреймворк.
Стили структурированы.

Это два основных преимущества: централизованное управление и организация кода.

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

1. Скопировать себе файл стилей и переписать его
2. Подключить оригинальные стили и переназначить селекторы в своей таблицы.
3. Подключить исходники и только переназначить переменные

Еще кейс:

Берем какой-то крупный фреймворк, пусть будет тот же бутстрап. Половина компонентов нам в нем не нужны.
Мы снова можем подключить весь оригинальный файл с лишними стилями. Или мы можем взять исходники и подключить в сборку только необходимое нам. Если завтра нам понадобится еще какой-то компонент, мы просто раскомментируем строку с его подключением.

Еще:

Нам нужно задавать размеры в rem.

Мы можем пойти по плохому пути: назначить руту font-size: 10px и легко рассчитывать ремы в уме. Но ведь задавать пиксели для html не следует.
Или мы можем написать функцию toRem() в препроцессоре и использовать ее.

Не говорю уже о более сложных расчетах.
Или о громоздких.
Вот например: https://codepen.io/delphinpro/pen/QvLZxg?editors=0100
Посмотрите строку 62 в стилях. Там генерится 60 селекторов. Удобно будет такое писать на голом CSS?

Могу еще писать, но время дорого.
Ответ написан
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
из того, что полезно - миксины, более удобный синтаксис (к примеру очень удобны такие штуки как &.active, &:hover, &:focus и прочая работа с &), мелкие полезности по типу @extend @include @import, вложенность.
а переменные да. css переменные уже стали круче
Ответ написан
firedragon
@firedragon
Senior .NET developer
Ну представьте ваш заказчик решил вместо розовой цветовой схемы сделать голубую. В scss вы просто меняете переменную и все рассчитывается .
Ответ написан
@NZCoder
Из плюсов препроцессоров есть переменные и норм. синтаксис похожий на ЯП
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы