Телевизор 

Препроцессор Sass. Полное руководство и зачем он нужен. Основы Sass

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

Если вы уже знакомы с Sass/Scss, установили его и готовы начать пользоваться им, то вы можете прочитать вот эту запись — « ». В ней я описываю все тонкости препроцессора, а так же как правильно пользоваться им.

Что такое Sass?

Sass — это разновидность препроцессора, который поможет вам во время разработки front-end части. Факт в том, что CSS файлы становятся все больше и больше и через некоторое время с ними становится сложнее работать.

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

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

Как установить Sass?

Чтобы начать использовать Sass вам нужно скачать и установить Ruby с официального сайта, прописать одну команду в консоль (чтобы установить Sass) и все готово. Ниже весь процесс расписан поэтапно.

  1. Устанавливаем Ruby . Заходим на официальный сайт в раздел загрузки , выбираем билд (версию) Windows и скачиваем. Например, я использую Windows 7 (64 битовую), поэтому я буду скачивать Ruby 2.2.4 (x64) .
  2. Следуйте всем указаниям установщика.
  3. После успешной установки Ruby откройте Windows консоль и пропишите gem install sass и после этого запустится процесс установки Sass. Если во время установки у вас выдает ошибку, то попробуйте поменять gem на sudo и в итоге у вас должна получиться вот такая строка sudo gem install sass .

Тестируем

После того как вы установили Sass, вам нужно убедиться, что вы сделали все правильно. Сделать это можно в два простых этапа.

  1. Откройте командную строку Windows
  2. Пропишите туда sass -v . Если вы все правильно установили, то у вас должно появиться что-то вроде такой строки Sass 3.4.19 (Selective Steve) .

PS. Если у вас ничего не выводиться, возможно вы не находитесь в правильной директории. Для начала вам нужно прописать cd и дальше путь до того места куда вы установили Ruby. В моем случае это будет вот так cd D:\Programs\Ruby22\bin\ . После того как вы попадете в эту директиву, вам нужно прописать sass -v . Если у вас все равно ничего не показывает, то повторите процесс установки с самого начала и после чего вернитесь снова сюда.

Применяем Sass в работе

Для начала давайте создадим простой файл, который будет называться style.scss и внутри мы напишем следующее:

Main-wrapper { width: 1024px; margin: 0 auto; .sidebar { float: left; width: 30%; } .container { width: 67%; float: right; } }

Обратите внимание, что формат файла.scss, а не.css. Для.scss используется немного другой синтаксис, но он элементарный и вполне понятный с самого начала (если вы раньше когда-либо использовали css). А если вы читаете эту статья, я ожидаю, что вы уже знакомы с ним.

И так продолжим с style.css:

Как вы можете заметить, Sass взял все содержимое файла style.scss и сделал из него обычный CSS файл.

Так же обратите внимание, что в scss, все стили пишутся в древовидном виде (то есть класс внутри класса).

Например это:

Main-wrapper { display: block; .sidebar { float: left; width: 30%; .block { display: none; } } }

Превратиться в:

Main-wrapper { display: block; } .main-wrapper .sidebar {float: left; width: 30%;} .main-wrapper .sidebar .block {display: none; }

Конечно же SCSS намного удобнее.

Вот некоторые из плюсов SCSS:

  • Группирование стилей
  • Возможность быстро найти нужный класс/id
  • Использование одних и тех же стилей в нескольких местах

Вы намерное спросите, а что такое --watch ? Данная команда принуждает Sass следит за каждым изменением style.scss. То есть каждый раз, когда вы будите сохранять новую копию этого файла, Sass обратит на это внимание и скомпилирует свежую версию CSS.

PS. Если у вас уже имеется скомпилированая версия CSS в той же папке где и style.scss, то он их перезапишет на более новую.

Важные моменты

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

Для того, чтобы создать CSS файл, изначально нужно создать SCSS файл в котором указывать стили для компиляции CSS.

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

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

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

Синтаксис

Для Sass доступно два синтаксиса. Первый, известный как SCSS (Sassy CSS) и используемый повсюду в этой статье - это расширенный синтаксис CSS. Это означает, что каждая валидная таблица стилей CSS это валидный SCSS файл, несущий в себе туже самую логику. Более того, SCSS понимает большинство хаков в CSS и вендорные синтаксисы, например такой как синтаксис фильтра в старом IE. Этот синтаксис улучшен Sass функционалом описанным ниже. Файлы использующие этот синтаксис имеют.scss расширение.

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

Любой синтаксис может импортировать файлы, написанные в другом. Файлы могут быть автоматически сконвертированы из одного в другой, используя sass-convert команду:

# Convert Sass to SCSS $ sass-convert style.sass style.scss # Convert SCSS to Sass $ sass-convert style.scss style.sass

Использование Sass

Sass может быть использован тремя способами: как командной строкой, как отдельный модуль Ruby и как плагин для rack-фреймворка, включая Ruby on Rails и Merb. Первым делом для всего этого надо установить Sass гем:

Если вы на Windows, то возможно вам надо установить сначала Ruby.

Для запуска Sass из командной строки просто используйте:

sass input.scss output.css

Вы также можете указать Sass следить за файлом и обновлять CSS каждый раз, когда Sass файл меняется:

sass --watch input.scss:output.css

Если у вас есть директория с множеством Sass файлов, то вы также можете указать Sass следить за всей директорией:

sass --watch app/sass:public/stylesheets

Используйте sass --help для полной документации.

Селекторы

CSS vs. SCSS селекторы.

#main { color: #999; } #main .content { color: #bfbfbf; }

CSS отрывок выше, может быть написан в SCSS таким образом:

#main{ color: #999; .content{ color: #bfbfbf; } }

Как мы можем видеть, SCSS структура более схожа с DOM структурой. Это позволяет нам организовать наш CSS более эффективно. Вот примеры:

#main h1 { color: #00ff00; width: 97%; .title { background-color: #ff0000; color: #000000; } }

Будет скомпилировано в:

#main h1 { color: #00ff00; width: 97%; } #main h1 .title{ background-color: #ff0000; color: #000000; }

Ссылаясь на родительский селектор:

#wrapper h1{ width:20px; &:hover{ width:25px; } }

& будет заменен родительским селектором. То есть код выше, будет эквиалентен:

#wrapper h1{ width:20px; } #wrapper h1:hover{ width:25px; }

Импорты

Нормальный импорт.

@import “foo.css”; //импортирует foo.css @import “foo” screen; //импортирует foo.scss @import “foo.scss” screen; //импортирует foo.scss @import “foo1”,”foo2" screen; //импортирует foo1.scss и foo2 scss

Частичный

Если вы не хотите компилировать SCSS файл как CSS, вы можете использовать “ _ ” перед названием файла.

@import “colors”; //_colors.scss будет импортирован @import “utils/foo.scss”; // Это импортирует fo.scss в папку utils.

Вложенные импорты:

Если demo.scss включает в себя:

Example { color: red; }

#main { @import “demo”; }

Будет скомпилировано в

#main .example { color: red; }

Переменные

SCSS переменные начинаются с символа $ .

$width: 10px; $headercolor:red; #main h1{ width: $width; color:$headercolor; }

Будет скомпилировано в:

#main h1{ width: 10px; color:red; }

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

#main { $width: 5em !global; width: $width; } #sidebar { width: $width; }

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

Вы также можете производить разные операции в SCSS. Для примера:

P { font: 10px/8px; // Чистый CSS без деления $width: 1000px; width: $width/2; // Использование переменных в делении width: round(1.5)/2; // Использование функции и деления height: (500px/2); // Использование скобок и деления margin-left: 5px + 8px/2px; // Использование сложения и деления font: (italic bold 10px/8px); // В списке, скобке на учитываются }

Скомпилируется в:

Вставка: #{}

Вы можете использовать переменные в свойствах имен и значения, используя #{} . Для примера:

$name: foo; $attr: border; p.#{$name} { #{$attr}-color: blue; }

Скомпилируется в:

P.foo { border-color: blue; }

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

@if

p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } @if null { border: 3px double; } }

Скомпилируется в:

P { border: 1px solid; }

@for

@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }

Скомпилируется в:

Item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }

@each

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) { #{$header} { font-size: $size; } }

Скомпилируется в:

H1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.2em; }

@while

$i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; }

Скомпилируется в:

Item-6 { width: 12em; } .item-4 { width: 8em; } .item-2 { width: 4em; }

Миксины

Миксины позволяют вам определять стили, которые могут быть переиспользованы на протяжении всей таблицы стилей. Вы можете думать о миксинах, как о функциях в каком-либо другом языке програмирования. Вы можете передавать переменные, также как в функциях любого другого языка програмирования. В SCSS миксины возврашают набор CSS правил. Вы можете использовать миксины так @include имя-миксина, определенное директивной @mixin .

Рассмотрите следующий пример:

@mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000; } .page-title { @include large-text; padding: 4px; margin-top: 10px; }

Скомпилируется в:

Page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px; }

Вы также можете использовать составные миксины, например как:

@mixin mixin-one{ color: red; } @mixin mixin-two{ width:20px; } .page-title { @include mixin-one; @include mixin-two; }

Вы также можете передавать переменные в миксинах:

$globel-prefixes:webkit moz ms o; @mixin prefixer ($property,$value,$prefixes:null){ @if $prefixes==null{ @each $prefix in $globel-prefixes { -#{$prefix}-#{$property}: $value; } } @else { @each $prefix in $prefixes { -#{$prefix}-#{$property}: $value; } } #{$property}: $value; } *{ @include prefixer(box-sizing,border-box); }

Будет скомпилено в:

*{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }

Функции

Вы также можете определять функции, возвращающие значение. Для примера.

$no-of-columns:12; $gutter-width:2%; @function get-column-width($i){ @return (100% - ($no-of-columns/$i - 1) * $gutter-width) / $no-of-columns * $i; } .col-6 { width:get-column-width(6); }

Будет скомпилировано в:

Col-6 { width: 49%; }

Расширения

Вы столкнетесь с ситуацией, когда вам нужно будет переиспользовать стили. Рассмотрите следующий пример:

Оба будут иметь одинаковые стили, кроме цвета.

Btn{ margin:10px; color:black; width:200px; height:100px; } .btn-blue{ @extend .btn; background:blue; }

Это будет скомпилировано в:

Btn,.btn-blue{ margin:10px; color:black; width:200px; height:100px; } .btn-blue{ background:blue; }

Вы также можете связывать расширения и использовать несколько расширений в одном CSS селекторе.

Если вы не хотите, чтобы директива расширения была скомпилена в CSS, вы можете использовать % перед селектором.

%btn{ margin:10px; color:black; width:200px; height:100px; } .btn-blue{ @extend %btn; background:blue; } .btn-red{ @extend %btn; background:red; } Будет скомпилировано в: .btn-blue{ margin:10px; color:black; width:200px; height:100px; background:blue; } .btn-red{ margin:10px; color:black; width:200px; height:100px; background:red; }

Статей про 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. Установите 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 и LESS. Разберем как работать с препроцессором SASS.

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

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

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

Переменные

Думайте о переменных, как о способе хранения информации, которую вы хотите использовать на протяжении написания всех стилей проекта. Вы можете хранить в переменных цвета, стеки шрифтов или любые другие значения CSS, которые вы хотите использовать. Чтобы создать переменную в 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. Но помните, что чрезмерное количество вложенностей делает ваш документ менее читабельным и воспринимаемым, что считается плохой практикой.

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

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.

// _reset.scss html, body, ul, ol { margin: 0; padding: 0; } // base.scss @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:

@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include 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-файл в «чистоте». В нашем примере мы покажем вам как сделать стили оповещений об ошибках, предупреждениях и удачных исходов.

Message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } .error { @extend .message; border-color: red; } .warning { @extend .message; border-color: yellow; }

Вышеуказанный код позволяет взять свойства CSS из.message и применить их в.success, .error и.warning. Во время компиляции CSS-файла работает магия, которая поможет вам избежать написания лишних классов в HTML элементах. Результат выглядит вот так:

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.

Container { width: 100%; } article { float: left; width: 600px / 960px * 100%; } aside { float: right; width: 300px / 960px * 100%; }

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

Container { width: 100%; } article { float: left; width: 62.5%; } aside { float: right; width: 31.25%; }

Практический пример:

В своем файле HTML нам нужен лишь очень простой код и ссылка на файл CSS в папке CSS нашего проекта.

Simple CSS3 Button

Вот и весь нужный нам HTML! Теперь перейдем к Sass. Войдите в любимый текстовый редактор и создайте новый файл, сохраните его в папку sass и назовите style.scss. Чтобы было проще, мы будем писать все в SCSS, который Sass тоже умеет обрабатывать, да и SCSS не очень-то строг с новичками. В начале своего файла мы напишем базовый сброс для HTML, импорт для Compass и пропишем переменные цвета для кнопки.

@import "compass"; //Простой сброс body, div, a { margin: 0; padding: 0; border: 0; } a {text-decoration: none;} a:focus {outline: 0;} //Переменные цвета $button-colour: #2e6bc6; $button-start: #37a0dc; $button-stop: #2068a6; $border: #163861; $text-shadow: #06304b; //Цвета при проведении мышью $button-hover-colour: #2e7dc6; $button-hover-start: #3f9ff0; $button-hover-stop: #2874a9; $focus-shadow: #0b3c5f; //Основные стили body { font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; }

Вверху файла мы вызываем Compass, чтобы включить его в файл и попозже воспользоваться абстрактными классами. Кроме того, мы написали простой сброс и уже употребили одно свойство: переменные. Это дает нам возможность хранить значения, которые мы будем постоянно использовать в своем CSS, включая цвета, значения шрифтов и многие другие! Здесь я применяю их для хранения использованных в кнопке цветов и для упрощения из записи, а также для повторного использования в таблице стилей.

Назначение стилей кнопке

.button { width: 158px; height: 30px; margin: 120px auto; font-size: 16px; font-weight: bold; text-align: center; display: block; color: #fff; padding: 7px 0 0; border: 1px solid $border; text-shadow: 0 -1px 0 $text-shadow; position: relative; }

Давайте назначим стили этой кнопке! Мы начнем с применения основных стилей к тэгу с классом button. Я установил здесь базовые стили кнопки, и обратите внимание на то, как я употребляю переменные.

А теперь перейдем к интересной части! Помните импорт Compass, помещенный в начале таблицы стилей? Здесь мы воспользуемся им, потому что у Compass есть большая библиотека встроенных классов, которые включают префиксы CSS3 для тех браузеров, которым все еще нужна префиксная поддержка.

Button { width: 158px; height: 30px; margin: 120px auto; font-size: 16px; font-weight: bold; text-align: center; display: block; color: #fff; padding: 7px 0 0; border: 1px solid $border; text-shadow: 0 -1px 0 $text-shadow; position: relative; //Классы Compass @include background($button-colour linear-gradient(top, $button-start 20%, $button-stop)); @include border-radius(3px); @include box-shadow(inset 0 1px 0 rgba(#fff, 0.8)); @include transition(all 0.3s ease); }

После первоначального определения стилей мы можем включить несколько абстрактных классов для фоновых цветов, линейных градиентов, радиусов рамки и переходов. Лучше всего то, что все будет компилироваться только с нужными префиксами, и сэкономит нам на их написании время! Класс пока будет компилироваться в файле style.css в следующее:

Button { width: 158px; height: 30px; margin: 120px auto; font-size: 16px; font-weight: bold; text-align: center; display: block; color: #fff; padding: 7px 0 0; border: 1px solid #163861; text-shadow: 0 -1px 0 #06304b; position: relative; background: #2e6bc6 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #37a0dc), color-stop(100%, #2068a6)); background: #2e6bc6 -webkit-linear-gradient(top, #37a0dc 20%, #2068a6); background: #2e6bc6 -moz-linear-gradient(top, #37a0dc 20%, #2068a6); background: #2e6bc6 -o-linear-gradient(top, #37a0dc 20%, #2068a6); background: #2e6bc6 linear-gradient(top, #37a0dc 20%, #2068a6); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

Написание стилей с вложенными элементами

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

Button { &:hover { @include background($button-hover-colour linear-gradient(top, $button-hover-start 20%, $button-hover-stop)); @include box-shadow(inset 0 1px 1px rgba(#fff, 0.95)); } &:active { @include background(linear-gradient(bottom, $button-start 20%, $button-stop)); text-shadow: 0 1px 0px $text-shadow; @include box-shadow(inset 0 2px 8px $focus-shadow); } }

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

Button:hover { background: #2e7dc6 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3f9ff0), color-stop(100%, #2874a9)); background: #2e7dc6 -webkit-linear-gradient(top, #3f9ff0 20%, #2874a9); background: #2e7dc6 -moz-linear-gradient(top, #3f9ff0 20%, #2874a9); background: #2e7dc6 -o-linear-gradient(top, #3f9ff0 20%, #2874a9); background: #2e7dc6 linear-gradient(top, #3f9ff0 20%, #2874a9); -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95); -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95); } .button:active { background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(20%, #37a0dc), color-stop(100%, #2068a6)); background: -webkit-linear-gradient(bottom, #37a0dc 20%, #2068a6); background: -moz-linear-gradient(bottom, #37a0dc 20%, #2068a6); background: -o-linear-gradient(bottom, #37a0dc 20%, #2068a6); background: linear-gradient(bottom, #37a0dc 20%, #2068a6); text-shadow: 0 1px 0px #06304b; -webkit-box-shadow: inset 0 2px 8px #0b3c5f; -moz-box-shadow: inset 0 2px 8px #0b3c5f; box-shadow: inset 0 2px 8px #0b3c5f; }

Выше показано, что получается после того, как состояния:active и:hover компилируются в Sass’е; они написаны, как селекторы псевдоклассов к родительскому элементу в действенном CSS, а также нужный нам CSS, дополненный альтернативами, для завершения нашей кнопки с тремя состояниями.

Файл style.scss и скомпилированная таблица стилей

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