После того, как вы перешли на задачу преобразования вашего рабочего процесса в Sass, легко попасть в привычные шаблоны. Вы можете быть настолько довольны силой, которую Sass может сделать с помощью нескольких простых приемов, что вы никогда не потрудитесь изучить некоторые из более сложных функций. Использование такого мощного препроцессора, как Sass, имеет много преимуществ, и стоит изучить некоторые менее знакомые способы его использования.
1. CSS и встроенные комментарии
При оформлении страницы вам может понадобиться добавить комментарии в ваш CSS, чтобы кто-то, кто придет позже, понял, что вы хотели. В зависимости от того, насколько сложен или конкретен ваш CSS, оставление комментариев в коде может быть полезным для следующего человека, который вступает в него и должен внести изменения — и этот человек вполне может быть вами, через шесть месяцев, когда вы забыли как должен был работать этот изящный хак, который ты написал!
Sass позволяет добавлять обычные комментарии CSS с /* в начале и */ в конце. Подобные комментарии могут занимать несколько строк и останутся без изменений в окончательно сгенерированном CSS. Итак, для следующих комментариев Sass:
a { color: #ccc; &.halloween { /* This is for seasonal links */ color: #ff8c00; } }
Сгенерированный CSS будет выглядеть так:
a { color: #ccc; } a.halloween { /* This is for seasonal links */ color: #ff8c00; }
Sass также позволяет вам включать встроенные комментарии (или комментарии Sass), которые специфичны для написания Sass. В отличие от комментариев CSS, комментарии Sass не будут распечатываться в скомпилированном CSS. Комментарии Sass состоят только из одной строки и начинаются с // чтобы отличить их от кода Sass, подлежащего компиляции.
Итак, Sass-файл с комментариями выглядит так:
a { color: #ccc; &.halloween { // Chosen colour below after trying #ff8d00, #ff8b00 & ff8a00. /* This is for seasonal links */ color: #ff8c00; } }
Будет по-прежнему генерировать чистый CSS без комментариев к истории цветов:
a { color: #ccc; } a.halloween { /* This is for seasonal links */ color: #ff8c00; }
2. Локальные и глобальные переменные
Управление областью действия может быть одним из самых сложных аспектов работы на любом языке, и Sass не является исключением. Sass позволяет вам определять как глобальные, так и локальные переменные и при необходимости переопределять их.
Обычное использование глобальных переменных Sass — это создание имен цветов и семантическое использование этих цветов. Например, в верхней части основного файла Sass вы можете определить свой $color_success в качестве цвета акцента, который будет использоваться для успешных операций, поэтому он может наследоваться и изменяться любым числом селекторов, которые полагаются на него.
//defining a global success color $color_success: #090; .state_success { color: lighten($color_success, 50%); background-color: $color_success; }
Это сгенерирует CSS следующим образом:
.state_success { color: #9f9; background-color: #090; }
$color_success является глобальной переменной, потому что она была определена вне любого селектора, и она будет влиять на все, что находится ниже ее собственной области видимости. Но это не константа, поэтому вы можете изменить значение в любое время, и новое значение начнет использоваться для любых селекторов, которые вы определите после этого. Например, если следующий селектор в вашем файле Sass выглядел так:
.state_success_particular { //overriding the global success color locally $color_success: #900; color: lighten($color_success, 50%); background-color: $color_success; }
Следующий селектор в вашем сгенерированном CSS будет отражать новое значение для $color_success :
.state_success_particular { color: #f99; background-color: #900; }
В этом случае вы только изменили значение вашей глобальной переменной в локальной области действия этого селектора. Любой другой селектор, который вы напишите после закрытия этой области, будет использовать исходное глобальное значение. Если вместо этого вы изменили переменную вне селектора, вот так:
//Overriding earlier globals globally (a bad idea) $color_success: #900; .state_success_particular { color: lighten($color_success, 50%); background-color: $color_success; }
Вы бы изменили значение глобальной переменной для каждого последующего селектора в вашем CSS. Это может быть плохой идеей, поскольку одна и та же переменная будет означать разные вещи для нескольких селекторов только из-за порядка, в котором они были обработаны. Имейте это в виду, иначе вы можете ожидать, что изменения глобальных переменных, которые вы сделаете внутри одного селектора, будут применены вне этого селектора.
3. Заполнители для расширений
Поддержание чистоты исходного кода Sass — это отличная возможность для разработки. Sass позволяет вам вкладывать селекторы, чтобы помочь устранить повторяющийся код, но цена заключается в том, что каждый уровень вложенности приводит к большему количеству селекторов в конечном CSS. Определение @mixin также отлично @include для @include -ing предопределенных подмножеств стилей в несколько селекторов, но это может привнести избыточность и вес в ваш окончательный CSS. Хотя оба эти знакомых метода полезны, с ними нужно обращаться осторожно, если вы хотите, чтобы ваши CSS-файлы были небольшими и эффективными.
К счастью, Sass также позволяет разработчикам расширять существующие селекторы, применяя все определения стилей от одного селектора к другому с помощью простой команды @extend . Например, следующий Sass позволяет нескольким селекторам использовать одни и те же стили в селекторе .prominent :
.prominent { font-style: bold; font-size: 1.5rem; } .important { color: #900; @extend .prominent; } .notice { color: #090; @extend .prominent; }
чтобы создать этот CSS:
.prominent, .important, .notice { font-style: bold; font-size: 1.5rem; } .important { color: #900; } .notice { color: #090; }
Но если вы хотите определить наборы полезных определений стилей и не хотите создавать отдельные открытые селекторы в вашем CSS для каждого, Sass позволяет вам использовать селекторы-заполнители. Они определены так же, как селекторы классов, но они используют символ процента ( % ) вместо точки ( . ) В начале селектора. Итак, используя заполнитель в этом Sass:
%prominent { font-style: bold; font-size: 1.5rem; } %subtle { font-style: regular; font-size: 0.75rem; } .important { color: #900; @extend %prominent; } .notice { color: #090; @extend %prominent; }
генерирует следующий CSS без видимых ссылок на %prominent или %subtle , кроме как в стилях, которые переносят:
.important, .notice { font-style: bold; font-size: 1.5rem; } .important { color: #900; } .notice { color: #090; }
Фактически, в этом случае мы никогда не использовали стиль %subtle placeholder, и он не влиял на размер или селекторы в нашем сгенерированном CSS.
Следует отметить одну вещь, касающуюся расширения как стилей, так и стилей заполнителей, когда они используют глобальные переменные, — они делают свое дело, добавляя селекторы в базовый стиль, а не дублируя код CSS. Это означает, что значение переменных, которые действовали, когда был определен исходный стиль источника, будет перенесено, даже если новый стиль переопределит переменную локально. Например, следующий Sass с глобальной переменной:
$color_highlight: #090; %prominent { color: $color_highlight; font-style: bold; font-size: 1.5rem; } .important { @extend %prominent; } .notice { $color_highlight: #900; @extend %prominent; }
игнорирует переопределение в .notice и использует только исходное глобальное значение при генерации CSS:
.important, .notice { color: #090; font-style: bold; font-size: 1.5rem; }
4. Амперсанды для родительского селектора
Одна из основных функций Sass, о которой узнают разработчики, — это амперсанд ( & ). Когда вы добавляете амперсанд к параметру во вложенном селекторе Sass, этот селектор присоединяется к родительскому селектору, а не вкладывается под ним. Это немедленно полезно для селекторов псевдоклассов, таких как :hover или ::after этого их необходимо связать со селектором. Например, это Sass:
.hoverable { color: #fff; &:hover { color: #ff0; } }
приводит к следующим CSS-селекторам:
.hoverable { color: #fff; } .hoverable:hover { color: #ff0; }
Крутая вещь об амперсандах состоит в том, что они не только должны быть в начале определения вложенного стиля. Где бы вы ни добавляли амперсанд в определения селектора Sass, он интерпретируется как родительская область определения текущего стиля. Иногда вам нужно определить стиль, который принимает контекст существующего стиля, но применяется только в особом случае. Например, что если нам понадобится другая обработка границ для нашего элемента .hoverable когда родительский класс — .special :
.hoverable { color: #fff; &:hover { color: #ff0; } } .special .hoverable { border: 1px solid #f00; }
Выполнение этого потребовало, чтобы мы вышли из нашего селектора .hoverable , а затем .hoverable его в новом селекторе. Если бы было больше уровней вложенности или больше контекста, который нужно было установить, это могло бы быть довольно сложным действием.
Но с амперсандом Sass позволяет нам делать то же самое, не выходя за рамки селектора .hoverable :
.hoverable { color: #fff; &:hover { color: #ff0; } .special & { border: 1px solid #f00; } }
Оба этих фрагмента Sass приведут к следующему CSS:
.hoverable { color: #fff; } .hoverable:hover { color: #ff0; } .special .hoverable { border: 1px solid #f00; }
Вы видите, что сделала эта строка с амперсандом? Sass заменил амперсанд родительским селектором, определив новый селектор внутри .special селектора.
Подумайте о том, как некоторые из этих идей могут быть полезны при разработке следующего набора стилей Sass. Поскольку все они являются частью ядра Sass, вы можете сразу же начать использовать их в своих проектах и воспользоваться возможностью для более чистого, более удобного в обслуживании и более эффективного развития.