[vc_row][vc_column][vc_column_text]Перед тем как перейти к непосредственной работе с SAAS давайте еще раз вспомним зачем он вообще нужен.
[/vc_column_text][vc_accordion active_tab=»1″ title_size=»h3″ style=»2″][vc_accordion_tab title=»SAAS ускоряет работу»][vc_column_text]Да, это так, но новичку только усвоившему азы CSS сложно вникать в терминологию. Усвоить стоит одно: этот инструмент раз и навсегда избавляет вас от повторения одних и тех же селекторов. Освоив препроцессоры вы начнете использовать одно из золотых правил «хорошего тона» в программировании — правила не повторяться. Все, что вы делаете — делаете один раз, а в случае необходимости внесения изменений, изменяете все в одном месте.[/vc_column_text][/vc_accordion_tab][vc_accordion_tab title=»SAAS лаконичнее»][vc_column_text]В файлах SAAS намного проще разобраться. Если вы понимаете синтаксис препроцессора, то сможете полностью изменить дизайн готового проекта за очень короткое время.
[/vc_column_text][/vc_accordion_tab][vc_accordion_tab title=»SAAS предотвращает избыточность»][vc_column_text]Проект может переходить из одних рук в другие или правки могут вноситься со-временем. Ленивые верстальщики предпочитают писать свойства селекторов поверх основного CSS применяя свойство !important* таким образом создается избыточный CSS. В SAAS вам намного проще изменить свойства существующих селекторов или добавить свои, что позволит создавать CSS легко, быстро и без лишних надстроек.
*/ подобный пример может показаться смешным, людям с опытом, но попробуйте посмотреть на тот CSS, который используют большинство сайтов. Поверьте, вы найдете немало подтверждений повсеместного и ничем необъяснимого применения !important.
[/vc_column_text][/vc_accordion_tab][vc_accordion_tab title=»SAAS имеет свои фреймворки»][vc_column_text]Есть бесконечное количество фреймворков, построенных на Sass. Compass, Bourbon и Susy — это только несколько примеров из всего количества.
[dt_highlight color=»#f5f7f8″ text_color=»#038c1e» bg_color=»#f5f7f8″]! Здесь так и просится сравнение SAAS c LESS, но вступление получилось и без того внушительным, поэтому сделаем это в отдельной статье.[/dt_highlight][/vc_column_text][/vc_accordion_tab][/vc_accordion][vc_separator el_width=»60″ css=».vc_custom_1549388775042{margin-top: 40px !important;}»][vc_column_text]
Синтаксис 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
Данная команда не генерирует CSS-файл. Для компиляции в CSS-файл используйте команду sass.
Использование Sass
Sass может использоваться тремя путями:
- Как инструмент в командной строке
- Как отдельный модуль Ruby
- Как модуль для любого, поддерживающего Rack, фреймворка, в том числе Ruby On Rails и Merb
Первым шагом для начала работы является установка gem’а Sass:
gem install sass
Если для работы вы используете Windows, сначала вам необходимо установить Ruby.
Для запуска Sass из командной строки используйте команду:
sass input.scss output.css
Также вы можете указать Sass следить за файлом и автоматически его компилировать в CSS при любом изменении:
sass --watch input.scss:output.css
Если у вас в папке имеется несколько файлов Sass, то вы можете указать Sass следить за всей папкой:
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; }
Приступая к работе
Сам по себе 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;
}
}
компилируется в такой код CSS:
#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%; }
#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; }
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; }
#main a {
font-weight: bold; }
#main a:hover {
color: red; }
Символ & должен быть указан в начале составного селектора, также он может содержать последующий суффикс, который будет добавлен к родительскому селектору. Например:
#main {
color: black;
&-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;
font-size: 30em;
font-weight: bold; }
Само пространство имен также может иметь значение. Например:
.funky {
font: 20px/24px fantasy {
weight: bold;
}
}
компилируется в:
.funky {
font: 20px/24px fantasy;
font-weight: bold;
}
Шаблонные селекторы
CSS имеет довольно много свойств в пространстве имен, например, font-family, font-size и font-weightнаходятся в пространстве имен font.
В CSS, если вы хотите установить набор свойств в общем пространстве имен, вы должны вводить его каждый раз. Sass упрощает этот процесс: просто напишите пространство имен единожды, а внутри вы можете вписать любое из вторичных свойств. Например:
.funky {
font: {
family: fantasy;
size: 30em;
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;
}
компилируется в:
.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; }
a { color: green; }
Если первым символом многострочного комментария является знак !, то комментарий всегда будет оставаться в результирующем CSS, даже в режиме сжатия. Это полезно, например, для добавления уведомления об авторских правах на ваш CSS.
Поскольку многострочные комментарии становятся частью результирующего CSS, в них разрешена интерполяция. Например:
$version: "1.1.3";
/* Этот CSS построен с использованием SomeGrids. Версия: #{$version}. */
компилируется в:
/* Этот CSS построен с использованием SomeGrids. Версия: 1.1.3. */
В следующей статье мы поговорим о работе SassScript его функциональности и способах применения в ваших проектах.
[/vc_column_text][/vc_column][/vc_row]