Изображение.

Руководство по 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, то после двоеточия мы можем указать соответствующее ей вот такое значение:

$red: #FF4848

В 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 файлы будут сохранены в текущей директории. (*При необходимости вместо точки можно указать путь к папке, в которой нужно сохранить результирующие файлы.)

Комментарий к Sassy CSS (SCSS).

В этой статье я затронул только начальный, оригинальный синтаксис — SASS Indented Syntax. (*Это имя данный синтаксис получил благодаря способу своего структурирования, в данном случае визуального. То есть английское слово "Indented", дословно переводимое как «вдавленный» или «вогнутый», в данном контексте отражает то, что вложенные блоки кода с помощью отступов визуально «вдавливаются» в общую структуру. Как упоминалось выше, каждый такой отступ равен двум пробелам.) Но помимо этого существует более новая его версия, называемая SCSS или Sassy CSS (*SASS-подобный CSS). Различие между двумя этими версиями заключается в том, что Sassy CSS максимально приближен к CSS, являясь более привычным для большинства разработчиков, но в тоже время он обладает всеми преимуществами его предыдущей версии SASS — наличие переменных, миксинов, вложенностей и наследования селекторов. Факт такого сходства и отражен в его названии «Sassy» (*SASS-подобный).

Заключение.

SASS действительно позволяет создавать хорошо структурированный и не содержащий повторений, DRY код. Кроме того, существует проект Compass, который является библиотекой, значительно расширяющей возможности SASS за счет интеграции возможностей других CSS фреймворков посредством миксинов. Такой подход позволяет избежать «засорения» вашего базового HTML кода несемантическими классами.

Так чего же вы ждете? Попробуйте SASS уже начиная со своего следующего проекта!

* Примечание переводчика.

Комментариев: 6 на Руководство по SASS для абсолютных новичков.

    1. Большое спасибо, исправил. Иногда ошибки обнаруживаются в тех местах, в которых был уверен на все 100.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *