Синтаксис SASS

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

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

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

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

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

Переменные

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

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

CSS

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

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

SASS

// Моя библиотека цветов 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;}

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

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 файл.

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-элементам. Стоит отметить, если элементов с разделителем много, это существенно "испортит" стилевой файл, что затруднит поддержку стилевого файла.

CSS

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.

SASS

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

SASS

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

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

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

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

SASS

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

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

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

SASS

$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

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

SASS

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

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

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

CSS

/* окно просмотра - любое, включая браузеры которые не поддерживают @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 же позволит вам расположить, при помощи вложений, все медиа-запросы прямо внутри элементов. Этим вы сможете упростить поиск и правку стилей, затрагивающих адаптивную верстку.

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

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

SASS

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

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

Циклы в SASS

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

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'); }

Более подробно о циклах (if, for, while) смотрите в документации SASS.

Оператор @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; }