Использование Sass: почему вы должны прекратить использовать ванильный CSS

Когда я впервые услышал о Sass и других препроцессорах CSS, мои мысли были не совсем восторженными. «Зачем нам нужен еще один инструмент для чего-то, что уже работает так же красиво, как CSS?». «Я не буду это использовать». «Мой CSS достаточно упорядочен, чтобы не нуждаться в нем». «Препроцессор предназначен для людей, которые не знают, как писать CSS, если вы знаете, как писать CSS, вам не понадобится препроцессор». «В конце концов, процессоры для людей, которые не умеют писать CSS. Если бы они это сделали, им не понадобился бы препроцессор». И я действительно избегал их какое-то время, пока не был вынужден использовать его в нескольких проектах.

Я не осознавал, насколько мне нравится работать с Sass, до недавнего времени, когда мне пришлось вернуться к ванильному CSS в проекте. За это время я так многому научился, что решил похвалить Сасса и сделать этот мир лучше, а вас сделать более счастливым человеком!

Зачем вообще использовать Sass?

Организация: @импорт

Этот проект, который я только что упомянул, большой веб-сайт электронной коммерции, имел один файл CSS с 7184 строками несжатых объявлений стилей. Да, вы правильно прочитали: семь тысяч сто восемьдесят четыре строки CSS. Я уверен, что это не самый большой CSS-файл, с которым приходилось работать разработчикам интерфейсов в отрасли, но он был достаточно большим, чтобы создать полный беспорядок.

Это первая причина, по которой вам нужен Sass: он помогает вам организовать и разбить на модули ваши таблицы стилей. Это не переменные, это не вложенность. Для меня ключевой особенностью Sass являются партиалы и то, как он расширяет правило CSS @import, позволяя импортировать файлы SCSS и Sass. На практике это означает, что вы сможете разделить свой огромный файл style.css на несколько файлов меньшего размера, которые будет легче поддерживать, понимать и систематизировать.

Правило @import существует почти столько же, сколько и сам CSS. Однако он получил дурную славу, поскольку при использовании @import в своих файлах CSS вы инициируете отдельные HTTP-запросы, по одному для каждого импортируемого файла CSS. Это может негативно сказаться на производительности вашего сайта. Так что же происходит, когда вы используете его с Sass? Если вы никогда не задумывались о том, что означает слово «препроцессор», сейчас самое время.

Препроцессор — это программа, которая обрабатывает свои входные данные для получения выходных данных, которые используются в качестве входных данных для другой программы. —Википедия

Итак, возвращаясь к нашему правилу @import, это означает, что @import будет обрабатываться Sass, и все наши файлы CSS и SCSS будут скомпилированы в один файл, который попадет на наш работающий сайт. Пользователю нужно будет сделать всего один запрос и скачать один файл, в то время как структура вашего проекта может состоять из сотен модульных файлов. Вот как может выглядеть style.scss типичного проекта Sass:

 @import “variables”; @import “reset”; @import “fonts”; @import “base”; @import “buttons”; @import “layout”;

Не повторяйтесь: переменные

Любая статья, восхваляющая Sass, вероятно, начнется с упоминания его главной особенности — переменных. Чаще всего переменные используются в цветовой палитре. Сколько раз вы сталкивались с тем, что несколько объявлений того, что должно быть одним и тем же цветом, заканчивались в CSS как немного разные оттенки, потому что никто не использует один и тот же шестнадцатеричный код? Сасс в помощь. В Sass вы можете объявлять переменные практически с любым значением. Итак, наша цветовая палитра может быть примерно такой:

 $brand: #226666; $secondary: #403075; $emphasis: #AA8439;

Слова, начинающиеся с «$», являются переменными Sass. Это означает, что позже в ваших таблицах стилей вы сможете использовать эти слова, и они будут сопоставлены со значениями, которые вы определили ранее:

 body { background: $secondary; } .logo { color: $brand; } a { color: $emphasis; } a:hover { color: $brand; }

Представьте, как это может изменить наши 7184 строки кода CSS, и вы можете начать хотеть Sass прямо сейчас. Еще лучше представьте, что у бренда редизайн, и вам нужно обновить все цвета в вашем CSS. В Sass единственное, что вам нужно сделать, это обновить объявления этих переменных один раз, и баам! Изменения коснутся всех ваших таблиц стилей.

Я закодировал этот пример в Sassmeister, игровой площадке Sass. Итак, попробуйте изменить эти переменные на что-то другое.

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

Чистый исходный код: вложение

Вложенность может быть второй наиболее упоминаемой особенностью Sass. Когда я вернулся к ванильному CSS после использования Sass, файл CSS, на который я смотрел, казался настолько загроможденным, что я не был уверен, был ли он минимизирован. Без вложенности ванильный CSS выглядит не лучше, чем красиво напечатанные файлы .min.css :

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; } .header.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .header .nav { list-style: none; } .header .nav li { display: inline-block; } .header .nav li a { display: block; padding: 0.5em; color: #AA8439; }

С помощью вложения вы можете добавлять классы между фигурными скобками объявления. Sass будет компилировать и обрабатывать селекторы интуитивно. Вы даже можете использовать символ «&», чтобы получить ссылку на родительский селектор. Возвращаясь к нашему примеру CSS, мы можем преобразовать его в:

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; &.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .nav { list-style: none; li { display: inline-block; a { display: block; padding: 0.5em; color: #AA8439; } } } }

Выглядит красиво и легче читается. Не стесняйтесь играть с этим примером.

Опять таки! Не повторяйтесь: примеси и расширения

Повторов в CSS всегда трудно избежать. И не помешает еще немного подчеркнуть это, особенно когда Sass дает вам примеси и расширения. Они оба являются мощными функциями и помогают избежать большого количества повторений. Кажется, что возможности миксинов и расширений не имеют конца. С миксинами вы можете делать параметризованные объявления CSS и повторно использовать их в своих таблицах стилей.

Например, допустим, у вас есть бокс-модуль с кнопкой внутри. Вы хотите, чтобы граница поля и фон кнопки были одного цвета. С ванильным CSS вы делаете что-то вроде:

 .box { border: 2px solid red; } .box .button { background: red; }

Допустим, теперь вы хотите такой же бокс-модуль, но другого цвета. Вы добавите что-то вроде этого в свой CSS:

 .box-alt { border: 2px solid blue; } .box-alt .button { background: blue; }

Теперь предположим, что вам нужен коробочный модуль, но с более тонкой рамкой. Вы бы добавили:

 .box-slim { border: 1px solid red; } .box-slim .button { background: red; }

Много повторов, да? С помощью Sass вы можете абстрагироваться от этих случаев, чтобы уменьшить количество повторений. Вы можете определить такой миксин:

 @mixin box($borderSize, $color) { border: $borderSize solid $color; .button { background: $color; } }

Итак, ваш исходный код можно сократить до:

 .box { @include box(2px, red); } .box-alt { @include box(2px, blue); } .box-slim { @include box(1px, red); }

Выглядит красиво, правда? Поиграйте с этим примером. Вы можете создать свою собственную библиотеку миксинов или, что еще лучше, использовать одну из библиотек сообщества.

Расширения похожи, они позволяют вам обмениваться свойствами от одного селектора к другому. Однако вместо того, чтобы выводить несколько объявлений, они выводят список классов без повторения ваших свойств. Таким образом, вы также можете избежать повторения кода в своем выводе. Давайте забудем о кнопках в нашем предыдущем примере и посмотрим, как @extend будет работать с .boxes .

Допустим, вы объявляете первый ящик:

 .box { margin: 1em; padding: 1em; border: 2px solid red; }

Теперь вам нужны две коробки, похожие на эту, но с разными цветами границ. Вы можете сделать что-то вроде:

 .box-blue { @extend .box; border-color: blue; } .box-red { @extend .box; border-color: red; }

Вот как будет выглядеть скомпилированный CSS:

 .box, .box-blue, .box-red { margin: 1em; padding: 1em; border: 2px solid red; } .box-blue { border-color: blue; } .box-red { border-color: red; }

Мощный, правда? Вы можете найти пример здесь. Если вы просмотрите получившийся CSS, вы поймете, что класс .box включен в вывод. Если вы не хотите такого поведения, вы можете комбинировать @extend с «заполнителями». Заполнитель — это специальный селектор, который не выводит класс в CSS. Например, я иногда часто сбрасываю стили списков по умолчанию. Обычно я использую @extend с таким заполнителем:

 %unstyled-list { list-style: none; margin: 0; padding: 0; }

Затем вы можете повторно использовать этот шаблон во всех ваших таблицах стилей:

 .search-results { @extend %unstyled-list; } .posts { @extend %unstyled-list; } .nav { @extend %unstyled-list; }

Ваш скомпилированный CSS будет выглядеть так:

 .search-results, .posts, .nav { list-style: none; margin: 0; padding: 0; }

Посмотрите примеры здесь.

Есть ли еще?

Абсолютно! Я не хотел усложнять эту статью, но есть мир Sassy , ​​ожидающий вашего открытия; кроме того, есть много других возможностей: операции, однострочные комментарии с //, функции, циклы if… если вы когда-нибудь думали, что «было бы здорово сделать что-то X с помощью CSS», я уверен эта вещь «X» уже сделана Сассом. «CSS со сверхспособностями» — его слоган, и это как нельзя ближе к истине.

Заключение

Перейдите на страницу установки и начните взламывать! Поверьте, вы не пожалеете.

Да, есть несколько альтернатив Sass. Другие препроцессоры (LESS, Stylus), постпроцессоры, Grunt и т. д. Есть даже переменные CSS. Я не говорю, что Sass — единственная технология. Все, что я говорю, это то, что это лучшее! По крайней мере на данный момент. Не верите в то, что я говорю? Попробуйте сами. Вы не пожалеете!