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

• Препроцессинг

  Написание CSS само по себе весело, но когда таблица стилей становится огромной, то становится и сложно её обслуживать. И вот в таком случае нам поможет препроцессор. Sass позволяет использовать функции недоступные в самом CSS, например, переменные, вложенности, миксины, наследование и другие приятные вещи, возвращающие удобство написания CSS.

  Как только Вы начинаете пользоваться Sass, препроцессор обрабатывает ваш Sass-файл и сохраняет его как простой CSS-файл, который Вы сможете использовать на любом сайте.

  Самый простой способ получить такой результат - использовать терминал. После того, как Sass установлен, вы можете компилировать ваш Sass в CSS, используя команду sass . Вам всего лишь нужно сообщить Sass, где взять файл Sass и в какой файл CSS его скомпилировать. Например, запустив команду sass input.scss output.css в терминале, вы сообщаете Sass взять один Sass файл, input.scss , и скомпилировать в файл output.css .

• Переменные

  Думайте о переменных, как о способе хранения информации, которую вы хотите использовать на протяжении написания всех стилей проекта. Вы можете хранить в переменных цвета, стеки шрифтов или любые другие значения CSS, которые вы хотите использовать. Чтобы создать переменную в Sass нужно использовать символ $ . Рассмотрим пример:

  Синтаксис SCSS

  $font-stack : Helvetica , sans-serif ; $primary-color : #333 ; body { font : 100% $font-stack ; color : $primary-color ; }

  Синтаксис Sass

  $font-stack : Helvetica , sans-serif $primary-color : #333 body font : 100% $font-stack color : $primary-color

  Когда Sass обрабатывается, он принимает значения, заданные нами в $font-stack и $primary-color и вставляет их в обычном CSS-файле в тех местах, где мы указывали переменные как значения. Таким образом переменные становятся мощнейшей возможностью, например, при работе с фирменными цветами, используемыми на всем сайте.

  body { font : 100% Helvetica , sans-serif ; color : #333 ; }

• Вложенности

  При написании HTML, Вы, наверное, заметили, что он имеет четкую вложенную и визуальную иерархию. С CSS это не так.

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

  Чтобы понять что мы имеем ввиду, приведем типичный пример стилей навигации на сайте:

  Синтаксис SCSS

  nav { ul { margin : 0 ; padding : 0 ; list-style : none ; } li { display : inline-block ; } a { display : block ; padding : 6px 12px ; text-decoration : none ; } }

  Синтаксис Sass

  nav ul margin : 0 padding : 0 list-style : none li display : inline-block a display : block padding : 6px 12px text-decoration : none

  Вы заметили, что селекторы ul , li , и a являются вложенными в селектор nav ? Это отличный способ сделать ваш CSS-файл более читабельным. Когда вы сгенерируете CSS-файл, то на выходе вы получите что-то вроде этого:

  nav ul { margin : 0 ; padding : 0 ; list-style : none ; } nav li { display : inline-block ; } nav a { display : block ; padding : 6px 12px ; text-decoration : none ; }

• Фрагментирование

  Вы можете создавать фрагменты Sass-файла, которые будут содержать в себе небольшие отрывки CSS, которые можно будет использовать в других Sass-файлах. Это отличный способ сделать ваш CSS модульным, а также облегчить его обслуживание. Фрагмент - это простой Sass-файл, имя которого начинается с нижнего подчеркивания, например, _partial.scss . Нижнее подчеркивание в имени Sass-файла говорит компилятору о том, что это только фрагмент и он не должен компилироваться в CSS. Фрагменты Sass подключаются при помощи директивы @import .

• Импорт

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

  Например, у вас есть несколько фрагментов Sass-файлов - _reset.scss и base.scss . И мы хотим импортировать _reset.scss в base.scss .

  Синтаксис SCSS

  // _reset.scss html , body , ul , ol { margin : 0 ; padding : 0 ; } // base.scss @import "reset" ; body { font : 100% Helvetica , sans-serif ; background-color : #efefef ; }

  Синтаксис Sass

  // _reset.sass html , body , ul , ol margin : 0 padding : 0 // base.sass @import reset body font : 100% Helvetica , sans-serif background-color : #efefef

  Обратите внимание на то, что мы используем @import "reset"; в base.scss файле. Когда вы импортируете файл, то не нужно указывать расширение.scss . Sass - умный язык и он сам догадается. Когда CSS сгенерируется вы получите:

  html , body , ul , ol { margin : 0 ; padding : 0 ; } body { font : 100% Helvetica , sans-serif ; background-color : #efefef ; }

• Миксины (примеси)

  Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3, где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов. Миксины позволяют создавать группы деклараций CSS, которые вам придется использовать по нескольку раз на сайте. Хорошо использовать миксины для вендорных префиксов. Пример для border-radius:

  Синтаксис SCSS

  @mixin border-radius ($radius ) { -webkit-border-radius : $radius ; -moz-border-radius : $radius ; -ms-border-radius : $radius ; border-radius : $radius ; } .box { @include border-radius (10px ); }

  Синтаксис Sass

  =border-radius ($radius ) -webkit-border-radius : $radius -moz-border-radius : $radius -ms-border-radius : $radius border-radius : $radius .box +border-radius (10px )

  Для создания миксина используйте директиву @mixin + название этого миксина. Мы назвали наш миксин border-radius . Также, в миксине мы используем переменную $radius внутри скобок, тем самым позволяя себе передавать в переменной все, что захотим. После того, как вы создали миксин, вы можете его использовать в качестве параметра CSS, начиная вызов с @include и имени миксина. Когда ваш CSS скомпилируется вы получите следующее:

  .box { -webkit-border-radius : 10px ; -moz-border-radius : 10px ; -ms-border-radius : 10px ; border-radius : 10px ; }

• Расширение/Наследование

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

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

  Синтаксис SCSS

  %equal-heights { display : flex ; flex-wrap : wrap ; } %message-shared { border : 1px solid #ccc ; padding : 10px ; color : #333 ; } .message { @extend %message-shared ; } .success { @extend %message-shared ; border-color : green ; } .error { @extend %message-shared ; border-color : red ; } .warning { @extend %message-shared ; border-color : yellow ; }

  Синтаксис Sass

  // Данный отрывок кода не попадет в CSS, так как %equal-heights никогда не расширялся. %equal-heights display : flex flex-wrap : wrap // Данный отрывок кода попадет в CSS потому, что %message-shared расширен. %message-shared border : 1px solid #ccc padding : 10px color : #333 .message @extend %message-shared .success @extend %message-shared border-color : green .error @extend %message-shared border-color : red .warning @extend %message-shared border-color : yellow

  Вышеуказанный код сообщает классам.message , .success , .error и.warning вести себя как %message-shared . Это означает, что где бы не вызывался %message-shared , то и.message , .success , .error и.warning тоже будут вызваны. Магия происходит в сгенерированном CSS, где каждый из этих классов получает css-свойства, как и %message-shared . Это позволит вам избежать написания множества классов в HTML элементах.

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

  Когда вы генерируете ваш CSS, то он будет выглядеть как пример ниже. Обратите внимание, %equal-heights не попадает в CSS, так как ни разу не был использован.

  .message , .success , .error , .warning { border : 1px solid #cccccc ; padding : 10px ; color : #333 ; } .success { border-color : green ; } .error { border-color : red ; } .warning { border-color : yellow ; }

• Математические операторы

  Использовать математику в CSS очень полезно. Sass имеет несколько стандартных математических операторов, таких как + , - , * , / и % . В нашем примере мы совершаем простые математические вычисления для расчета ширины aside и article .

  Синтаксис SCSS

  .container { width : 100% ; } article [ role = "main" ] { float : left ; width : 600px / 960px * 100% ; } aside [ role = "complementary" ] { float : right ; width : 300px / 960px * 100% ; }

  Синтаксис Sass

  .container width : 100% article [ role = "main" ] float : left width : 600px / 960px * 100% aside [ role = "complementary" ] float : right width : 300px / 960px * 100%

  Мы создали простую адаптивную модульную сетку, с шириной в 960 пикселей. Используя математические операторы, мы использовали полученные данные с пиксельными значениями и конвертировали их в процентные, причем без особых усилий. Скомпилированный CSS выглядит так:

  .container { width : 100% ; } article [ role = "main" ] { float : left ; width : 62.5% ; } aside [ role = "complementary" ] { float : right ; width : 31.25% ; }

С помощью Sass создаются синтаксически безупречные таблицы стилей (Syntactically Awesome Style sheets ), или, по крайней мере, предполагается, что он должен это делать.

При эффективном использовании Sass помогает задать масштабируемый и краткий CSS . При неправильном использовании Sass может реально увеличить размер файла и добавить ненужный или дублированный код.

Ниже приводится ряд полезных советов, которые помогут вам извлечь из Sass максимум пользы…

1. Структурируйте Sass

Изначальное определение правильной структуры сайта является жизненно важным для любого нового проекта на Sass . Использование частичных шаблонов позволяет разделить CSS на более мелкие и более управляемые блоки кода, которые намного легче разрабатывать и развивать.

Файлы частичных шаблонов создаются с помощью символов нижнего подчеркивания и не выносятся в отдельные CSS -файлы. Каждый частичный шаблон должен импортироваться с помощью основного Sass -файла (global.scss ), расположенного в корневой папке Sass .

Вот пример структуры папок, который иллюстрирует этот принцип:

vendor/ base/ | |-- _variables.scss |-- _mixins.scss |-- _placeholders.scss framework/ modules/ global.scss

Такая структура папок обеспечивает простую работу с ней сайта, а также добавление новых файлов. Например, новые модули могут быть легко добавлены в папку модуля и затем к global.scss с помощью @import .

Чтобы продемонстрировать это, ниже приводится пример файла global.scss :

/* VENDOR - Резервные и дополнительные файлы по умолчанию. ========================================================================== */ @import "vendor/_normalize.scss"; /* BASE - Файл базовых Переменных, содержащий также начальные Примеси и Заполнители. ========================================================================== */ @import "base/_variables.scss"; @import "base/_mixins.scss"; @import "base/_placeholders.scss"; /* FRAMEWORK - Структура файлов. ========================================================================== */ @import "framework/_grid.scss"; @import "framework/_breakpoints.scss"; @import "framework/_layout.scss"; /* MODULES - Многократно используемые элементы сайта. ========================================================================== */ @import "modules/_buttons.scss"; @import "modules/_lists.scss"; @import "modules/_tabs.scss";

2. Используйте переменные Sass более эффективно

Переменные являются одним из наиболее простых элементов Sass , но некоторые разработчики все еще время от времени используют их неправильно. Разработка конвенции о присвоении имен по всему сайту имеет важное значение для работы с переменными. Без нее они менее понятны и возможно их дублированное использование.

Вот некоторые советы по эффективному применению переменных:

• Назначайте переменным понятные имена;
• Применяйте и придерживайтесь конвенции назначения имен (Модульной, BEM и т.д .);
• Убедитесь, что использование переменной оправдано.

Вот несколько примеров эффективного использования:

$orange: #ffa600; $grey: #f3f3f3; $blue: #82d2e5; $link-primary: $orange; $link-secondary: $blue; $link-tertiary: $grey; $radius-button: 5px; $radius-tab: 5px; А вот это неэффективно: $link: #ffa600; $listStyle: none; $radius: 5px;

3. Используйте меньше примесей

Примесь — это отличный способ включить раздел кода несколько раз в пределах сайта. Тем не менее, включение примеси это то же самое, что копирование и вставка стилей в файл CSS . Это создает массу дубликатов кода и может привести раздуванию CSS -файла.

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

@mixin rounded-corner($arc) { -moz-border-radius: $arc; -webkit-border-radius: $arc; border-radius: $arc; }

Примесь rounded-corner может быть использована в любой ситуации, для этого просто нужно изменить значение $arc, тогда ее стоит использовать:

Tab-button { @include rounded-corner(5px); } .cta-button { @include rounded-corner(8px); }

Пример неэффективного использования примеси может выглядеть вот так:

@mixin cta-button { padding: 10px; color: #fff; background-color: red; font-size: 14px; width: 150px; margin: 5px 0; text-align: center; display: block; }

Эта примесь не имеет аргументов и, следовательно, лучше применить заполнитель, что вплотную подводит нас к пункту 4 .

4. Включайте заполнители

В отличие от примесей, заполнители могут быть использованы несколько раз без добавления какого-либо повторяющегося кода. Это делает их гораздо более удобными для вывода чистого CSS :

%bg-image { width: 100%; background-position: center center; background-size: cover; background-repeat: no-repeat; } .image-one { @extend %bg-image; background-image:url(/img/image-one.jpg"); } .image-two { @extend %bg-image; background-image:url(/img/image-two.jpg"); }

И компилируемый CSS :

Image-one, .image-two { width: 100%; background-position: center center; background-size: cover; background-repeat: no-repeat; } .image-one { background-image:url(/img/image-one.jpg") ; } .image-two { background-image:url(/img/image-two.jpg") ; }

Повторяющийся код в заполнителях выводится только один раз и только для уникальных стилей, применяемых к отдельным селекторам. Если они не используются, стили заполнителей не выводятся вовсе.

Учитывая сказанное в пункте 3 , заполнители можно использовать наряду с примесями, что позволит уменьшить количество дублированного кода и в то же время сохранить гибкость, обеспечиваемую примесями…

/* ЗАПОЛНИТЕЛЬ ============================================= */ %btn { padding: 10px; color:#fff; curser: pointer; border: none; shadow: none; font-size: 14px; width: 150px; margin: 5px 0; text-align: center; display: block; } /* ПРИМЕСЬ КНОПКИ ============================================= */ @mixin btn-background($btn-background) { @extend %btn; background-color: $btn-background; &:hover { background-color: lighten($btn-background,10%); } } /* КНОПКИ ============================================= */ .cta-btn { @include btn-background(green); } .main-btn { @include btn-background(orange); } .info-btn { @include btn-background(blue); }

5. Используйте для вычислений функции

Функции используются для выполнения вычислений. Функция Sass не выводит CSS -код. Вместо этого, она возвращает значение, которое может использоваться в CSS . Это полезно для вычислений, результаты которых применяются по всему сайту.

Например, функции полезны для расчета ширины в процентах от конкретного элемента:

@function calculate-width ($col-span) { @return 100% / $col-span } .span-two { width: calculate-width(2); // spans 2 columns, width = 50% } .span-three { width: calculate-width(3); // spans 3 columns, width = 33.3% }

6. Поддерживайте порядок и хорошую организацию

Поместите все примеси, функции, заполнители и переменные в соответствующие им файлы частичных шаблонов. Хранение блоков кода в отдельных группах обеспечивает возможность легко редактировать их и повторно использовать в будущем.

Глобальные элементы должны храниться в базовой папке. Базовая папка должна содержать глобальные переменные, такие как шрифты и цветовые схемы:

$font-primary: "Roboto", sans-serif; $font-secondary: Arial, Helvetica, sans-serif; $color-primary: $orange; $color-secondary: $blue; $color-tertiary: $grey;

Относящиеся к конкретным модулям примеси, функции и переменные должны располагаться в файлах частичных шаблонов соответствующих модулей:

$tab-radius: 5px; $tab-color: $grey;

7. Ограничивайте количество вложений

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

Вот некоторые золотые правила для вложений:

• Никогда не разветвляйте структуру более 3 уровней вниз;
• Убедитесь, что CSS на выходе чист и пригоден для повторного использования;
• Используйте вложение, когда на то есть причины, а не в качестве опции по умолчанию.

8. Старайтесь делать все проще

В завершающем пункте этой статьи я бы отметила, что вы должны стараться, чтобы все элементы были настолько простыми, насколько это возможно. Цель Sass — написать более чистый, более управляемый CSS -код.

Всем привет! Как быстро летит время. Я даже не заметил, как я перешел от написания стилей с обычного Css на препроцессор Sass. А ведь раньше не понимал — что за Sass, для чего он нужен, это наверно для супер продвинутых профи в верстке. Да, использование препроцессоров это шаг на новый уровень в веб-разработке, но здесь ничего страшного и сложного нет и вы убедитесь в этом сами, дочитав данную статью до конца.

И так, чем хорош препроцессор и конкретно Sass? Я сразу скажу, что есть и другие, такие, как Less, Stylus и др. Все они работают по одному принципу, но у каждого свои особенности. Sass получил большую популярность у профессионалов в следствие чего изучение значительно упрощается. Просто чем популярнее технология, тем больше сообщество и тем более развернута документация.

Препроцессоры созданы для того, чтобы избавить разработчика от большинства рутинных задач при написании кода, тем самым повысив скорость и качество работы. Помимо CSS-препроцессоров существуют также и HTML-препроцессоры, например, Pug (Jade).

Структура статьи

Документация

Разработчиком Sass является француз Hugo Giraudel, проживающий в Германии с определенного времени. Естественно документация на английском языке, но я лично в ней неплохо ориентируюсь (важно знать технический английский). Но также есть перевод и на русский. Я бы советовал все же английскую версию, это для того, чтобы привыкать и изучать все глубже английский. Но русская тоже ничем не хуже.

• Английская документация: http://www.sass-lang.com
• Русская документация: https://sass-scss.ru

Компиляция Sass в Css

В качестве программного обеспечения для компиляции Sass в Css я использую плагин Sass для таск-менеджера . Вообще Sass является приложением (Gem) языка Ruby. Поэтому, если вы хотите обойтись без Gulp, то для компиляции в Css вам необходимо будет установить платформу языка программирования Ruby. Я не буду сейчас показывать как это делается, можете почитать об этом на официальном сайте .

Синтаксис - Sass, Scss

Сразу отмечу, что существует 2 синтаксиса написания кода: Sass и Scss.

Синтаксис Sass незначительно отличается от Scss. Scss похож больше на обычный код Css, а в Sass опущены фигурные скобки и точка с запятой между правилами. Также существует различие в написании некоторых функций и надо быть внимательным в том, какой синтаксис вы выбираете. Расширения файлов для Sass — *.sass, а для Scss — *.scss. Синтаксис Sass он более старый, а Scss появился позже, чтобы упростить изучение для новичков. Я сам начинал изучение данного препроцессора именно на Scss, так было проще его понять. Сейчас же я перешел на Sass, для меня он более удобен.

Если говорить о Sass, то его структура кода строится на основе отступов (ведь фигурных скобок в нем нет) и здесь следует быть внимательным, так как в качестве отступа может выступать, как табулятор (TAB — 4 пробела), так и обычные пробелы (обычно это двойной пробел). Я всегда использую табулятор.

Помните! Если вы используете табулятор в качестве отступа, то пробелы следует исключить, чтобы везде было одинаково. И наоборот — если используете пробелы, то табулятор следует исключить. Иначе, компилятор выдаст ошибку.

Sass

.maincontent .main-title font-size: 30px font-weight: 700 margin: 0 0 30px .description margin-bottom: 30px p color: #444444 font-size: 16px line-height: 22px

Scss

.maincontent { .main-title { font-size: 30px; font-weight: 700; margin: 0 0 30px; } .description { margin-bottom: 30px; p { color: #444444; font-size: 16px; line-height: 22px; } } }

В большинстве редакторов кода (например, Sublime Text) есть разметка отступов в виде полос, что не дает нам запутаться. В примерах ниже я буду использовать синтаксис Sass.

Упрощаем жизнь с помощью Sass

Вложенность правил

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

Main .title { font-size: 30px; color: #444; } .main .subtitle { font-size: 20px; } .main .description { font-size: 14px; margin-bottom: 30px; }

То есть мы везде указываем родительский класс.main , а это в свою очередь не совсем удобно. Используя Sass, можно записать следующим образом:

Scss

.main { .title { font-size: 30px; color: #444; } .subtitle { font-size: 20px; } .description { font-size: 14px; margin-bottom: 30px; } }

Sass

.main .title font-size: 30px color: #444 .subtitle font-size: 20px .description font-size: 14px margin-bottom: 30px

Согласитесь так смотрится намного аккуратнее, да и писать код можно быстрее, ведь родительский класс.main мы пишем всего один раз. Если вы хотите повторить за мной, не устанавливая Ruby и всякое подобное ПО можно воспользоваться онлайн-компилятором для демонстрации.

Вложенные свойства

Помимо вложенности правил в Sass существует возможность вложенности свойств. Например, вот как можно записать значения margin:

Sass

.main .title margin: top: 10px right: 15px bottom: 10px left: 15px

Css

.main .title { margin-top: 10px; margin-right: 15px; margin-bottom: 10px; margin-left: 15px; }

Привязка к селектору или конкатенация - знак &

Написание нашего кода можно ускорить и сделать его еще компактнее, применив конкатенацию (соединение) посредством символа — & . Как это работает? Например, у нас есть такие классы, как: .main-title , .main-subtitle , .main-description . В Sass данные классы можно записать следующим образом:

Main &-title font-size: 30px color: #444 &-subtitle font-size: 20px &-description font-size: 14px margin-bottom: 30px

Main-title { font-size: 30px; color: #444; } .main-subtitle { font-size: 20px; } .main-description { font-size: 14px; margin-bottom: 30px; }

С помощью символа & мы соединяемся к корневому классу, то есть в данном случае нет необходимости постоянно повторять корень.main . В тоже время следует иметь ввиду, что мы не создали дочерние элементы.

/* Ссылка */ a { color: red; } a:hover { color: blue; } /* Псевдоэлементы */ .main::before { content: ""; display: block; font-size: 20px; } .main::after { content: ""; display: block; font-size: 30px; }

Иногда нужно указать цепочку селекторов до текущего элемента. Можно конечно вынести его в корень, но чтобы не нарушать вложенность можно написать следующим образом:

Main .container & width: 700px

Container .main { width: 700px }

Переместив & после селектора, мы поменяли порядок стыковки, т. е. класс.container в данном случае является родительским.

Привязка к родительскому селектору, но на уровнь выше

Выше для примера я демонстрировал Sass код:

Main &-title font-size: 30px color: #444 &-subtitle font-size: 20px &-description font-size: 14px margin-bottom: 30px

Теперь представьте, что в блоке.main-title существует еще один элемент которому нужно явно указать стили, используя всю цепочку родителей. Я долго время просто указывал корневое название (в данном случае — .main), но это не очень удобно. Я стал ковырять документацию Sass и нашел решение. На самом деле все просто — нам необходимо объявить ссылку на родителя и использовать ее, там, где нужно.

Вот так я делал раньше:

Main &-title font-size: 30px color: #444 .main__icon // указываем корень.main, иначе, если использовать & будет стыковка к.main-title color: #444 width: 20px &-subtitle font-size: 20px &-description font-size: 14px margin-bottom: 30px

А теперь можно сделать так:

Main $self: & // ссылка на родителя &-title font-size: 30px color: #444 #{$self}__icon // вместо & используем ссылку на родителя color: #444 width: 20px &-subtitle font-size: 20px &-description font-size: 14px margin-bottom: 30px

Если заметили мы объявили ссылку на родителя — $self: & . Мне это чем-то напоминает ссылку на объект (this), который вызвал событие в javaScript. Теперь в нужно месте мы можем просто его вызвать #{$self} . Вот оказывается как все просто, а я голову ломал и думал, что нет решения этой проблемы в Sass.

Main-title { font-size: 30px; color: #444; } .main-title .main__icon { color: #444; width: 20px; } .main-subtitle { font-size: 20px; } .main-description { font-size: 14px; margin-bottom: 30px; }

Шаблоны-заготовки

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

%button background-color: #666 border: 1px solid #666 padding: 0 20px font-size: 15px line-height: 40px height: 40px .button-green @extend %button background-color: green border-color: green .button-red @extend %button background-color: red border-color: red

Button-green, .button-red { background-color: #666; border: 1px solid #666; padding: 0 20px; font-size: 15px; line-height: 40px; height: 40px; } .button-green { background-color: green; border-color: green; } .button-red { background-color: red; border-color: red; }

Шаблоном выступает в данном случает селектор %button (об этом говорит знак — %). Это удобно тем, что сам селектор шаблона нигде не участвует, а его стили наследуются другими селекторами посредством директивы — @extend . Данный шаблон можно использовать сколько угодно раз, сокращая тем самым количество кода.

SassScript

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

Переменные

Переменная в Sass начинается со знака $ , а имя пишется латиницей, например: $color . Следует отметить, что знаки: «— » и «_ » взаимозаменяемы. К примеру, если назвали $color-red , то можно вызвать и $color_red . Определяется переменная следующим образом: $название: значение , например: $color: #f6f6f6 .

Переменная объявленная вне каких либо уровней вложенности, доступна глобально, т.е. можно использовать везде. Если же вы определили переменную в каком либо уровне вложенности селектора, то она будет доступна только на данном уровне. Чтобы она работала глобально во всем документе необходимо указать ключевое слово !global .

Title $font-size: 10px !global font-size: $font-size .subtitle font-size: $font-size

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

Директивы

@extend

Данную директиву мы затронули выше, когда изучали шаблон-заготовку. Закрепим еще раз знания. С помощью @extend мы можем скопировать правила любого селектора. Например, при верстке может быть так, что элемент «А » и элемент «Б » могут быть схожи по внешнему виду. В данном случае можно написать правила элементу «А», а для «Б» просто скопировать стили элемента «А», слегка переопределив нужные свойства.

Block_a background-color: #cccccc border: 5px solid #999999 padding: 20px font-size: 30px height: 150px width: 150px .block_b @extend .block_a padding: 15px

Block_a, .block_b { background-color: #cccccc; border: 5px solid #999999; padding: 20px; font-size: 30px; height: 150px; width: 150px; } .block_b { padding: 15px; }

В данном примере мы сверстали 2 одинаковых квадрата. У квадрата «Б» мы переопределили только отступ padding: 15px . Вот так работает @extend. Я довольно часто пользуюсь данной директивой.

@import

Данная директива позволяет объединять несколько файлов стилей в один. Это очень удобно, тем более, если проект большой. Не стоит путать с директивой, которая существует в Css — @import . В Css обязательным атрибутом является — url() .

На самом деле удобнее писать стили в разных файлах и предназначение у каждого свое. Например, весь каркас страницы можно разделить на регионы: header.sass, sidebar.sass, footer.sass. Собрать все можно в главном файле main.sass, как раз используя @import. Файлы регионов можно указать также через нижнее подчеркивание в начале имени файла, например так: _header.sass, _sidebar.sass, _footer.sass. Такие файлы называются фрагментами. При импорте фрагментов не обязательно указывать расширение файла.

Простой импорт

@import "header.sass" @import "sidebar.sass" @import "footer.sass"

Импорт фрагментов

@import "header" @import "sidebar" @import "footer"

Файлы фрагментов могут быть с расширениями: *.sass , *.scss или *.css . Например, главный файл может быть с расширением *.sass , а шапка сайта, к примеру с расширением *.scss . То есть не важно какое у вас расширение главного файла. Следует отметить, что при импорте переносятся все переменные и миксины (о них поговорим ниже) в главный файл, в который происходит импорт.

Также, можно указать импорт нескольких файлов через запятую: @import «header», «sidebar», «footer».

Имейте ввиду, что импорт происходит в том месте, где вы указали директиву @import . Обычно это делают в начале документа.

@at-root

Директива @at-root говорит сама за себя и если переводить на русский, то будет звучать так — «от корня» . Иными словами мы переносим селектор в корень, отменяя цепочку родительских селекторов. Тут конечно можно задать вопрос — «А зачем нужна эта директива, если можно перенести селектор в корень в ручную?». Ответ прост — удобство написания кода, не нарушая структуру. Когда вы научитесь работать с Sass в полной мере вы это поймете.

Main &-title font-size: 30px color: #444 @at-root .main__icon color: #444 width: 20px

Main-title { font-size: 30px; color: #444; } .main__icon { color: #444; width: 20px; }

Управляющие директивы и выражения

Директива @if

Данная директива выполняет стили, если выражение, заключенное в ней возвращает любое значение кроме false и null .

$color: green .header @if $color == green background-color: green @else if $color == blue background-color: blue @else background-color: #f6f6f6

Header { background-color: green; }

Те, кто знаком хотя бы с основами языка программирования (например, javaScript или Php) разобраться будет не сложно. Здесь суть та же самая, главное знать синтаксис написания кода.

Директива @for

В языке программирования (опять же в Javascript или Php) с помощью For можно задать цикл. В Sass данная директива выполняет тоже самое — создает цикл. Для каждой итерации (повторения) используется переменная-счетчик, которая изменяет данные вывода.

Директива имеет 2 формы написания: 1. @for $var from <начало> through <конец> и 2. @for $var from <начало> to <конец> . Если вы хотите, чтобы последняя цифра была включена в цикл, то используйте «through «. Давайте рассмотрим пример:

@for $i from 1 to 6 .elem-item-#{$i} background-image: url("images/image-#{$i}.jpg")

Elem-item-1 { background-image: url("images/image-1.jpg"); } .elem-item-2 { background-image: url("images/image-2.jpg"); } .elem-item-3 { background-image: url("images/image-3.jpg"); } .elem-item-4 { background-image: url("images/image-4.jpg"); } .elem-item-5 { background-image: url("images/image-5.jpg"); }

Для указания конечного значения я использовал ключевое слово «to «. При таком раскладе цикл заканчивается на цифре — 5 . Обратите внимание насколько компактным выглядит код Sass.

Директива @each

Директива @each также, как и @for выводит значения в цикле и удобен тем, что помимо цифр можно перебирать конкретные значения. Давайте возьмем вышеприведенный цикл и изменим его на какие либо значения.

@each $bgItem in animal, lake, sea, landscape, nature .elem-item-#{$bgItem} background-image: url("images/image-#{$bgItem}.jpg")

Elem-item-animal { background-image: url("images/image-animal.jpg"); } .elem-item-lake { background-image: url("images/image-lake.jpg"); } .elem-item-sea { background-image: url("images/image-sea.jpg"); } .elem-item-landscape { background-image: url("images/image-landscape.jpg"); } .elem-item-nature { background-image: url("images/image-nature.jpg"); }

В данном случае не создается переменная-счетчик, а количество итераций зависит от количества созданных значений после ключевого слова «in «. Значения выводятся через переменную (в данном примере — $bgItem), название которой может быть произвольным.

Миксины (функции)

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

@mixin align-center position: absolute top: 50% left: 50% transform: translate(-50%, -50%) .container @include align-center

Создается миксин директивой @mixin , далее через пробел следует имя миксина, а также опционально передаваемые параметры. Сразу отмечу, что знаки дефиса (-) и нижнего подчеркивания (_) в имени миксина взаимозаменяемы. Миксин может содержать в себе не только правила, но и селекторы. Выше я привел пример элементарного миксина без параметров.

Вызывается миксин директивой @include и далее через пробел указываем имя созданного миксина. В примере выше — это центрирование блока по оси X и по оси Y с помощью абсолютного позиционирования. Если такое приходится применять часто, то согласитесь легче вызвать просто миксин, нежели писать стили центровки снова и снова.

Теперь давайте рассмотрим миксин с параметрами (аргументами).

@mixin border($width, $color) border: width: $width style: solid color: $color .square @include border(2px, #ccc)

Square { border-width: 2px; border-style: solid; border-color: #ccc; }

Как видим, после названия миксина в скобках мы задаем аргументы, в данном случае — это ширина бордюра и цвет. Это простейший миксин, который я привел для наглядности. На практике же можно встретить более сложные миксины с использованием различных условий и переменных. Но не будем сейчас все усложнять, надо всегда начинать с чего-то малого и простого, а потом уже двигаться по мере продвижения вверх.

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

Ну что ж, всем спасибо за внимание! Как всегда, вопросы задаем в комментариях и подписывайтесь либо на телеграм канал , либо на рассылку по email (форма в сайдбаре справа), чтобы не пропустить ничего интересного.

До встречи в других моих постах…

Статей про SASS (SCSS), Less на хабрахабре уже полно, но на мой взгляд не хватает такой, в которой было бы немного реальной практики. Я постараюсь восполнить этот пробел. Около года назад одна из SASS -статей меня "зацепила", и с тех пор я полюбил эту технологию настолько, что ручной набор обычного CSS кода представляется мне лишней тратой времени. Сия статья посвящается тем верстальщикам (или web-программистам), которые про SCSS ещё не слышали, или же ещё не пробовали в деле. Более опытным товарищам, полагаю, в ней ловить нечего.

Что такое SCSS

SCSS - "диалект" языка SASS . А что такое SASS? SASS это язык похожий на HAML (весьма лаконичный шаблонизатор), но предназначенный для упрощения создания CSS-кода. Проще говоря, SASS это такой язык, код которого специальной ruby-программой транслируется в обычный CSS код. Синтаксис этого языка очень гибок, он учитывает множество мелочей, которые так желанны в CSS. Более того, в нём есть даже логика (@if, each), математика (можно складывать как числа, строки, так и цвета). Возможно, некоторые возможности SCSS покажутся вам избыточными, но, на мой взгляд, лишними они не будут, останутся "про запас".

Отличие SCSS от SASS заключается в том, что SCSS больше похож на обычный CSS код. Пример SASS-кода:

$blue: #3bbfce $margin: 16px .content-navigation border-color: $blue color: darken($blue, 9%) .border padding: $margin / 2 margin: $margin / 2 border-color: $blue
И тоже самое на SCSS:

$blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 9%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; }
Я выбрал SCSS в виду того, что он проще для восприятия коллегам с ним ещё не знакомым. Ещё стоило бы отметить что обычный CSS код вполне вписывается в SCSS синтаксис.

Установка и использование

Для начала нужно установить ruby . После чего нужно установить sass-gem (gem install sass в консоли). Если всё прошло гладко, то теперь вам доступна консольная программа sass . О всех нюансах её использования вы можете прочесть здесь ― sass --help . Я расскажу лишь о двух базовых возможностях:

--watch

Если запустить sass с ключом --watch , то программа будет следить за указанными вами файлами. В случае их изменения, она автоматически пересоберёт все необходимые css-файлы (не все вообще, а только связанные с изменёнными).

Предположим, что у вас есть следующая структура проекта:

Css ---- scss ------ style.scss ---- style.css
Необходимо чтобы sass отслеживал все изменения в css/scss/* и результат сохранял в css/*.css . В таком случае запускаем sass так ― sass --watch css/scss:css/. . Т.е. sass --watch [что]:[куда] .

--update

Если вам нужно единожды обновить css-файлы, то в место --watch применяем --update . Никакой слежки проводится не будет, так же как и проверок на необходимость обновления.

Стоит отметить, что в отличии от Less , SASS не умеет компилировать свой код прямо в браузере. На мой взгляд, такой подход (компиляция на сервере или ПК-верстальщика) является единственно верным.

Практика

Итак, мы подошли к самому главному. Начнём с @import .

@import

Изначально, до использования SCSS, весь CSS код движка, с которым мне по долгу службы приходится работать, находился в 1-ом огромном style.css файле. Моя IDE (Netbeans (кстати, вот плагин для подсветки синтаксиса)) работала с ним с существенными тормозами. Разбивать же его на множество файлов поменьше, и, при необходимости, склеивать их в 1 ― никто не хотел. SCSS решает этот вопрос автоматически.

Стоит отметить 1 нюанс. Если скормить sass не конкретный файл-источник, а директорию, то css файлы не будут генерироваться для файлов начинающихся с _ . Т.е. наличие файла style.scss приведёт к созданию style.css , а наличие файла _some.scss ― нет.

Итак, для того, чтобы включить содержимое файла _template.scss или template.scss пишем

@import "template"; // шаблоны
В конечном счёте, вместо 1-го большого style.css файла у меня получилось более сотни мелких scss -файлов. С первого взгляда может показаться, что такое количество слишком велико и приведёт к страшным мукам. Однако, нужный мне файл я нахожу сразу исходя из удобной структуры каталогов. К тому же, я полагаю, что благодаря кешированию такая "схема" более производительна.

@вложенность

Одна из самых желанных "фич" для CSS ― вложенность селекторов. Пример:

#some { border: 1px solid red; .some { background: white; } } /* => */ #some { border: 1px solid red; } #some .some { background: white; }
Ещё пример:

Input { border: 1px solid gray; background: white; & { color: black; } &.some_class { display: none; } } /* => */ input { border: 1px solid gray; background: white; } input { color: black; } input.some_class { display: none; }
Символ & равносилен родительскому селектору. Допустим тег у нас имеет класс ie_7 , в случае если в качестве обозревателя у нас Internet Explorer 7 . Следующий код позволяет избавиться от всех "хаков" и спец.комментариев:

$IE_7: "body.ie_7"; //... .some { display: inline-block; #{$IE_7} & { zoom: 1; display: inline; } } /* => */ .some { display: inline-block; } body.ie_7 .some { zoom: 1; display: inline; }

$variables

Переменные ― удобная штука. Определяются они так:

$some: red;
Переменные ― не константы, их можно менять по ходу кода:) Одна из первых моих мыслей вылилась в _const.scss файл, который заключает в себе все базовые цвета, размеры шрифтов и пр.

$link: #15157d; $link_bottom: $link; $input_font_size: 13px; $content_bg: #F1F1F1; $input_color: #4E4D4D; $input_color_placeholder: #959595; $text_color: black; ...
Предполагается, что цвет ссылок на сайте ― $link .

A { color: $link; } span.link { color: $link; text-decoration: underline; }
Если в дальнейшем выяснится, что цвет ссылок изменился ― достаточно поменять 1 переменную (в случае CSS нужно было бы пройтись авто-заменой по файлам, возможно даже выборочно). Предположим, что, внезапно, выясняется, что в некотором модуле contacts , цвет ссылок другой. Есть, как минимум, два пути решения.

$contacts_link: orange; // код модуля с использованием $contacts_link вместо $link
Второй

$__link: $link; $link: orange; // код модуля $link: $__link;
Переменные у нас не типизированные, поэтому с равным успехом могут содержать строки, числа и цвета.

@математика

Разделим математику на 2 категории ― цвета и числа. Начнём с чисел. Простой пример:

Block { $block_width: 500px; padding: 5px; border: 1px solid black; width: $block_width - (5px * 2) - (1px * 2); }
При желании можно и padding с border-ом задавать переменными. Всё зависит от сложности вёрстки.

Ещё пример:

Block { $count: 10; $margin_left: 5px; $all_width: 1000px; width: $all_width; .sub_element { width: ($all_width / $count) - $margin_left; margin: 0 0 0 $margin_left; } }
Хочу отметить, что подобного рода манипуляции применяются очень часто. Без них я как без ног.

А теперь цвета. Цвета можно складывать, перемножать:

Some { $color: #010203; color: $color; border-color: $color - #010101; &:hover { color: #010203 * 2; } } /* => */ .some { color: #010203; border-color: #000102; } .some:hover { color: #020406; }
Довольно удобная штука, когда лень подбирать цвета. Также доступны такие функции как opacify и transparentize (более

Объедините возможности программирования с гибкостью

Если вы занимаетесь разработкой каскадных таблиц стилей, то Sass может существенно упростить этот процесс. Sass – это язык и препроцессор каскадных таблиц стилей, добавляющий в CSS традиционные атрибуты программирования. В Sass реализован ряд возможностей программирования, включая переменные, логическую вложенность стилей, миксины, аргументы и наследование. Если вы создаете таблицы стилей для вашего Web-сайта, то Sass может сильно облегчить вам жизнь за счет получения стандартной разметки CSS путем преобразования кода Sass.

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

Синтаксис Sassy CSS (SCSS) является расширением CSS3; любой код SCSS является работоспособным кодом CSS. Все примеры этой статьи написаны на SCSS.

Почему Sass

Синтаксис Sass

• SCSS – наиболее распространенный синтаксис, являющийся расширением синтаксиса CSS.
• .sass – старый синтаксис, в котором вложенные элементы реализованы с помощью отступов.

Sass – это надежное, конфигурируемое и функциональное решение для разработки CSS. Вместо устаревших статических правил CSS в нем используется принцип динамической генерации структур. Если вы хотите придерживаться своего привычного стиля программирования и иметь доступ к структурам языка программирования, то Sass является наилучшим выбором.

CSS-препроцессоры обладают всеми функциями, необходимыми для любой среды Web-разработки. Они позволяют:

• Сократить время разработки.
• Реализовать принцип DRY (Don"t Repeat Yourself – не повторяйся) при разработке CSS.
• Сделать ваш код более чистым и понятным.

Существует множество технологий предварительной обработки CSS. В этой статье мы остановили свой выбор на Sass из-за его гибкости и широты возможностей.

Инсталляция Sass

Основная реализация Sass выполнена на Ruby, хотя существуют и другие реализации. Первый шаг заключается в инсталляции Sass через его компоненты Ruby.

1. Загрузите и инсталлируйте Ruby, если он еще не установлен в вашей системе.
   • Для пользователей Windows: загрузите установщик Ruby для Windows (EN).
   • Для пользователей Mac OS X: Ruby уже установлен в вашей операционной системе.
   • Для пользователей Linux: установите Ruby с помощью любого менеджера пакетов.
2. Инсталлируйте gem-пакет Ruby Sass при помощи команды gem install sass .

Подготовка рабочей среды Sass

Создайте файл с расширением.scss в любом текстовом редакторе. Поддержка синтаксиса Sass (выделение цветом различных фрагментов кода) различна в разных текстовых редакторах; список редакторов вы найдете в разделе .

Скопируйте код из листинга 1 и вставьте его в созданный scss-файл.

Листинг 1. Пример кода Sass

#blueBar { position: relative; height: 37px; left: 0; right: 0; top: 0; }

Язык Sass является расширением CSS3. В Sass версии 3.2.1 любой рабочий код CSS является также рабочим кодом Sass. Пример такого кода приведен в листинге 1. Тем не менее, код Sass из листинга 1 необходимо преобразовать в CSS, иначе Web-браузеры не смогут корректно воспринимать таблицу стилей. Вместо того чтобы постоянно преобразовывать Sass в CSS вручную с помощью команды sass-convert , мы настроим Sass на автоматическую конвертацию sass-файла в CSS при его сохранении. Для того чтобы Sass постоянно отслеживал нужный файл, выполните в командной строке команду из листинга 2.

Листинг 2. Отслеживание файла

sass --watch style.scss:style.css

Можно также настроить Sass на отслеживание всей директории, как показано в листинге 3.

Листинг 3. Отслеживание директории

sass --watch stylesheets/sass:stylesheets/compiled

Теперь Sass будет автоматически конвертировать ваш код в рабочий код CSS при сохранении sass-файла, и мы можем приступать к работе.

Переменные

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

Листинг 4. Определение цвета элементов в CSS

#someElement { color: #541B32; } #anotherElement { color: #541B32; } #yetAnotherElement { color: #541B32; }

Стандартная разметка CSS требует явного указания всех значений, что приводит к повторениям в листинге 4. С помощью Sass можно использовать более эффективный способ, как показано в листинге 5.

Листинг 5. Листинг 5. Определение цвета элементов в Sass

$purplishColor: #541B32; #someElement { color: $purplishColor; } #anotherElement { color: $purplishColor; } #yetAnotherElement { color: $purplishColor; }

Преимущество очевидно. Теперь можно изменять цвет всех элементов в одном месте. Листинг 5 содержит переменную $purplishColor , значение которой можно изменить в Sass-файле в любой момент. Переменные Sass не имеют типов; одной и той же переменной можно присваивать строковые и целочисленные значения и даже коды цветов.

Модули

Код CSS можно с легкостью разбить на отдельные модули, которые механизм Sass соберет воедино. При помощи директивы @import можно импортировать модули, как показано в листинге 6. В директиве необходимо указать имя файла, гиперссылку или любой другой путь. В одном документе можно одновременно объединять файлы CSS и SCSS.

Листинг 6. Импорт модулей в Sass

@import "colors.scss" @import "links.scss"

Подходы к разделению кода на модули в CSS и Sass существенно различаются. Когда вы разбиваете CSS-код на более мелкие таблицы стилей, то для загрузки каждой из таблиц требуется выполнить отдельный HTTP-запрос. В Sass директива @import загружает код модуля немедленно, поэтому в итоге всегда получается один CSS-файл.

Строки и подстановка

В Sass поддерживаются объединение строк и подстановка переменных. Вместо того чтобы использовать переменные только для присвоения значений свойствам, можно также непосредственно вставлять их значения в имена свойств и селекторов, как показано в листинге 7.

Листинг 7. Действия со строками и переменными в Sass

$image_dir: "images/web/"; $page: 10; .button { background-image: url($image_dir + "image.gif"); :before { content: "Page #{ $page }"; } }

В листинге 8 представлен код из листинга 7, сконвертированный в CSS.

Листинг 8. Действия со строками и переменными в CSS

.button { background-image: url("images/web/image.gif"); } .button:before { content: "Page 10"; }

Математические вычисления

В Sass поддерживаются стандартные математические операции с числами, как показано в листинге 9. Можно выполнять простые математические операции со значениями переменных.

Листинг 9. Математические операции с числами в Sass

.block { $block_width: 500px; width: $block_width - (10px * 2) - (1px * 2); }

В листинге 10 представлен код из листинга 9, сконвертированный в CSS..

Листинг 10. Математические операции с числами в CSS

.block { width: 478px; }

Также поддерживаются математические операции с кодами цветов, как показано в листинге 11.

Листинг 11. Математические операции с кодами цветов в Sass

.block { $color: #010203; color: $color; border-color: $color - #010101; }

В листинге 12 представлен код из листинга 11, сконвертированный в CSS.

Листинг 12. Математические операции с кодами цветов в CSS

.block { color: #010203; border-color: #000102; }

Вложенные селекторы и свойства

Одной из наиболее востребованных возможностей, отсутствующих в CSS, являются вложенные селекторы (применение стиля к селектору внутри другого селектора). Чтобы создать вложенный селектор в CSS, необходимо повторно указывать родительский селектор для каждого определяемого дочернего селектора. В Sass процесс создания вложенных селекторов упрощен, как видно из листинга 13.

Листинг 13. Вложенные селекторы в Sass

#some { border: 1px solid red; .some { background: white; } }

В листинге 14 представлен код из листинга 13, сконвертированный в CSS.

Листинг 14. Вложенные селекторы в CSS

#some { border: 1px solid red; } #some .some { background: white; }

Управляющие директивы

Управляющие директивы Sass выстраивают потоки данных и логику в коде CSS. В этом разделе мы рассмотрим основные управляющие директивы – @if, @for и @each.

@if

В Sass поддерживаются базовые функции if/else, которые могут быть скомпилированы в CSS. Рассмотрим листинг 15, где мы хотим сделать цвет link черным (black) во всех случаях, за исключением случаев, когда базовый цвет уже черный. Если базовый цвет уже черный, то мы меняем его на белый. Listing 15. Sass @if example

Листинг 15. Пример директивы @if в Sass

$color: black; .link { @if $color == black { color: white; } @else { color: black; } }

В листинге 16 представлен код из листинга 15, сконвертированный в CSS.

Листинг 16. Пример директивы @if в CSS

.link { color: white; }

Здесь директива @if работает так же, как и в других языках программирования. После оператора @if можно указать несколько операторов @else if и один оператор @else . Если условие @if не выполняется, то предпринимаются попытки поочередного выполнения операторов @else if до тех пор, пока один из них не завершится успехом или пока не будет достигнут блок оператора @else .

@for

Директива @for циклически генерирует набор стилей. В каждой итерации используется переменная-счетчик, как показано в листинге 17.

Листинг 17. Пример директивы @for в Sass

@for $i from 1 through 5 { .button-#{$i} { width: 1px * $i; } }

В листинге 18 представлен код из листинга 17, сконвертированный в CSS.

Листинг 18. Пример директивы @for в CSS

.button-1 { width: 1px; } .button-2 { width: 2px; } .button-3 { width: 3px; } .button-4 { width: 4px; } .button-5 { width: 5px; }

@each

Директива @each считывает элементы из указанного списка и генерирует стили с использованием их значений, как показано в листинге 19.

Листинг 19. Пример директивы @each в Sass

@each $company in IBM, Motorola, Google { .#{$company}-icon { background-image: url("/images/#{$company}.jpg"); } }

В листинге 20 представлен код из листинга 19, сконвертированный в CSS.

Листинг 20. Пример директивы @each в CSS

.IBM-icon { background-image: url("/images/IBM.jpg"); } .Motorola-icon { background-image: url("/images/Motorola.jpg"); } .Google-icon { background-image: url("/images/Google.jpg"); }

Функции

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

В Sass имеется множество встроенных функций. Например, функции управления цветом rgb() и darken() , представленные в листинге 21. При помощи этих функций можно изменять оттенок, насыщенность, яркость, прозрачность, масштаб плавности и многие другие свойства цвета. Также вы можете определить собственные функции и использовать их при необходимости.

Листинг 21. Функции в Sass

#someElement { color: rgb(150, 50, 100); } #someDarkYellowElement { color: darken(yellow, 33%); }

В листинге 22 представлен код из листинга 21, сконвертированный в CSS.

Листинг 22. Функции в CSS

#someElement { color: #963264; } #someDarkYellowElement { color: #575700; }

Также в Sass присутствуют математические функции, функции для работы со строками и списками, функции интроспекции и многие другие. Полный список функций вы найдете в разделе .

Миксины

Миксины (многократно используемые фрагменты CSS-кода) определяются с помощью директивы @mixin , как показано в листинге 23. В миксинах можно определять шаблоны пар "свойство-значение" и использовать их в других наборах правил. Использование миксинов упрощает код таблиц стилей и делает их удобнее для чтения. По существу, @mixin – это определяемая пользователем функция. Миксины также могут принимать аргументы – это означает, что с помощью небольшого количества миксинов можно создать множество стилей.

Листинг 23. Миксины в Sass

@mixin rounded-corners($radius: 5px) { border-radius: $radius; -webkit-border-radius: $radius; -moz-border-radius: $radius; } #header { @include rounded-corners; } #footer { @include rounded-corners(10px); }

В листинге 24 представлен код из листинга 23, сконвертированный в CSS.

Листинг 24. Миксины в CSS

#header { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #footer { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }

Миксины похожи на функции и тоже могут работать с переменными. Отличие миксина от функции заключается в том, что функция всегда возвращает значение, а миксин – строки кода.

Compass

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

По существу, Compass является оберткой для CSS. Посредством CSS-спрайтов и ряда других технологий Compass берет на себя решение общих проблем CSS, таких как совместимость с браузерами, схемы и оптимизация таблиц стилей.

Так же как и Sass, Compass распространяется в виде gem-пакета Ruby. Для инсталляции Compass выполните в командной строке команду gem install compass .

После этого вы сможете использовать определенные в Compass миксины (функции), а также множество встроенных функций, классов и поддерживаемых возможностей CSS3. За дополнительной информацией о Compass обратитесь к разделу .

Заключение

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

Sass не является единственным CSS-препроцессором. Его ближайший конкурент, LESS (см. раздел ), также пользуется определенной популярностью. По большому счету, различий между Sass и LESS не так уж много. Основным преимуществом Sass является Compass – расширение, которого нет у LESS. Важно поработать с как можно большим количеством CSS-препроцессоров, чтобы понять, какой из них лучше всего подходит для ваших задач.