Узнайте, почему Sass — это отличное дополнение для всех веб-разработчиков.

Мы все знаем обычный ванильный CSS, который не менялся настолько с точки зрения синтаксиса/формата за довольно долгое время. Другие (включая меня) отказались от чистого CSS и погрузились в мир препроцессоров CSS. Препроцессор — это просто язык, который затем преобразуется в другой. В нашем случае язык препроцессора — Sass, и он конвертируется в чистый CSS. А теперь позвольте мне отправиться с вами в тур, который изменит вашу жизнь!

1. Вложение

Вложение, безусловно, является моим любимым дополнением к Sass. Это позволяет вам добавлять больше селекторов внутри другого селектора! Это позволяет вам структурировать свой CSS так же, как ваш HTML! Вот пример кода Sass для вложения и скомпилированной версии CSS:

2. Миксины

Миксины также являются важной частью Sass, потому что они позволяют вам создавать медиа-запросы внутри элемента, на который вы хотите воздействовать этим медиа-запросом. Вот пример кода Sass для медиа-запроса с использованием миксинов:

3. Удобные для браузера переменные

Мы все знаем о нативных переменных CSS, которые вы можете использовать, но они поддерживаются только 93,15% браузеров! (источник) переменные Sass обрабатывают переменную и заменяют каждый ее экземпляр в вашем коде на указанное вами значение. Поэтому вам даже не нужно использовать переменные CSS! Вот пример:

4. Легко импортируйте другие файлы Sass

Импорт файлов Sass в файл Sass стал намного намного проще! Вместо того, чтобы вызывать HTTP-запрос каждый раз, когда вы импортируете скучный старый файл CSS в другой, Sass будет извлекать данные из указанного файла и добавлять их в скомпилированный файл. Это уменьшит нагрузку на вашу страницу и заметно увеличит ваше присутствие в поиске. Теперь позвольте мне показать вам, как это работает:

5. Автоматически добавлять поддержку браузера

Помните те раздражающие префиксы поставщика/браузера, которые вы должны добавлять в свой код, потому что без них стиль не будет отображаться должным образом? Итак, Sass полностью устраняет необходимость использования каких-либо префиксов -moz, -o, -webkit, -ms или любых других поставщиков, которые вам нужны! Все, что вам нужно сделать, это создать один единственный миксин и определить два параметра. Ага. Удивительный.

Теперь, когда вы знаете силу Sass, используйте ее во благо! Только помни одно: держись, Дерзкий! Я знаю. Плохая шутка.

Спасибо, что прочитали эту статью, было весело!