Вложенные правила языка SASS. Что насчет CSS @import? Использование 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.

@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

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

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 .

1. Внутри папки header создайте фрагмент _header.scss;
2. В папке main 2 фрагмента _main.scss и _aside.scss;
3. В папке 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. Установите Sass для того, чтобы разобраться во всех возможностях Sass.

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

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

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

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

• Переменные

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

  Синтаксис SCSS

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

  Синтаксис Sass

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

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

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

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

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

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

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

  Синтаксис SCSS

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

  Синтаксис Sass

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

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

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

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

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

• Импорт

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

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

  Синтаксис SCSS

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

  Синтаксис Sass

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

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

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

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

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

  Синтаксис SCSS

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

  Синтаксис Sass

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

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

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

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

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

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

  Синтаксис SCSS

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

  Синтаксис Sass

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

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

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

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

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

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

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

  Синтаксис SCSS

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

  Синтаксис Sass

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

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

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

Что такое Sass, зачем он нужен, его возможности, установка и как его использовать в своих проектах

Что такое Sass

Sass (Syntactically Awesome Stylesheets) - это один из самых развитых, стабильных и многофункциональных препроцессоров. Пользуется большой популярностью у разработчиков. Sass - это более продвинутая версия CSS, которая имеет гораздо бо́льший набор возможностей, а также Sass предназначен для упрощения каскадных таблиц стилей.

Синтаксис Sass имеет 2 вида: SASS и SCSS . SCSS - более похож на CSS, а SASS - отличается отсутствием фигурных скобок. Вложенные элементы реализованы за счёт отступов. Именно такой синтаксис мы будем здесь использовать.

Зачем нужен Sass

Чтобы понять, зачем нужен Sass, перечислим его некоторые возможности :

1. Sass позволяет вкладывать правила CSS друг в друга
2. Вложенность свойств
3. Использование переменных
4. Поддержка арифметических операций
5. Операции с цветами
6. Возможность импортировать в sass файл sass , scss и css файлы
7. Использование миксинов
8. И многое другое

Если коротко зачем нужен Sass: он ускоряет и упрощает процесс разработки.

Как использовать Sass

Существуют разные способы начать использовать Sass:

1. C помощью приложений (Koala, CodeKit, Compass и другие)
2. C помощью командной строки
3. Используя таск-менеджеры
4. Простым конвертированием Sass в CSS с помощью онлайн-сервисов

Рассмотрим использование Sass для таск-менеджера Gulp . Перед тем как начать установку, желательно ознакомиться с основами Gulp .

Установка и подключение gulp-sass

Для установки плагина gulp-sass в наш проект, откроем командную строку в папке проекта. Введём следующую команду:

npm i gulp - sass -- save - dev

Плагин будет установлен в папку node_modules и будет добавлена соответствующая запись в файле package.json. После успешной установки нам нужно подключить наш пакет в файле gulpfile.js .

var gulp = require ("gulp" ); sass = require ("gulp-sass" );

Теперь создадим таск sass .

gulp . task ("sass" , function (){ return gulp . src ("app/sass/main.sass" ) . pipe (sass (). on ("error" , sass . logError )) . pipe (gulp . dest ("app/css" )); });

gulp.src - Что берём для обработки

.pipe(sass()) - Конвертируем Sass в CSS

sass() - в скобках можно задать дополнительные настройки отображения CSS на выходе.
Например, sass({outputStyle: "expanded "}) - полностью развёрнутый CSS.
Другие значения: nested (по умолчанию), compact - каждый селектор на разной строке, compressed - всё в одну строку.

Если вдруг мы допустим ошибку, то можно вывести на экран сообщение в каком месте она находится. Для этого добавим .on("error", sass.logError) .

Выполним наш созданный таск gulp-sass . В командной строке введём gulp sass .

Gulp автоматически преобразовал SASS в CSS и создал файл main.css .

Если нужно выбрать не один файл, а несколько, то можно выбрать все файлы сразу. Для этого изменим немного строку, где мы выбираем sass-файлы для конвертации:

gulp . src ("app/sass/**/*.sass" )

sass/**/*.sass - означает выбор всех файлов (с расширением .sass ) во всех папках папки sass.

Резюмируем: подключили плагин gulp-sass , создали таск sass и добавили вывод ошибки (если таковая возникнет). Теперь можно сделать дефолтный таск. Т.е. наш такск gulp-sass будется запускаться командой gulp .

gulp . task ("default" , [ "sass" ]);

Получаем следующий gulpfile.js

var gulp = require ("gulp" ); var sass = require ("gulp-sass" ); gulp . task ("sass" , function (){ return gulp . src ("app/sass/**/*.sass" ) . pipe (sass (). on ("error" , sass . logError )) . pipe (gulp . dest ("app/css" )) }); gulp . task ("default" , [ "sass" ]);

Рассмотрим некоторые возможности Sass на примерах

Их огромное количество, рассмотрим лишь самые популярные. С полным списком можно ознакомиться на официальном сайте .

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

Вложенность свойств

Использование переменных $

Арифметические операции с числами

Арифметические операции с цветами

Перевод статьи: The Absolute Beginner’s Guide to Sass.
Andrew Chalkley.

Что такое SASS?

SASS является аббревиатурой от Syntactically Awesome Stylesheets — метаязык на основе CSS, название которого можно перевести как «CSS c превосходным синтаксисом» , разработанный Хемптоном Кэтлином (Hampton Catlin).

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

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

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

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

В качестве примера возьмем следующий фрагмент CSS кода:

#skyscraper_ad
{
display: block;
width: 120px;
height: 600px;
}

#leaderboard_ad
{
display: block;
width: 728px;
height: 90px;
}

Который эквивалентен вот такому SASS:

#skyscraper_ad
display: block
width: 120px
height: 600px

#leaderboard_ad
display: block
width: 728px
height: 90px

В SASS для обозначения вложенности фрагментов кода используется интервал (отступ в начале следующей строки) равный двум пробелам. (*В последнем сниппете для наглядности я выделил эти пробелы красным фоном. )

Теперь, имея представление о том, как создается SASS код, давайте рассмотрим те вопросы, которые делают его таким превосходным .

Переменные.

В SASS для объявления переменной необходимо перед ее именем использовать символ доллара $ . И если имя вашей переменной, допустим, red , то после двоеточия мы можем указать соответствующее ей вот такое значение:

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

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

$red: #FF4848
$fontsize: 12px
h1
color: $red

p
color: darken($red, 10%)

С переменными вы можете производить арифметические действия, такие как сложение и вычитание, при условии, что используемые для этого значения имеют один и тот же тип данных. Если, к примеру, нам необходимо применить более темный оттенок, то все что нам нужно сделать, это вычесть из уже используемого в коде значения цвета, хранящегося в переменной, небольшое шестнадцатеричное HEX-значение, равное, скажем, #101 . Это же касается и случая, когда необходимо изменить значение размера шрифта, допустим, увеличить на 10 пикселей, для этого мы просто прибавляем недостающие пиксели:

p.addition_and_subtraction
color: $red — #101
font-size: $fontsize + 10px

Вложенность.

В SASS вложенность бывает двух типов.

Вложенность селекторов.

Это первый тип вложенности, который схож с тем, какой используется для структурирования HTML кода:

$fontsize: 12px

Speaker
.name
font:
weight: bold
size: $fontsize + 10px
.position
font:
size: $fontsize

Если вы взгляните на сгенерированный в результате CSS код, то какие-либо комментарии будут излишни. Путем вложенности класса .name в класс .speaker (*тем же способом — с помощью двух пробелов в начале следующей строки ) создается CSS селектор .speaker.name . Это же касается и следующего имени класса .position , расположенного после декларирования свойств для первого селектора, в результате вложенности которого образуется второй селектор .speaker.position :

Speaker.name {
font-weight: bold;
font-size: 22px; }
.speaker.position {
font-size: 12px; }

Вложенность свойств.

Второй тип вложенности позволяет структурировать свойства с одним префиксом (* font-family , font-size , font-weight или border-style , border-color , border-radius и т.д. ):

$fontsize: 12px

Speaker
.name
font:
weight: bold
size: $fontsize + 10px
.position
font:
size: $fontsize

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

То есть если мы укажем свойство font: , на следующей строке после двух пробелов свойство weight: , то в результате это будет эквивалентно хорошо знакомому нам свойству font-weight .

Speaker.name {
font-weight: bold;
font-size: 22px; }
.speaker.position {
font-size: 12px; }

В модуле обеспечивается поддержка всех дефис-содержащих свойств.

Такого рода вложенность является замечательным способом организации и структурирования вашего CSS кода и позволяет избежать его нежелательного повторения. (*DRY — «Don’t Repeat Yourself» — «Не повторяйтесь». Ситуации, когда при CSS форматировании определенных элементов их стили повторяются и/или переопределяются в других местах, что усложняет читабельность и обслуживание кода ).

Миксины.

Еще одной прекрасной возможностью SASS являются миксины .

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

Для того чтобы определить миксин используйте специально зарезервированное в SASS ключевое слово @mixin , а после него укажите выбранное вами имя миксина. Если есть необходимость в аргументах, то перечислите их в круглых скобках. Значения, устанавливаемые для аргумента по умолчанию, указываются при определении миксина через двоеточие. (*Другими словами, миксины представляют собой CSS функции. )

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

Взгляните на следующий пример:

@mixin border-radius($amount: 5px) /* определяем миксин */
-moz-border-radius: $amount
-webkit-border-radius: $amount
border-radius: $amount

h1 /* используем миксин */
@include border-radius(2px)

Speaker
@include border-radius

Этот SASS после компиляции будет преобразован в представленный ниже CSS код:

h1 {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2x; }

Speaker {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; }

Для заголовка h1 мы явно указали значение радиуса закругления углов границы, но для элемента с именем класса .speaker мы этого не делали, поэтому было взято дефолтное значение 5px.

Наследование селекторов.

Другой превосходной особенностью SASS синтаксиса является способность селекторов наследовать все стили, определенные для других селекторов. Чтобы воспользоваться такой возможностью, необходимо использовать ключевое слово @extend , после которого указать селектор, все свойства которого вы хотите унаследовать:

h1
border: 4px solid #ff9aa9

Speaker
@extend h1
border-width: 2px

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

h1,.speaker {
border: 4px solid #ff9aa9; }

Speaker {
border-width: 2px; }

(*Заметьте, декларация border: 4px solid #ff9aa9; не повторяется в рамках правила с селектором .speaker , а вместо этого к первому правилу добавляется второй селектор. Другими словами, дублирования кода нет. )

Попробуйте SASS в действии.

Онлайн.

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

Но до того, как вы начнете экспериментировать, в нижней области страницы выберите опцию «Indented Syntax» .

Установив на ПК.

Сам SASS является приложением (gem ) платформы Ruby. Поэтому для его установки без предварительной инсталляции самой платформы и менеджера пакетов этого языка программирования RubyGems не обойтись. После успешной установки самой платформы и менеджера выполните в консоли следующую команду:

gem install sass

SASS модуль может быть использован как инструмент конвертирования ваших SASS файлов в файлы CSS формата в режиме командной строки.

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

sass --watch sass_folder:stylesheets_folder

Где sass_folder — это путь к папке, содержащей SASS файлы (то есть с расширением.sass), а stylesheets_folder — путь к папке, в которой будут сохраняться получающиеся после компиляции, результирующие CSS файлы. Команда --watch сообщает модулю, что он должен следить (watch ) за любыми изменениями в указанной папке и если таковые имеются, то после их сохранения конвертировать исходные.sass файлы в эквивалентные им.css файлы.

Обратное конвертирование CSS в SASS.

Вы можете начать использование SASS с того, что сконвертируете стили, используемые в своих уже функционирующих проектах в этот формат с помощью утилиты "sass-convert".

Для этого в командной строке ведите путь к папке, содержимое которой необходимо конвертировать (*то есть просто перейдите в нужную директорию, в которой находятся исходные файлы ). После чего запустите упомянутую выше утилиту и сообщите ей следующие параметры:

sass-convert --from css --to sass –R.

Где флаг -R задает рекурсивный способ выполнения операции. А следующая за ним точка . означает, что получаемые в результате конвертации.sass файлы будут сохранены в текущей директории. (*При необходимости вместо точки можно указать путь к папке, в которой нужно сохранить результирующие файлы. )