Что такое Sass и как его использовать. Использование SASS импорта

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

Что такое 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 синтаксис.

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

--watch

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

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

--update

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

Практика

@import

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

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

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

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

#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;
Переменные у нас не типизированные, поэтому с равным успехом могут содержать строки, числа и цвета.

@математика

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 для дизайнеров и не только" за 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.

@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;}

Затем, чтобы подключить примесь к элементу, вам потребуется просто подключить имя примеси: @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

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

CSS

Оператор @extend

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

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

SCSS

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

CSS

Прежде, чем Вы сможете использовать 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% ; }

13260

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

@import

Sass расширяет правило CSS @import, добавляя возможность импортировать файлы SCSS/Sass. Обычно мы используем это правило, чтобы импортировать Sass файлы в основной файл. Импорт файла дает доступ ко всем миксинам и переменным в этом файле.

Sass по умолчанию ищет другие файлы в текущей директории, а потом в директории Sass под Rails. Вы также можете задать дополнительные папки, в которых будут искаться файлы. Например, если вы используете Compass, вы можете задать настройку sass_dir в config.rb.

Директива @import ищет файлы Sass, но будет скомпилирована в CSS директиву @include при следующих условиях:

• Расширение файла.css
• Имя файла начинается с http://
• Имя файла — это url()
• @import содержит медиа запросы

Если расширение файлы.scss или.sass, файл будет импортирован. Если расширение не указано, Sass попытается найти файл с таким именем и соответствующим расширением. Например:

@import "sample.scss"; @import "sample";

Оба эти выражения валидны, будет импортирован файл sample.scss. Второй @import также подключит файл sample.sass, если он существует.

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

@import "sample1", "sample2", "sample3";

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

@import "myStyles"; @import "myVariables";

Если мы импортируем файлы в таком порядке, который показан выше, то получим ошибку, т.к. myStyles использует переменные, которые еще не определены.

@import "myVariables"; @import "myStyles";

Это правильный способ, потому что переменные будут импортированы раньше.

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

Когда мы импортируем SCSS/Sass файл, он компилируется в отдельный CSS файл с тем же именем. Обычно мы все же хотим собрать все SCSS/Sass файлы в один CSS. Чтобы каждый файл не компилировался в отдельный CSS, файлы можно импортировать как фрагменты, для этого достаточно добавить символ подчеркивания перед именем файла. Подчеркивание говорит Sass, что данный файл не нужно компилировать в отдельный CSS, нужно вставить в текущий файл его содержимое вместо выражения @import.

Когда мы импортируем фрагмент, символ подчеркивания указывать не нужно. Давайте переименуем файл myVariables в _myVariables. Подключается он так же, как и раньше.

@import "myVariables";

Разница в том, что файл myVariables.css не будет создан, содержимое импортируется в основной CSS файл. Важно помнить, что не должно быть фрагмента и отдельного файла в одной и той же директории. Файлы _myVariables.scss и _myVariables.scss должны лежать в разных папках.

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

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

Try { color: blue; }

Мы можем импортировать этот файл в основной.

#why { @import "test"; }

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

#why .try { color: blue; }

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

@media

Директива @media похожа на директиву @media из CSS, с той лишь разницей, что она может находиться внутри правил. Если директива @media находится внутри правила, при компиляции она всплывает на верхний уровень.

Container { width: 60%; @media (min-width: 200px) and (max-width:600px) { width: 100%; } }

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

Container { width: 60%; } @media (min-width: 200px) and (max-width: 600px) { .container { width: 100%; } }

Мы получили отдельное правило для нашего медиа-запроса, хотя в Sass оно было вложено внутри.container. Также мы можем вкладывать директивы @media друг в друга. Эти запросы будут объединены по И.

@media screen { .main { @media (max-width: 600px) { width: 100%; } @media (min-width: 700px) { width: 70%; } } }

@media screen and (max-width: 600px) { .main { width: 100%; } } @media screen and (min-width: 700px) { .main { width: 70%; } }

При компиляции получилось два медиа-запроса. Наконец, мы можем использовать переменные, функции и операторы в медиа-запросах.

$format: screen; $mobile: 500px; $tablet: 800px; $desktop: 1200px; @media #{$format} { .menu { @media (max-width: $mobile) { width: 100%; } @media (max-width: $tablet) { width: 60%; } @media (max-width: $desktop) { width: 30%; } } }

В примере выше мы использовали переменную $format и различные переменные для разных типов устройств во вложенных запросах. Получим:

@media screen and (max-width: 500px) { .menu { width: 100%; } } @media screen and (max-width: 800px) { .menu { width: 60%; } } @media screen and (max-width: 1200px) { .menu { width: 30%; } }

@extend

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

Main { color: black; font-size: 12px; } .emphasis { font-weight: bold; }

Это прекрасно работает, но для выделенного текста нужно использовать оба класса: