Переход с чистого CSS на SASS. Первые впечатления

, Александра Потапова
Переход с чистого CSS на SASS. Первые впечатления

Данная заметка подойдет больше новичкам в верстке, нежели уже состоявшимся специалистам, и больше содержит некоторые личные впечатление, чем какие-то практические советы, хотя и они тоже будут.

Уж не знаю почему так повелось, но довольно долго я верстала на чистом CSS и, в целом, меня все устраивало. Необходимости перехода на новый динамический язык стилей не было. Справедливости ради, стоит отметить, что идея перехода на LESS или SASS зародилась уже давно. Просто не находила своей практической реализации, к тому же я долго думала, какое из расширений мне больше пойдет.

Но одним прекрасным днем, что-то резко изменилось и я твердо решила уже перейти хоть на что-нибудь. Так получилось, что выбор пал на SASS.

Переход случился быстрым и безболезненным, сразу на боевом проекте. Были опасения, что придется мучительно привыкать к новому синтаксису, однако, я перестроилась довольно успешно и в кратчайшие сроки.

Порадовало, что есть очень подробная документация на русском на официальном сайте https://sass-scss.ru, так что даже новичок быстро освоится. Для меня, как для человека, который давно практикует чистый CSS, никаких проблем не было. SASS поддерживает все то же, но при этом гораздо удобнее, за счет вложенности, переменных, импорта, большого количества удобных директив и так далее, и, даже, немного умеет в программирование, что удивило и порадовало.

Немного из личного опыта работы с SASS. Вещь может быть очевидной, но не совсем видимой на первых порах работы со стилями: все переменные, используемые в проекте, стоит хранить в отдельное SASS файле и импортировать уже в общие стили. Я рекомендую это делать для удобства, чтобы не скакать каждый раз по коду в поисках того, как же вы назвали переменную, отвечающую за белый цвет, к примеру.

Стоит обратить внимание, что SASS все же требует предварительной установки в ваш IDE, но с этим тоже нет трудностей. Опять же, обо всем этом можно почитать на официальном сайте, там все объяснено доступным языком.

Так же стоит помнить, что браузеры не понимают других стилей кроме как с расширением css, поэтому при работе с SASS ваша среда разработки должна уметь компилировать все sass-стили в одни большие общие стили CSS. Либо стоит обзавестись любым удобным для вас препроцессором.

В целом SASS оставляет приятное ощущение, он прост, удобен и имеет гораздо больше возможностей чем CSS. Он попросту шире. Тем не менее, если вы только встали на путь Frontend-разработчика, стоит какое-то время поработать с чистым CSS. Понять, как работает наследование, псевдоэлементы и стили в целом. Отточить навык. И только потом переходить на расширения.