Синтаксис Sass

Перед тем как перейти к непосредственной работе с SAAS давайте еще раз вспомним зачем он вообще нужен.

SAAS ускоряет работу

Да, это так, но новичку только усвоившему азы CSS сложно вникать в терминологию. Усвоить стоит одно: этот инструмент раз и навсегда избавляет вас от повторения одних и тех же селекторов. Освоив препроцессоры вы начнете использовать одно из золотых правил «хорошего тона» в программировании — правила не повторяться. Все, что вы делаете — делаете один раз, а в случае необходимости внесения изменений, изменяете все в одном месте.

SAAS лаконичнее

В файлах SAAS намного проще разобраться. Если вы понимаете синтаксис препроцессора, то сможете полностью изменить дизайн готового проекта за очень короткое время.

SAAS предотвращает избыточность

Проект может переходить из одних рук в другие или правки могут вноситься со-временем. Ленивые верстальщики предпочитают писать свойства селекторов поверх основного CSS применяя свойство !important* таким образом создается избыточный CSS. В SAAS вам намного проще изменить свойства существующих селекторов или добавить свои, что позволит создавать CSS легко, быстро и без лишних надстроек.

*/ подобный пример может показаться смешным, людям с опытом, но попробуйте посмотреть на тот CSS, который используют большинство сайтов. Поверьте, вы найдете немало подтверждений повсеместного и ничем необъяснимого применения `!important`.

SAAS имеет свои фреймворки

Есть бесконечное количество фреймворков, построенных на Sass. Compass, Bourbon и Susy — это только несколько примеров из всего количества.

! Здесь так и просится сравнение SAAS c LESS, но вступление получилось и без того внушительным, поэтому сделаем это в отдельной статье.

Синтаксис SAAS

Существует два варианта синтаксиса Sass:

SCSS

Первый вариант известен как SCSS (Sassy CSS) и он является расширением синтаксиса CSS. Это означает, что любое допустимое значение в CSS3 стилях будет допустимо и в SCSS. Кроме того, SCSS понимает большинство СSS-хаков и синтаксис вендорных префиксов, например, старый префикс IE filter. Этот синтаксис усиливается с применением возможностей Sass, описанных далее. Файлы этого варианта синтаксиса имеют расширение .scss.

SASS

Второй вариант, к тому же самый старый, известен как синтаксис отступов (или просто sass). Этот синтаксис обеспечивает более краткий вариант написания CSS. Он использует отступы вместо фигурных скобок, указывающие на вложение селекторов, и новые строки, заменяющие точки с запятой, для разделения свойств. Некоторые пользователи считают, что этот синтаксис легче читается и быстрее пишется, чем SCSS.

Синтаксис отступов имеет все те же функции, хотя и некоторые из них имеют немного другой вид написания, об этом можно более подробно ознакомиться в главе документации ‘SASS — синтаксис отступов’. Файлы этого варианта синтаксиса имеют расширение .sass.

Любой из вариантов синтаксиса может импортировать файлы написанные в другом варианте синтаксиса. Файлы могут автоматически конвертироваться в другой с помощью команды sass-convert в командной строке (терминале):

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

# Convert Sass to SCSS

$ sass-convert style.sass style.scss

# Convert SCSS to Sass

$ sass-convert style.scss style.sass

Данная команда не генерирует CSS-файл. Для компиляции в CSS-файл используйте команду sass.

Использование Sass

Sass может использоваться тремя путями:

Как инструмент в командной строке
Как отдельный модуль Ruby
Как модуль для любого, поддерживающего Rack, фреймворка, в том числе Ruby On Rails и Merb

Первым шагом для начала работы является установка gem’а Sass:

gem install sass

1	gem install sass

Если для работы вы используете Windows, сначала вам необходимо установить Ruby.

Для запуска Sass из командной строки используйте команду:

sass input.scss output.css

1	sass input.scss output.css

Также вы можете указать Sass следить за файлом и автоматически его компилировать в CSS при любом изменении:

sass --watch input.scss:output.css

1	sass --watch input.scss:output.css

Если у вас в папке имеется несколько файлов Sass, то вы можете указать Sass следить за всей папкой:

sass --watch app/sass:public/stylesheets

1	sass --watch app/sass:public/stylesheets

Используйте команду sass --help для получения полной документации.

Использовать Sass в Ruby также очень просто. После установки gem’a Sass вы сможете его использовать, указавrequire "sass" и c помощью Sass::Engine. Например:

engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss)
engine.render #=> #main { background-color: #0000ff; }

1 2	engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss) engine.render #=> #main { background-color: #0000ff; }

Приступая к работе

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

Кэширование

По умолчанию Sass кеширует компилируемые шаблоны и фрагменты. Это значительно ускоряет повторную компиляцию больших коллекций Sass-файлов, и работает лучше всего, если шаблоны Sass разделены на отдельные файлы, которые импортируются в один файл.

Без использования фреймворков Sass кладет скешированные шаблоны в папку sass-cache. В Rails и Merb в папкуtmp/sass-cache. Папка может быть изменена с помощью опции :cache_location. Если Вы не хотите, чтобы Sass использовал кеш, то можете отключить данную функцию, если параметру :cache зададите значение false.

Выбор синтаксиса

Если вы работаете с Sass через командную строку, то синтаксис определяется через расширение файла. Однако, синтаксис можно выбрать не только расширением файла. Синтаксис по умолчанию — синтаксис отступов, но вы можете изменить синтаксис, применив параметр --scss, и тогда входной файл будет читаться как файл с синтаксисом scss. Кроме того, вы можете при синтаксисе scss использовать команды синтаксиса sass и они будут также исполняться.

Вложенные правила

Sass позволяет вкладывать правила CSS друг в друга. Вложенные правила применяются только для элементов, соответствующих внешним селекторам. Например, такая запись в Sass:

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

#main p {

color: #00ff00;

width: 97%;

.redbox {

background-color: #ff0000;

color: #000000;

}

компилируется в такой код CSS:

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

#main p {

color: #00ff00;

width: 97%; }

#main p .redbox {

background-color: #ff0000;

color: #000000; }

Это помогает избежать повторения родительских селекторов, и делает сложные CSS макеты с большим количеством вложенных селекторов гораздо проще. Например:

#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

#main {

width: 97%;

p, div {

font-size: 2em;

a { font-weight: bold; }

}

pre { font-size: 3em; }

}

компилируется в:

#main {
  width: 97%; }
  #main p, #main div {
    font-size: 2em; }
    #main p a, #main div a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; }

#main {

width: 97%; }

#main p, #main div {

font-size: 2em; }

#main p a, #main div a {

font-weight: bold; }

#main pre {

font-size: 3em; }

Ссылка на родителя селектора

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

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

a {

font-weight: bold;

text-decoration: none;

&:hover { text-decoration: underline; }

body.firefox & { font-weight: normal; }

}

компилируется в:

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

a {

font-weight: bold;

text-decoration: none; }

a:hover {

text-decoration: underline; }

body.firefox a {

font-weight: normal; }

Символ & будет заменен на родительский селектор, каким он компилируется в CSS. Это означает, что если у вас есть глубоко вложенное правило, родительский селектор будет полностью вычислен до символа & и подставится вместо него. Например:

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

#main {

color: black;

a {

font-weight: bold;

&:hover { color: red; }

}

компилируется в:

#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }

#main {

color: black; }

#main a {

font-weight: bold; }

#main a:hover {

color: red; }

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

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

#main {

color: black;

&-sidebar { border: 1px solid; }

}

компилируется в:

#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; }

#main {

color: black; }

#main-sidebar {

border: 1px solid; }

Вложенные селекторы

CSS имеет довольно много свойств в пространстве имен, например, font-family, font-size и font-weightнаходятся в пространстве имен font.

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

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

.funky {

font: {

family: fantasy;

size: 30em;

weight: bold;

}

компилируется в:

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

.funky {

font-family: fantasy;

font-size: 30em;

font-weight: bold; }

Само пространство имен также может иметь значение. Например:

.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}

.funky {

font: 20px/24px fantasy {

weight: bold;

}

компилируется в:

.funky {
  font: 20px/24px fantasy;
    font-weight: bold;
}

.funky {

font: 20px/24px fantasy;

font-weight: bold;

}

Шаблонные селекторы

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

.funky {

font: {

family: fantasy;

size: 30em;

weight: bold;

}

компилируется в:

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

.funky {

font-family: fantasy;

font-size: 30em;

font-weight: bold; }

Само пространство имен также может иметь значение.

Шаблонные селекторы

Sass поддерживает специальный тип селекторов под названием шаблонные селекторы. Они похожи на селекторы классов и идентификаторов, только вместо # или . указывается %. Они предназначены для использования с директивой @extend.

Сами по себе, без использования @extend, наборы правил, которые используют шаблонные селекторы, не окажут влияния на CSS. Например:

%inline-type {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  margin-right: -4px;
  vertical-align: top;
}

%for-grids {
    min-height: 1px;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}

.sgrid-N {
    @extend %for-grids;
}

%inline-type {

display: inline-block;

*display: inline;

*zoom: 1;

margin-right: -4px;

vertical-align: top;

}

%for-grids {

min-height: 1px;

position: relative;

padding-left: 10px;

padding-right: 10px;

margin-bottom: 20px;

}

.sgrid-N {

@extend %for-grids;

}

компилируется в:

.sgrid-N {
  min-height: 1px;
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 20px; }

.sgrid-N {

min-height: 1px;

position: relative;

padding-left: 10px;

padding-right: 10px;

margin-bottom: 20px; }

Sass поддерживает стандартный многострочный CSS комментарий, обозначаемый /* */, а также однострочный комментарий, обозначаемый //. Многострочные комментарии сохраняются на выходе в файле CSS, где это возможно, в то время как однострочные комментарии удаляются. Например:

/* Это многострочный комментарий.
 * Так как этот тип комментирования
 * поддерживается в CSS, то он
 * попадет в скомпилированный CSS-файл. */
body { color: black; }

// Это однострочный комментарий.
// CSS не поддерживает данный вариант комментирования.
// Поэтому данного комментария не будет в CSS-файле.
a { color: green; }

/* Это многострочный комментарий.

* Так как этот тип комментирования

* поддерживается в CSS, то он

* попадет в скомпилированный CSS-файл. */

body { color: black; }

// Это однострочный комментарий.

// CSS не поддерживает данный вариант комментирования.

// Поэтому данного комментария не будет в CSS-файле.

a { color: green; }

компилируется в:

/* Это многострочный комментарий.
 * Так как этот тип комментирования
 * поддерживается в CSS, то он и
 * попадет в скомпилированный CSS-файл. */
body { color: black; }

a { color: green; }

/* Это многострочный комментарий.

* Так как этот тип комментирования

* поддерживается в CSS, то он и

* попадет в скомпилированный CSS-файл. */

body { color: black; }

a { color: green; }

Если первым символом многострочного комментария является знак !, то комментарий всегда будет оставаться в результирующем CSS, даже в режиме сжатия. Это полезно, например, для добавления уведомления об авторских правах на ваш CSS.

Поскольку многострочные комментарии становятся частью результирующего CSS, в них разрешена интерполяция. Например:

$version: "1.1.3";
/* Этот CSS построен с использованием SomeGrids. Версия: #{$version}. */

1 2	$version: "1.1.3"; /* Этот CSS построен с использованием SomeGrids. Версия: #{$version}. */

компилируется в:

/* Этот CSS построен с использованием SomeGrids. Версия: 1.1.3. */

1	/* Этот CSS построен с использованием SomeGrids. Версия: 1.1.3. */

В следующей статье мы поговорим о работе SassScript его функциональности и способах применения в ваших проектах.

Февраль 2019
Пн	Вт	Ср	Чт	Пт	Сб	Вс
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28

Синтаксис Sass

SAAS ускоряет работу

SAAS лаконичнее

SAAS предотвращает избыточность

SAAS имеет свои фреймворки

Синтаксис SAAS

SCSS

SASS

Использование Sass

Приступая к работе

Кэширование

Выбор синтаксиса

Вложенные правила

Ссылка на родителя селектора

Вложенные селекторы

Шаблонные селекторы

Шаблонные селекторы

Комментарии

В тему: