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

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

Статья "SASS для дизайнеров и не только" за 2013-02-21 переименована в "Синтаксис SASS " и обновлена (2014-02-17)

Sass - это препроцессорный язык; препроцессоры компилируют СSS код, который мы пишем на процессорном языке (SASS) в чистый CSS код.

Документация SASS ориентирована скорее на программистов, поэтому дизайнеры не всегда охотно начинают работать с SASS. К тому же не всегда явно указываются преимущества использования SASS с точки зрения дизайнеров.

В этой статье я хочу охватить несколько простых принципов. Я не эксперт по SASS, но должен отметить, что использовать sass мудрое решение.

Так в чем эти преимущества? Вы сможете логически структурировать ваш код, тем самым вы ускорите сам процесс написания кода; существенно сократится количество повторов (в этом нам помогут переменные), код станет намного проще поддерживать. Язык SASS упрощает работу над проектом, и все равно, кто вы - программист или дизайнер. Это действительно так.

Переменные

В SASS название переменной начинается со знака доллара ($). Значения переменных идентичны значениям свойств CSS.

Начнем с основ, а именно с переменных. Рассмотрим переменные на основе следующего примера. Мы склонны использовать в документе несколько цветов. Как результат приходится писать снова и снова значения цвета в формате hex или rgb. Если мы захотим поменять какой-либо цвет, нам придется пройтись авто-заменой по всему документу. При этом мы не можем быть уверены, что не захватим ненужное значение.

A {color: #822733;} .summary {color: #822733;} .copyright {color: #822733;}

Например, вы можете иметь несколько правил, которые определяют темно-красный цвет у нужных селекторов. Язык SASS позволяет нам поступить следующим образом: в начале документа мы можем определить переменную с именем $brand-colour и затем в документе вместо самого значение ставить наименование переменной. Затем, если нам понадобится поменять цвет, достаточно всего лишь изменить значение у переменной $brand-colour и этим мы поменяем цвет у всех правил, которые используют переменную $brand-colour .

// Моя библиотека цветов SASS $brand-colour: #822733; a {color: $brand-colour;} .summary {color: $brand-colour;} .copyright {color: $brand-colour;}

Числовые значения у переменных

Переменные могут содержать не только строки, но и цифры, которыми вы можете манипулировать. Если вы используете сетки или ваш макет масштабируется в зависимости от конкретных значений, то вы, вероятно, используете эти значений повсеместно в вашем стилевом файле. Например, если вы постоянно используете значение в 10px , то вы можете определить переменную, например, $unit = 10px . Эту переменную можно неоднократно использовать в вашем коде. Вместо имени переменной, как обычно, подставится значение (10px).

Но что делать, если вам потребуется удвоить значение переменной? Например, вы хотите в два раза увеличить нижнее поле у элемента. Используя SASS, вы можете добавить простую математику (+ , - , * , / , %), например, для нашего случая:

$unit = 10px; h1, h2, h3 { margin-bottom: $unit;} p { margin-bottom: $unit;} aside { margin-bottom: $unit*2; /* 20px */} footer{ margin-top: $unit*4; /* 40px */}

Примеси

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

Например, у вас на сайте есть разделитель, который вы используете довольно часто. Например, вы можете им разбивать основные блоки (например, articles и header) или четные параграфы. Разделитель имеет нижний отступ, нижнее поле, рамку и тень.

Чтобы создать разделитель вы можете к элементу добавить класс.shadow-border . Но это существенно "загрязнит" ваш html и css файл.

Shadow-border { border-bottom: 1px solid #a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); padding-bottom: 20px; margin-bottom: 40px; }

Если вы хотите корректную структуру в css файле и чистую html-разметку, вам нужно добавить вышеприведенное правило соответствующим html-элементам. Стоит отметить, если элементов с разделителем много, это существенно "испортит" стилевой файл, что затруднит поддержку стилевого файла.

Header, article, p.intro { border-bottom: 1px solid #a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); padding-bottom: 20px; margin-bottom: 40px; }

Используя @mixin , вы можете определить имя для блока объявлений. Это имя не должно быть связано ни коим образом с вашим HTML.

Затем, чтобы подключить примесь к элементу, вам потребуется просто подключить имя примеси: @include shadow-border;

@mixin shadow-border { border-bottom: 1px solid #a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); padding-bottom: 20px;margin-bottom: 40px;} article { @include shadow-border;} header { @include shadow-border;} p.intro { @include shadow-border;}

Выглядит неплохо.

Параметры для примесей

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

@mixin border-radius($radius: 1px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } /* USE */ .example-class{ background-color: #900; @include border-radius(20px); }

Вложение примесей

Иногда очень удобно иметь возможность вложить одну примесь в другую. Например, нам нужно добавить примесь к уже существующей примеси:

$border-colour: #a4a4a4; $unit: 10px; @mixin subtle-shadow { -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); } @mixin shadow-border { @include subtle-shadow; border-bottom: $unit/10 solid $border-colour; padding-bottom: $unit*2; margin-bottom: $unit*4;} article { @include shadow-border;} header { @include shadow-border;} p.intro { @include shadow-border;}

Вложения

Примеси не единственная вещь, которую вы можете вкладывать в селекторы CSS (или, что вернее, в блоки объявлений в sass-файле). В SASS вы можете вкладывать элементы друг в друга . Этим вы исключите повторяющиеся селекторы и упростите процесс чтения кода.

/* обычный CSS */ .module h3 { font-weight: bold;} .module p { padding-bottom: 10px;}

/* пишем на SASS */ .module { h3{ font-weight: bold;} p { padding-bottom: 10px;} }

Вложения и @media-запросы

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

/* окно просмотра - любое, включая браузеры которые не поддерживают @media */ article { font-size: 14px;line-height: 25px;} article h2 { font-size: 18px;padding-bottom: 15px;} /* для 300px окон просмотра и шире (mobile first) */ @media only screen and (min-width: 300px) { article {line-height: 20px;width: 90%;} article h2 { padding-bottom: 10px;} } /* для 600px окон просмотра и шире */ @media only screen and (min-width: 600px) { article {line-height: 25px;width: 80%;} article h2 { padding-bottom: 15px;} } /* для 900px окон просмотра и шире */ @media only screen and (min-width: 900px) { article {width: 60%;} } /* для 1200px окон просмотра и шире */ @media only screen and (min-width: 1200px) { article { font-size: 16px;line-height: 30px;width: 50%;} article h2 { font-size: 21px; line-height: 35px; padding-bottom: 20px;} }

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

Article { font-size: 14px;line-height: 25px; h2 { font-size: 18px; padding-bottom: 15px; } @media only screen and (min-width: 300px) { line-height: 20px; width: 90%; h2 { padding-bottom: 10px; } } @media only screen and (min-width: 600px) { line-height: 25px; width: 80%; h2 { padding-bottom: 15px;} } @media only screen and (min-width: 900px) { width: 60%; } @media only screen and (min-width: 1200px) { font-size: 16px;line-height: 30px; width: 50%; h2 { font-size: 21px; line-height: 35px; padding-bottom: 20px; } } }

Импортирование, оператор @import в SASS

Оператор @import
позволяет подключить содержимое стороннего CSS(SCSS)-файла в текущий CSS(SCSS)-файл.
@import не разрешается вставлять после любых объявлений кроме @charset или другого @import .

Чтобы подключить содержимое, например, _style_two.scss , необходимо писать так:

@import "style_two.scss"; /* подключаем без подчеркивания */

Важно : если подключать не конкретный файл, а папку, то css файлы не будут генерироваться для файлов начинающихся с _ .
Например, наличие файла style.scss приведёт к созданию style.css , а наличие файла _some.scss - нет. Таким образом, знак подчеркивания означает, что файл не является самостоятельной таблицей стилей и его можно лишь импортировать в другую таблицу стилей.

Циклы в SASS

Синтаксис оператора цикла (each) следующий: $var in . $var – имя переменной, и список значение переменной $var .
Вместо $var подставляется значения из , затем в стилевом файле выводится содержимое цикла (по количеству значений ).
Например:

SCSS

@each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url("/images/#{$animal}.png"); } }

Скомпилировано в:

CSS

.puma-icon { background-image: url("/images/puma.png"); } .sea-slug-icon { background-image: url("/images/sea-slug.png"); } .egret-icon { background-image: url("/images/egret.png"); } .salamander-icon { background-image: url("/images/salamander.png"); }

Оператор @extend

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

Оператор @extend позволяет избежать этих проблем, обеспечивая возможность одному селектору наследовать стили от другого селектора. Например:

SCSS

.error { border: 1px #f00; background-color: #fdd; } .error.intrusion { background-image: url("/image/hacked.png"); } .seriousError { @extend .error; border-width: 3px; }

Скомпилировано в:

CSS

.error, .seriousError { border: 1px #f00; background-color: #fdd; } .error.intrusion, .seriousError.intrusion { background-image: url("/image/hacked.png"); } .seriousError { border-width: 3px; }

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

Что такое Sass?

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

Он во многом похож на язык PHP, который является препроцессором, исполняющим скрипты на сервере, а на выходе генерирующем HTML. Также и Sass обрабатывает файлы.scss для генерации CSS файлов, которые могут использоваться браузерами.

Начиная с версии 3.8, таблицы стилей админки WordPress были портированы для использования Sass для разработки. Существует множество тем для магазинов на WordPress, разработчики которых успешно используют Sass для ускорения процесса разработки.

Используем Sass для разработки тем WordPress

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

Для начала вам необходимо установить Sass. Он может использоваться в виде командной строки, однако существуют и несколько GUI приложений для Sass. Мы рекомендуем использовать Koala , поскольку он бесплатный, с открытым исходным кодом и доступен для Mac, Windows, и Linux.

Для тестирования этого примера вам необходимо будет создать новую тему. Просто создайте новую папку в /wp-content/themes/ . Вы можете назвать ее как угодно, например ‘mytheme’. Внутри этой пустой папки создайте другую папку и назовите ее stylesheets.

В папке stylesheets создайте файл style.scss с помощью любого текстового редактора типа Блокнот.

Теперь вам нужно открыть Koala и кликнуть на иконку плюсика для добавления нового проекта. Далее, выберите вашу папку с темой и добавьте ее в свой проект. Вы заметите, что Koala автоматически найдет файл Sass в вашей папке stylesheets и отобразит его.

Кликните правой кнопкой мыши на вашем файле Sass и выберите опцию Set Output Path . Далее выберите корневую папку вашей темы, из нашего примера, это будет /wp-content/themes/mytheme/ и нажмите Enter. Koala сгенерирует CSS файл на выходе, в папке вашей темы. Для его тестирования вам необходимо открыть ваш файл Sass — style.scss — в текстовом редакторе типа Блокнот и добавить в него следующий код:

$fonts: arial, verdana, sans-serif; body { font-family:$fonts; }

Теперь сохраните изменения и возвращайтесь в Koala. Кликните правой кнопкой мыши на вашем файле Sass, после чего справа выплывет сайдбар. Для того, чтобы скомпилировать ваш файл Sass, просто кликните на кнопку ‘Compile’ . Результат вы можете увидеть, открыв файл style.css в папке вашей темы, и результатом будет следующее:

Body { font-family: arial, verdana, sans-serif; }

Обратите внимание, что мы определили переменную $fonts в нашем файле Sass. Теперь, в любом месте, где нам понадобится добавить font family, нам не потребуется снова и снова прописывать все шрифты. Мы можем просто использовать $fonts .

Что полезного Sass привносит в CSS?

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

Управление несколькими таблицами стилей

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

Что насчет CSS @import?

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

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

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; }

Теперь откройте ваш основной файл style.scss и добавьте в него нижеследующую строку в то место, где нужно импортировать файл reset.

С помощью 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 -код.

01.08.2017

В этом уроке мы рассмотрим одни из наиболее полезных и мощных функций SASS: вложение стилей, фрагментирование и импорт.

01. Вложенные стили SASS

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

Например, вот обычный CSS код:

Nav a{ text-decoration:none; }

А с помощью SASS можно создавать нечто подобное:

Nav{ a{ text-decoration:none; } }

Давайте добавим немного HTML, чтобы увидеть вложенные стили в действии.

Следудующий код представляет собой навигацию, находящуюся внутри “шапки сайта”:

Обратите внимание на правила, вложенные в другие правила:

Nav{ height: 40px; a{ display: inline-block; color: #666; text-decoration: none; padding: 0 20px; } }

А вот как выглядел бы тот же код на нативном CSS:

Nav { height: 40px; } nav a { display: inline-block; color: #666; text-decoration: none; padding: 0 20px; }

Вложение - это отличный способ организации и менеджмента вашего CSS кода.

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

Body{ header{ .container{ .row{ .left{ .logo{ img{ } } } } } } }

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

Header{ .logo{ img{ } } }

02. SASS фрагментирование - Разделение таблиц стилей

SASS фрагменты позволяют отделать небольшие части кода в отдельные файлы и использовать их позже при необходимости. Их можно импортировать с помощью команды @import и поместить в файл со стилями. С помощью фрагментов проще управлять большим количеством стилей. Если у вас есть отдельные таблицы стилей для header, вы можете назвать их _header.scss . Нижнее подчеркивание в начале дает SASS понять, что файл является фрагментом и может быть импортирован в другую таблицу стилей.

SASS фрагменты - Пример

В этот раз мы отделим SASS и CSS файлы в разные папки. Давайте создадим папку sass. Внутри папки sass создайте файл style.scss, который будет нашим основным файлом со стилями. Не нужно создавать папку CSS, так как SASS автоматически создаст ее сам.

Компиляция SASS в SCSS просходит следующим образом: откройте командную строку (возможно, понадобится открыть командную строку ruby) и вбейте:

Sass --watch sass:css

Эта команда компилирует все внутри папки SASS в CSS папку. Вы возможно заметили, что папка CSS создалась автоматически. CSS папка содержит два файла: style.css и style.css.map.

Теперь создаим новые папки внутри папки SASS: папки header, main и footer .

Внутри папки header создайте фрагмент _header.scss;
В папке main 2 фрагмента _main.scss и _aside.scss;
В папке footer один фрагмент _footer.scss.

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

Использование SASS фрагментов

Ранее упоминалось, что для подключения SASS фрагментов используется директива @import. В нашем случае style.scss должен выглядеть примерно так:

// Header @import "header/header.scss"; // Main @import "main/main.scss"; @import "main/aside.scss"; // Footer @import "footer/footer.scss";

Если вы откроете style.css после сохранения всех CSS правил, которые вы записывали в разных файлах, то увидите, что все эти правила компилированы в один CSS код. Это и есть магия SASS фрагментирования.

03. SASS импортирование

Функция импортирования в SASS позволяет нам импортировать CSS, написанный на SASS, в другой SASS файл.

Эта функция также доступна в CSS и позволяет делить CSS код на маленькие части и использовать их при необходимости.

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

Использование SASS импорта

Мы уже использовали SASS импорт в предыдущей части урока. Мы испортировали header/_header.scss в нашу таблицу стилей style.scss:

@import "header/header.scss";

Здесь нет нижнего подчеркивания, да? Это потому что мы используем подчеркивание для того, чтобы проинформировать SASS. Нет необходимости также писать расширение в конце. SASS и так уже знает, что мы импортируем только.scss файлы. В таком случае синтаксис импорта должен выглядеть вот так:

@import "header/header";

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

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

Если вы занимаетесь разработкой каскадных таблиц стилей, то 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.

Загрузите и инсталлируйте Ruby, если он еще не установлен в вашей системе.
- Для пользователей Windows: загрузите установщик Ruby для Windows (EN).
- Для пользователей Mac OS X: Ruby уже установлен в вашей операционной системе.
- Для пользователей Linux: установите Ruby с помощью любого менеджера пакетов.
Инсталлируйте 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-препроцессоров, чтобы понять, какой из них лучше всего подходит для ваших задач.