​​Однажды кто-то не согласился, что CSS это удобно. #обзор #те | Безрукий программист | DOKTOR

​​Однажды кто-то не согласился, что CSS это удобно.
#обзор #технологии #посложнее

Sass - сасная надстройка над языком веб-стилей CSS, позволяющая добавить в него все фичи , которых тебе, возможно, не хватало, если ты уже хоть немного писал стили для веб-страниц (да и если ты уже собаку съел на этом, но почему-то ещё не знаком с sass - тебе тоже будет что почерпнуть).
Для совсем юных умов, только начинающих изучать верстку - Sass может показаться ненужным усложнением, поэтому если ты из таких - можешь просто ознакомиться с существованием такого прекрасного явления.

Существование Sass возможно благодаря препроцессингу - преобразованию sass в обычный css. Зачем? Потому что браузеры всё ещё умеют только в css. Не так вкусно, но и не грустно. Препроцессинг легко настроить почти в любой среде разработки, и тогда она сама будет под капотом делать тебе нужный css для браузера. А все сопряженные с этим проблемы уже спрошены на форумах и успешно решены
Если ты всё же кодишь в блокноте как настоящий senior coder - всё ещё сможешь установить sass и настроить препроцессинг через консоль следующей командой:

sass --watch app/sass:public/stylesheets

(она будет перегонять все sass файлы в папке app/sass в css файлы в папке public/stylesheets, выглядит несложно?)

Теперь к самому сочному: списку возможностей которых нет в css, которые теперь будут доступны прочитавшему данный пост:
— Переменные. Один раз вписал туда цвет и используй где хочешь. Надо будет поменять цвет? Достаточно поменять переменную.
— Вложенность. Надоело писать вместо слектора змею вроде "main > article > content > heading > title > subtitle"? Вложи в каждый из них стили его подблоков, препроцессор всё разложит как надо.
— Импорт. Раньше все отдельные стили нужно было импортировать в html файл, теперь стили можно импортировать друг в друга!
— Математика. Нужно вычислить 1/6 от размера экрана? Как насчёт "width: 1/6 x 100%"?
— Миксины. Приходилось вешать много одинаковых свойств на разные стилевые классы? Объедини их в миксин, дай ему название и используй его в одну строчку. Если эти свойства немного различаются от места к месту - в миксин можно передавать аргумент чтобы он был как функция. Пример:

bigRedText($size: 20px) {
font-size: $size;
color: red;
display: inline-block;
}
.myText{
@include bigRedText(30px)
}
Теперь myText будет размером 30px. Если не передавать аргумент, а сделать include bigRedText - будет 20px

Это основные функции Sass, позаимствованные с главной страницы русской документации sass-scss.ru, и её авторы хотят, чтобы ты её посмотрел . Всё вышеописанное имеет создано с одной целью - простота, понятность и поддерживаемость твоего кода. Эти признаки и отличают хороший код от плохого.

#it_доступно_всем