Статья "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 */ 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
позволяет подключить содержимое стороннего CSS(SCSS)-файла в текущий CSS(SCSS)-файл.
@import не разрешается вставлять после любых объявлений кроме @charset или другого @import .
Чтобы подключить содержимое, например, _style_two.scss , необходимо писать так:
@import "style_two.scss"; /* подключаем без подчеркивания */
Важно
: если подключать не конкретный файл, а папку, то css файлы не будут генерироваться для файлов начинающихся с _
.
Например, наличие файла style.scss приведёт к созданию style.css , а наличие файла _some.scss - нет. Таким образом, знак подчеркивания означает, что файл не является самостоятельной таблицей стилей и его можно лишь импортировать в другую таблицу стилей.
Синтаксис оператора цикла (each) следующий: $var in . $var – имя переменной, и
список значение переменной $var .
Вместо $var подставляется значения из , затем в стилевом файле выводится содержимое цикла (по количеству значений
).
Например:
Скомпилировано в:
Часто возникает ситуация, когда один класс должен иметь все стили другого класса, помимо своих собственных стилей. Наиболее распространенное решение это использовать два класса; первый содержит общие стили, второй – специфичные.
Оператор @extend позволяет избежать этих проблем, обеспечивая возможность одному селектору наследовать стили от другого селектора. Например:
Скомпилировано в:
27.07.2017
Эта серия туториалов по SASS предназначена для начинающих и опытных разработчиков. Это первая из четырех частей обучающих статей, в которой вы познакомитесь с этим препроцессором, установите его и узнаете о некоторых функциях.
SASS (Syntactically Awesome Style Sheets) - один из самых популярных . Он представляет собой набор функций для CSS, которые позволяют кодить быстрее и эффективнее. SASS поддерживает интеграцию с Firefox Firebug. SassScript позволяет создавать переменные, вложенные стили и наследуемые селекторы.
SASS позволяет быстро и просто писать меньше (иногда значительно меньше) CSS кода и динамично управлять им как языком программирования (кстати, это не язык программирования). Это отличный инструмент для написания более функционального и чистого CSS, который может ускорить рабочий процесс любого дизайнера и разработчика.
Большинство фронтенд фреймворков, включая Bootstrap, Materialize и Foundation, созданы с помощью этого отличного препроцессора. Знание SASS поможет вам использовать больше функций этих фреймворков.
Существует много приложений, которые позволяют легко и быстро начать использовать SASS: CodeKit, Compass, Koala и т.д. Вы узнаете о них в других частях туториала. В этой главе мы не будем использовать никаких приложений или инструментов кроме тех, которые необходимы для запуска SASS на компьютере. Вам не придется волноваться об операционной системе, потому что всё будет понятно всем пользователям.
Установить SASS можно только на машину, на которой уже есть Ruby:
После установки Ruby на вашу машину можно установить SASS. Давайте откроем командную строку Ruby и установим SASS на вашу систему:
Gem install sass
Если команда выше не сработает, то вам, возможно, придется использовать sudo команду:
Sudo gem install sass
Если вы хотите проверить версию SASS используйте следующую команду:
SASS установлен. Давайте создадим папку проекта и назовем ее sass-basic. Создайте базовый html файл со следующим кодом:
Hello friend I am learning SASS and it"s really awesome.
Body{ text-align: center; } h1{ color: #333; } p{ color: #666; }
Теперь нужно компилировать этот файл используя командную строку/терминал. Давайте откроем командную строку в той же директории (возможно, придется использовать командную строку Ruby, если обычная командная строка не работает). Вбейте следующее и нажмите Enter:
Sass --watch style.scss:style.css
Вы заметите, что сгенерировались новые файлы: style.css и style.css.map. Стоит отметить, что не нужно трогать map файл, также как и.css файл. Если вы хотите внести какие-то изменения, то это можно сделать через style.scss. Вам не понадобится повторять этот процесс при каждом изменении стилей. Компиляция SASS будет работать автоматически при внесении изменений в.scss файл.
В следующей главе мы рассмотрим SASS переменные, и почему они являются самой полезной функций SASS (и в любом другом CSS препроцессоре).
Если вы — начинающий дизайнер тем WordPress, то вы, вероятно, уже столкнулись с проблемой длинных CSS файлов, ведь при этом нужно сохранять их структурированность, масштабируемость и читабельность. Также вы, наверняка, слышали, что многие дизайнеры и фронт-энд разработчики рекомендуют использовать язык препроцессоров CSS, таких как Sass или LESS. Но что это такое? как начать с ними работать? В этой статье мы покажем вам, как начать свою работу с Sass. Также мы расскажем, что такое CSS препроцессор, зачем он нужен и как его установить и правильно использовать.
Тот CSS, который используем мы, был разработан для того, чтобы создавать таблицы стилей для сайтов. однако, по мере развития веба и нужд дизайнеров, потребовался язык таблиц стилей, который бы позволил делать больше с меньшими затратами сил и времени. Языки CSS-препроцессоров, типа Sass, позволяют нам использовать функции, которые на текущий момент не доступны в CSS, например, использование переменных, базовые математические операторы, вложенные правила, миксины и т.д.
Он во многом похож на язык PHP, который является препроцессором, исполняющим скрипты на сервере, а на выходе генерирующем HTML. Также и Sass обрабатывает файлы.scss для генерации CSS файлов, которые могут использоваться браузерами.
Начиная с версии 3.8, таблицы стилей админки WordPress были портированы для использования Sass для разработки. Существует множество тем для магазинов на WordPress, разработчики которых успешно используют Sass для ускорения процесса разработки.
Большинство разработчиков тем используют для работы локальный хостинг, прежде чем выкатывать тему на живой сайт. В виду того, что 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 невероятно мощный, обладает обратной совместимостью, и крайне прост в изучении. Как мы упоминали ранее, вы можете создавать переменные, вложенные правила, миксины, использовать импорт, математические и логические операторы и т.д. Сейчас мы покажем вам несколько примеров, а вы сможете попробовать применить их на своей теме 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 максимум пользы…
Изначальное определение правильной структуры сайта является жизненно важным для любого нового проекта на 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";
Переменные являются одним из наиболее простых элементов Sass , но некоторые разработчики все еще время от времени используют их неправильно. Разработка конвенции о присвоении имен по всему сайту имеет важное значение для работы с переменными. Без нее они менее понятны и возможно их дублированное использование.
Вот некоторые советы по эффективному применению переменных:
Вот несколько примеров эффективного использования:
$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;
Примесь — это отличный способ включить раздел кода несколько раз в пределах сайта. Тем не менее, включение примеси это то же самое, что копирование и вставка стилей в файл 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 .
В отличие от примесей, заполнители могут быть использованы несколько раз без добавления какого-либо повторяющегося кода. Это делает их гораздо более удобными для вывода чистого 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); }
Функции используются для выполнения вычислений. Функция 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% }
Поместите все примеси, функции, заполнители и переменные в соответствующие им файлы частичных шаблонов. Хранение блоков кода в отдельных группах обеспечивает возможность легко редактировать их и повторно использовать в будущем.
Глобальные элементы должны храниться в базовой папке. Базовая папка должна содержать глобальные переменные, такие как шрифты и цветовые схемы:
$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;
Чрезмерное использование вложенных правил Sass может стать причиной различных проблем, от слишком большой сложности кода и до сверх специфичности и перекоса в сторону HTML -структуры страницы. Это может привести к дальнейшему увеличению количества проблем и необходимости включения !important , чего по возможности следует избегать.
Вот некоторые золотые правила для вложений:
В завершающем пункте этой статьи я бы отметила, что вы должны стараться, чтобы все элементы были настолько простыми, насколько это возможно. Цель Sass — написать более чистый, более управляемый CSS -код.
Sass позволяет правилам css, быть вложенными друг в друга. Внутреннее правило применяется только в пределах внешнего селектора правила. По другому тут никак не перевести, фраза умная, на деле же все проще, просто посмотрите пример:
Scss - файл
#main p {
color : #00ff00 ;
width : 97% ;
Redbox {
background-color : #ff0000 ;
color : #000 ;
Скомпилированный CSS
1 2 3 4 5 6 7 8
#main p {
color : #00ff00 ;
width : 97% ;
#main p .redbox {
background-color : #ff0000 ;
color : #000 ;
Это помогает избегать повторения родительского селектора, и помогает гораздо проще воспринимать группу css слоев с большим количеством вложенных селекторов. Например:
Scss - файл
10 11 12
#main {
width : 97% ;
p , div {
font-size : 2em ;
font-weight : bold ;
pre {
font-size : 3em ;
Скомпилированный CSS
11 12 13 14
#main {
width : 97% ;
#main p ,
#main div {
font-size : 2em ;
#main p a ,
#main div a {
font-weight : bold ;
#main pre {
font-size : 3em ;
Не понятно почему разработчики sass-а так это назвали. Вообще, если по простому, то это можно назвать ссылкой на самого себя. Если я не ошибаюсь, то в less-ой документации это так и называется (напомню, less многие вещи брал из sass-а, данную конструкцию он тоже позаимствовал). Многие наверно зададутся вопросом, а для чего это нужно? Начнем с того, что без данной конструкции невозможно бы было реализовать ни один псевдокласс. Или другой пример, нам нужно предусмотреть другие стили элемента в зависимости от того какой класс имеет body html документа. Покажу на примере из официальной документации.
Scss - файл
1 2 3 4 5 6 7 8 9 10
font-weight : bold ;
text-decoration : none ;
&:hover {
text-decoration : underline ;
body .firefox & {
font-weight : normal ;
Скомпилированный CSS
1 2 3 4 5 6 7 8 9 10
font-weight : bold;
text-decoration : none ;
a :hover {
text-decoration : underline ;
body .firefox a {
font-weight : normal ;
Я думаю с псевдоклассами все понятно. Давайте поподробнее рассмотрим строчку body.firefox & . Что здесь происходит? Если ссылка на самого себя появляется за каким-то элементом (тут может быть как одиночный html элемент, так и класс, id-ик, абсолютно не важно), то это говорит компилятору что такое его расположение отменяет стандартную вложенность элементов. Компилятор выбьет такой элемент из стандартного потока. Если посмотреть на пример выше, то может сложиться ощущение, что будет скомпилирована css-ка в которой будет a body.firefox a , но нет. Ссылка на самого себя идет за элементом с классом, поэтому компилятор сгенерит body.firefox a (стандартная вложенность элементов отменена). Это достаточно фундаментальная вещь, и это нужно понимать. Новички которые только-только перешли на какой-нибудь препроцессор не совсем понимают как работает ссылка на самого себя, и частенько пишут код который не работает. Это просто нужно запомнить.
Scss - файл
1 2 3 4 5 6 7 8 9
#main {
color : black ;
font-weight : bold ;
&:hover {
color : red ;
Скомпилированный CSS
1 2 3 4 5 6 7 8 9
#main {
color : black
#main a {
font-weight : bold ;
#main a:hover {
color : red ;
В примере выше видно, что ссылка на самого себя &:hover вложена в #main и вложена в a , она стоит отдельно, перед ней нет никаких элементов, поэтому срабатывает стандартная вложенность и компилятор сгенерит #main a:hover .
В разные времена мир преживал технические революции. Это происходило скачками. Грубо говоря бронза, и бац, наступил железный век. Сейчас мы не знаем кто изобрел колесо или плуг, но в то время эти открытия носили революционный характер и изменили жизнь как отдельных людей, так и всего человечества. В жизни веба, если взять конкретнее, то в жизни верстальщиков, были три нововведения которые изменили их жизнь, притом изменили ее кардинально. Первое это конечно же каскадные таблицы стилей, но это было на заре веба. Второе это jquery, теперь путешествие по DOM модели стало простым и удобным, плюс разные эффекты. И третье, это уже более современное время, это БЭМ. Согласитесь круто написать что-то один раз, а потом без проблем использовать это на разных проектах. Следующая конструкция языка sass поможет вам в этом.
Scss - файл
1 2 3 4 5 6
#main {
color : black ;
&-sidebar {
border : 1px solid red ;
Скомпилированный CSS
1 2 3 4 5 6
#main {
color : black ;
#main-sidebar {
border : 1px solid red ;
Я брал пример из документации. В реальной жизни согласно БЭМ это будет не id-ик #main а .main , но суть от этого не изменится. Приведу простой
