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

12.08.2019

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

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

Синтаксис

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

Второй и более старый синтаксис, также известный как краёный синтаксис или иногда просто Sass, даёт более сжатую возможность работы с CSS. Он использует отступы вместо скобок, что отделить вложения селекторов и новые строки вместо точек с запятой для разделения свойств. Иногда люди находят такой способ проще для понимания и быстрее для написания, чем SCSS. По факту, такой синтаксис имеет тот же функционал, хотя некоторые из них имеют слегка другой подход. Файлы используемые этот синтаксис имеют расширение.sass .

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

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

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

Sass может быть использован тремя способами: как командной строкой, как отдельный модуль Ruby и как плагин для rack-фреймворка, включая Ruby on Rails и Merb. Первым делом для всего этого надо установить Sass гем:

Если вы на Windows, то возможно вам надо установить сначала Ruby.

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

sass input.scss output.css

Вы также можете указать Sass следить за файлом и обновлять CSS каждый раз, когда Sass файл меняется:

sass --watch input.scss:output.css

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

sass --watch app/sass:public/stylesheets

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

Селекторы

CSS vs. SCSS селекторы.

#main { color: #999; } #main .content { color: #bfbfbf; }

CSS отрывок выше, может быть написан в SCSS таким образом:

#main{ color: #999; .content{ color: #bfbfbf; } }

Как мы можем видеть, SCSS структура более схожа с DOM структурой. Это позволяет нам организовать наш CSS более эффективно. Вот примеры:

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

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

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

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

#wrapper h1{ width:20px; &:hover{ width:25px; } }

& будет заменен родительским селектором. То есть код выше, будет эквиалентен:

#wrapper h1{ width:20px; } #wrapper h1:hover{ width:25px; }

Импорты

Нормальный импорт.

@import “foo.css”; //импортирует foo.css @import “foo” screen; //импортирует foo.scss @import “foo.scss” screen; //импортирует foo.scss @import “foo1”,”foo2" screen; //импортирует foo1.scss и foo2 scss

Частичный

Если вы не хотите компилировать SCSS файл как CSS, вы можете использовать “ _ ” перед названием файла.

@import “colors”; //_colors.scss будет импортирован @import “utils/foo.scss”; // Это импортирует fo.scss в папку utils.

Вложенные импорты:

Если demo.scss включает в себя:

Example { color: red; }

#main { @import “demo”; }

Будет скомпилировано в

#main .example { color: red; }

Переменные

SCSS переменные начинаются с символа $ .

$width: 10px; $headercolor:red; #main h1{ width: $width; color:$headercolor; }

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

#main h1{ width: 10px; color:red; }

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

#main { $width: 5em !global; width: $width; } #sidebar { width: $width; }

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

Вы также можете производить разные операции в SCSS. Для примера:

P { font: 10px/8px; // Чистый CSS без деления $width: 1000px; width: $width/2; // Использование переменных в делении width: round(1.5)/2; // Использование функции и деления height: (500px/2); // Использование скобок и деления margin-left: 5px + 8px/2px; // Использование сложения и деления font: (italic bold 10px/8px); // В списке, скобке на учитываются }

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

Вставка: #{}

Вы можете использовать переменные в свойствах имен и значения, используя #{} . Для примера:

$name: foo; $attr: border; p.#{$name} { #{$attr}-color: blue; }

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

P.foo { border-color: blue; }

Управляющие директивы

@if

p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } @if null { border: 3px double; } }

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

P { border: 1px solid; }

@for

@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }

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

Item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }

@each

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) { #{$header} { font-size: $size; } }

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

H1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.2em; }

@while

$i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; }

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

Item-6 { width: 12em; } .item-4 { width: 8em; } .item-2 { width: 4em; }

Миксины

Миксины позволяют вам определять стили, которые могут быть переиспользованы на протяжении всей таблицы стилей. Вы можете думать о миксинах, как о функциях в каком-либо другом языке програмирования. Вы можете передавать переменные, также как в функциях любого другого языка програмирования. В SCSS миксины возврашают набор CSS правил. Вы можете использовать миксины так @include имя-миксина, определенное директивной @mixin .

Рассмотрите следующий пример:

@mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000; } .page-title { @include large-text; padding: 4px; margin-top: 10px; }

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

Page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px; }

Вы также можете использовать составные миксины, например как:

@mixin mixin-one{ color: red; } @mixin mixin-two{ width:20px; } .page-title { @include mixin-one; @include mixin-two; }

Вы также можете передавать переменные в миксинах:

$globel-prefixes:webkit moz ms o; @mixin prefixer ($property,$value,$prefixes:null){ @if $prefixes==null{ @each $prefix in $globel-prefixes { -#{$prefix}-#{$property}: $value; } } @else { @each $prefix in $prefixes { -#{$prefix}-#{$property}: $value; } } #{$property}: $value; } *{ @include prefixer(box-sizing,border-box); }

Будет скомпилено в:

*{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }

Функции

Вы также можете определять функции, возвращающие значение. Для примера.

$no-of-columns:12; $gutter-width:2%; @function get-column-width($i){ @return (100% - ($no-of-columns/$i - 1) * $gutter-width) / $no-of-columns * $i; } .col-6 { width:get-column-width(6); }

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

Col-6 { width: 49%; }

Расширения

Вы столкнетесь с ситуацией, когда вам нужно будет переиспользовать стили. Рассмотрите следующий пример:

Оба будут иметь одинаковые стили, кроме цвета.

Btn{ margin:10px; color:black; width:200px; height:100px; } .btn-blue{ @extend .btn; background:blue; }

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

Btn,.btn-blue{ margin:10px; color:black; width:200px; height:100px; } .btn-blue{ background:blue; }

Вы также можете связывать расширения и использовать несколько расширений в одном CSS селекторе.

Если вы не хотите, чтобы директива расширения была скомпилена в CSS, вы можете использовать % перед селектором.

%btn{ margin:10px; color:black; width:200px; height:100px; } .btn-blue{ @extend %btn; background:blue; } .btn-red{ @extend %btn; background:red; } Будет скомпилировано в: .btn-blue{ margin:10px; color:black; width:200px; height:100px; background:blue; } .btn-red{ margin:10px; color:black; width:200px; height:100px; background:red; }

Sass позволяет правилам css, быть вложенными друг в друга. Внутреннее правило применяется только в пределах внешнего селектора правила. По другому тут никак не перевести, фраза умная, на деле же все проще, просто посмотрите пример:

Scss - файл

#main p {

color : #00ff00 ;

width : 97% ;

Redbox {

background-color : #ff0000 ;

color : #000 ;

Скомпилированный CSS

1 2 3 4 5 6 7 8

#main p {

color : #00ff00 ;

width : 97% ;

#main p .redbox {

background-color : #ff0000 ;

color : #000 ;

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

Scss - файл

10 11 12

#main {

width : 97% ;

p , div {

font-size : 2em ;

font-weight : bold ;

pre {

font-size : 3em ;

Скомпилированный CSS

11 12 13 14

#main {

width : 97% ;

#main p ,

#main div {

font-size : 2em ;

#main p a ,

#main div a {

font-weight : bold ;

#main pre {

font-size : 3em ;

Ссылка на родитель селекторов (&)

Не понятно почему разработчики sass-а так это назвали. Вообще, если по простому, то это можно назвать ссылкой на самого себя. Если я не ошибаюсь, то в less-ой документации это так и называется (напомню, less многие вещи брал из sass-а, данную конструкцию он тоже позаимствовал). Многие наверно зададутся вопросом, а для чего это нужно? Начнем с того, что без данной конструкции невозможно бы было реализовать ни один псевдокласс. Или другой пример, нам нужно предусмотреть другие стили элемента в зависимости от того какой класс имеет body html документа. Покажу на примере из официальной документации.

Scss - файл

1 2 3 4 5 6 7 8 9 10

font-weight : bold ;

text-decoration : none ;

&:hover {

text-decoration : underline ;

body .firefox & {

font-weight : normal ;

Скомпилированный CSS

1 2 3 4 5 6 7 8 9 10

font-weight : bold;

text-decoration : none ;

a :hover {

text-decoration : underline ;

body .firefox a {

font-weight : normal ;

Я думаю с псевдоклассами все понятно. Давайте поподробнее рассмотрим строчку body.firefox & . Что здесь происходит? Если ссылка на самого себя появляется за каким-то элементом (тут может быть как одиночный html элемент, так и класс, id-ик, абсолютно не важно), то это говорит компилятору что такое его расположение отменяет стандартную вложенность элементов. Компилятор выбьет такой элемент из стандартного потока. Если посмотреть на пример выше, то может сложиться ощущение, что будет скомпилирована css-ка в которой будет a body.firefox a , но нет. Ссылка на самого себя идет за элементом с классом, поэтому компилятор сгенерит body.firefox a (стандартная вложенность элементов отменена). Это достаточно фундаментальная вещь, и это нужно понимать. Новички которые только-только перешли на какой-нибудь препроцессор не совсем понимают как работает ссылка на самого себя, и частенько пишут код который не работает. Это просто нужно запомнить.

Scss - файл

1 2 3 4 5 6 7 8 9

#main {

color : black ;

font-weight : bold ;

&:hover {

color : red ;

Скомпилированный CSS

1 2 3 4 5 6 7 8 9

#main {

color : black

#main a {

font-weight : bold ;

#main a:hover {

color : red ;

В примере выше видно, что ссылка на самого себя &:hover вложена в #main и вложена в a , она стоит отдельно, перед ней нет никаких элементов, поэтому срабатывает стандартная вложенность и компилятор сгенерит #main a:hover .

В разные времена мир преживал технические революции. Это происходило скачками. Грубо говоря бронза, и бац, наступил железный век. Сейчас мы не знаем кто изобрел колесо или плуг, но в то время эти открытия носили революционный характер и изменили жизнь как отдельных людей, так и всего человечества. В жизни веба, если взять конкретнее, то в жизни верстальщиков, были три нововведения которые изменили их жизнь, притом изменили ее кардинально. Первое это конечно же каскадные таблицы стилей, но это было на заре веба. Второе это jquery, теперь путешествие по DOM модели стало простым и удобным, плюс разные эффекты. И третье, это уже более современное время, это БЭМ. Согласитесь круто написать что-то один раз, а потом без проблем использовать это на разных проектах. Следующая конструкция языка sass поможет вам в этом.

Scss - файл

1 2 3 4 5 6

#main {

color : black ;

&-sidebar {

border : 1px solid red ;

Скомпилированный CSS

1 2 3 4 5 6

#main {

color : black ;

#main-sidebar {

border : 1px solid red ;

Я брал пример из документации. В реальной жизни согласно БЭМ это будет не id-ик #main а .main , но суть от этого не изменится. Приведу простой

Объедините возможности программирования с гибкостью

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

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

Синтаксис Sassy CSS (SCSS) является расширением CSS3; любой код SCSS является работоспособным кодом CSS. Все примеры этой статьи написаны на SCSS.

Почему Sass

Синтаксис Sass

SCSS – наиболее распространенный синтаксис, являющийся расширением синтаксиса CSS.
.sass – старый синтаксис, в котором вложенные элементы реализованы с помощью отступов.

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

CSS-препроцессоры обладают всеми функциями, необходимыми для любой среды Web-разработки. Они позволяют:

Сократить время разработки.
Реализовать принцип DRY (Don"t Repeat Yourself – не повторяйся) при разработке CSS.
Сделать ваш код более чистым и понятным.

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

Инсталляция Sass

Основная реализация Sass выполнена на Ruby, хотя существуют и другие реализации. Первый шаг заключается в инсталляции Sass через его компоненты Ruby.

Загрузите и инсталлируйте Ruby, если он еще не установлен в вашей системе.
- Для пользователей Windows: загрузите установщик Ruby для Windows (EN).
- Для пользователей Mac OS X: Ruby уже установлен в вашей операционной системе.
- Для пользователей Linux: установите Ruby с помощью любого менеджера пакетов.
Инсталлируйте gem-пакет Ruby Sass при помощи команды gem install sass .

Подготовка рабочей среды Sass

Создайте файл с расширением.scss в любом текстовом редакторе. Поддержка синтаксиса Sass (выделение цветом различных фрагментов кода) различна в разных текстовых редакторах; список редакторов вы найдете в разделе .

Скопируйте код из листинга 1 и вставьте его в созданный scss-файл.

Листинг 1. Пример кода Sass

#blueBar { position: relative; height: 37px; left: 0; right: 0; top: 0; }

Язык Sass является расширением CSS3. В Sass версии 3.2.1 любой рабочий код CSS является также рабочим кодом Sass. Пример такого кода приведен в листинге 1. Тем не менее, код Sass из листинга 1 необходимо преобразовать в CSS, иначе Web-браузеры не смогут корректно воспринимать таблицу стилей. Вместо того чтобы постоянно преобразовывать Sass в CSS вручную с помощью команды sass-convert , мы настроим Sass на автоматическую конвертацию sass-файла в CSS при его сохранении. Для того чтобы Sass постоянно отслеживал нужный файл, выполните в командной строке команду из листинга 2.

Листинг 2. Отслеживание файла

sass --watch style.scss:style.css

Можно также настроить Sass на отслеживание всей директории, как показано в листинге 3.

Листинг 3. Отслеживание директории

sass --watch stylesheets/sass:stylesheets/compiled

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

Переменные

Переменные – это ключевая функциональность, которая отсутствует в CSS. В таблицах стилей используется очень много повторений, поэтому очень полезно иметь возможность задать определенное значение один раз и потом ссылаться на него. Предположим, что у вас имеется таблица стилей, похожая на таблицу из листинга 4.

Листинг 4. Определение цвета элементов в CSS

#someElement { color: #541B32; } #anotherElement { color: #541B32; } #yetAnotherElement { color: #541B32; }

Стандартная разметка CSS требует явного указания всех значений, что приводит к повторениям в листинге 4. С помощью Sass можно использовать более эффективный способ, как показано в листинге 5.

Листинг 5. Листинг 5. Определение цвета элементов в Sass

$purplishColor: #541B32; #someElement { color: $purplishColor; } #anotherElement { color: $purplishColor; } #yetAnotherElement { color: $purplishColor; }

Преимущество очевидно. Теперь можно изменять цвет всех элементов в одном месте. Листинг 5 содержит переменную $purplishColor , значение которой можно изменить в Sass-файле в любой момент. Переменные Sass не имеют типов; одной и той же переменной можно присваивать строковые и целочисленные значения и даже коды цветов.

Модули

Код CSS можно с легкостью разбить на отдельные модули, которые механизм Sass соберет воедино. При помощи директивы @import можно импортировать модули, как показано в листинге 6. В директиве необходимо указать имя файла, гиперссылку или любой другой путь. В одном документе можно одновременно объединять файлы CSS и SCSS.

Листинг 6. Импорт модулей в Sass

@import "colors.scss" @import "links.scss"

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

Строки и подстановка

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

Листинг 7. Действия со строками и переменными в Sass

$image_dir: "images/web/"; $page: 10; .button { background-image: url($image_dir + "image.gif"); :before { content: "Page #{ $page }"; } }

В листинге 8 представлен код из листинга 7, сконвертированный в CSS.

Листинг 8. Действия со строками и переменными в CSS

.button { background-image: url("images/web/image.gif"); } .button:before { content: "Page 10"; }

Математические вычисления

В Sass поддерживаются стандартные математические операции с числами, как показано в листинге 9. Можно выполнять простые математические операции со значениями переменных.

Листинг 9. Математические операции с числами в Sass

.block { $block_width: 500px; width: $block_width - (10px * 2) - (1px * 2); }

В листинге 10 представлен код из листинга 9, сконвертированный в CSS..

Листинг 10. Математические операции с числами в CSS

.block { width: 478px; }

Также поддерживаются математические операции с кодами цветов, как показано в листинге 11.

Листинг 11. Математические операции с кодами цветов в Sass

.block { $color: #010203; color: $color; border-color: $color - #010101; }

В листинге 12 представлен код из листинга 11, сконвертированный в CSS.

Листинг 12. Математические операции с кодами цветов в CSS

.block { color: #010203; border-color: #000102; }

Вложенные селекторы и свойства

Одной из наиболее востребованных возможностей, отсутствующих в CSS, являются вложенные селекторы (применение стиля к селектору внутри другого селектора). Чтобы создать вложенный селектор в CSS, необходимо повторно указывать родительский селектор для каждого определяемого дочернего селектора. В Sass процесс создания вложенных селекторов упрощен, как видно из листинга 13.

Листинг 13. Вложенные селекторы в Sass

#some { border: 1px solid red; .some { background: white; } }

В листинге 14 представлен код из листинга 13, сконвертированный в CSS.

Листинг 14. Вложенные селекторы в CSS

#some { border: 1px solid red; } #some .some { background: white; }

Управляющие директивы

Управляющие директивы Sass выстраивают потоки данных и логику в коде CSS. В этом разделе мы рассмотрим основные управляющие директивы – @if, @for и @each.

@if

В Sass поддерживаются базовые функции if/else, которые могут быть скомпилированы в CSS. Рассмотрим листинг 15, где мы хотим сделать цвет link черным (black) во всех случаях, за исключением случаев, когда базовый цвет уже черный. Если базовый цвет уже черный, то мы меняем его на белый. Listing 15. Sass @if example

Листинг 15. Пример директивы @if в Sass

$color: black; .link { @if $color == black { color: white; } @else { color: black; } }

В листинге 16 представлен код из листинга 15, сконвертированный в CSS.

Листинг 16. Пример директивы @if в CSS

.link { color: white; }

Здесь директива @if работает так же, как и в других языках программирования. После оператора @if можно указать несколько операторов @else if и один оператор @else . Если условие @if не выполняется, то предпринимаются попытки поочередного выполнения операторов @else if до тех пор, пока один из них не завершится успехом или пока не будет достигнут блок оператора @else .

@for

Директива @for циклически генерирует набор стилей. В каждой итерации используется переменная-счетчик, как показано в листинге 17.

Листинг 17. Пример директивы @for в Sass

@for $i from 1 through 5 { .button-#{$i} { width: 1px * $i; } }

В листинге 18 представлен код из листинга 17, сконвертированный в CSS.

Листинг 18. Пример директивы @for в CSS

.button-1 { width: 1px; } .button-2 { width: 2px; } .button-3 { width: 3px; } .button-4 { width: 4px; } .button-5 { width: 5px; }

@each

Директива @each считывает элементы из указанного списка и генерирует стили с использованием их значений, как показано в листинге 19.

Листинг 19. Пример директивы @each в Sass

@each $company in IBM, Motorola, Google { .#{$company}-icon { background-image: url("/images/#{$company}.jpg"); } }

В листинге 20 представлен код из листинга 19, сконвертированный в CSS.

Листинг 20. Пример директивы @each в CSS

.IBM-icon { background-image: url("/images/IBM.jpg"); } .Motorola-icon { background-image: url("/images/Motorola.jpg"); } .Google-icon { background-image: url("/images/Google.jpg"); }

Функции

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

В Sass имеется множество встроенных функций. Например, функции управления цветом rgb() и darken() , представленные в листинге 21. При помощи этих функций можно изменять оттенок, насыщенность, яркость, прозрачность, масштаб плавности и многие другие свойства цвета. Также вы можете определить собственные функции и использовать их при необходимости.

Листинг 21. Функции в Sass

#someElement { color: rgb(150, 50, 100); } #someDarkYellowElement { color: darken(yellow, 33%); }

В листинге 22 представлен код из листинга 21, сконвертированный в CSS.

Листинг 22. Функции в CSS

#someElement { color: #963264; } #someDarkYellowElement { color: #575700; }

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

Миксины

Миксины (многократно используемые фрагменты CSS-кода) определяются с помощью директивы @mixin , как показано в листинге 23. В миксинах можно определять шаблоны пар "свойство-значение" и использовать их в других наборах правил. Использование миксинов упрощает код таблиц стилей и делает их удобнее для чтения. По существу, @mixin – это определяемая пользователем функция. Миксины также могут принимать аргументы – это означает, что с помощью небольшого количества миксинов можно создать множество стилей.

Листинг 23. Миксины в Sass

@mixin rounded-corners($radius: 5px) { border-radius: $radius; -webkit-border-radius: $radius; -moz-border-radius: $radius; } #header { @include rounded-corners; } #footer { @include rounded-corners(10px); }

В листинге 24 представлен код из листинга 23, сконвертированный в CSS.

Листинг 24. Миксины в CSS

#header { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #footer { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }

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

Compass

Compass – это Open Source-инфраструктура для разработки CSS, использующая язык Sass. Доступные для многократного использования шаблоны проектирования (на основе миксинов) позволяют создавать объемные и мощные таблицы стилей. Библиотека основных функций Compass является необходимым инструментом при разработке в Sass.

По существу, Compass является оберткой для CSS. Посредством CSS-спрайтов и ряда других технологий Compass берет на себя решение общих проблем CSS, таких как совместимость с браузерами, схемы и оптимизация таблиц стилей.

Так же как и Sass, Compass распространяется в виде gem-пакета Ruby. Для инсталляции Compass выполните в командной строке команду gem install compass .

После этого вы сможете использовать определенные в Compass миксины (функции), а также множество встроенных функций, классов и поддерживаемых возможностей CSS3. За дополнительной информацией о Compass обратитесь к разделу .

Заключение

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

Sass не является единственным CSS-препроцессором. Его ближайший конкурент, LESS (см. раздел ), также пользуется определенной популярностью. По большому счету, различий между Sass и LESS не так уж много. Основным преимуществом Sass является Compass – расширение, которого нет у LESS. Важно поработать с как можно большим количеством CSS-препроцессоров, чтобы понять, какой из них лучше всего подходит для ваших задач.

Всем привет! Как быстро летит время. Я даже не заметил, как я перешел от написания стилей с обычного Css на препроцессор Sass. А ведь раньше не понимал — что за Sass, для чего он нужен, это наверно для супер продвинутых профи в верстке. Да, использование препроцессоров это шаг на новый уровень в веб-разработке, но здесь ничего страшного и сложного нет и вы убедитесь в этом сами, дочитав данную статью до конца.

И так, чем хорош препроцессор и конкретно Sass? Я сразу скажу, что есть и другие, такие, как Less, Stylus и др. Все они работают по одному принципу, но у каждого свои особенности. Sass получил большую популярность у профессионалов в следствие чего изучение значительно упрощается. Просто чем популярнее технология, тем больше сообщество и тем более развернута документация.

Препроцессоры созданы для того, чтобы избавить разработчика от большинства рутинных задач при написании кода, тем самым повысив скорость и качество работы. Помимо CSS-препроцессоров существуют также и HTML-препроцессоры, например, Pug (Jade).

Структура статьи

Документация

Разработчиком Sass является француз Hugo Giraudel, проживающий в Германии с определенного времени. Естественно документация на английском языке, но я лично в ней неплохо ориентируюсь (важно знать технический английский). Но также есть перевод и на русский. Я бы советовал все же английскую версию, это для того, чтобы привыкать и изучать все глубже английский. Но русская тоже ничем не хуже.

Английская документация: http://www.sass-lang.com
Русская документация: https://sass-scss.ru

Компиляция Sass в Css

В качестве программного обеспечения для компиляции Sass в Css я использую плагин Sass для таск-менеджера . Вообще Sass является приложением (Gem) языка Ruby. Поэтому, если вы хотите обойтись без Gulp, то для компиляции в Css вам необходимо будет установить платформу языка программирования Ruby. Я не буду сейчас показывать как это делается, можете почитать об этом на официальном сайте .

Синтаксис - Sass, Scss

Сразу отмечу, что существует 2 синтаксиса написания кода: Sass и Scss.

Синтаксис Sass незначительно отличается от Scss. Scss похож больше на обычный код Css, а в Sass опущены фигурные скобки и точка с запятой между правилами. Также существует различие в написании некоторых функций и надо быть внимательным в том, какой синтаксис вы выбираете. Расширения файлов для Sass — *.sass, а для Scss — *.scss. Синтаксис Sass он более старый, а Scss появился позже, чтобы упростить изучение для новичков. Я сам начинал изучение данного препроцессора именно на Scss, так было проще его понять. Сейчас же я перешел на Sass, для меня он более удобен.

Если говорить о Sass, то его структура кода строится на основе отступов (ведь фигурных скобок в нем нет) и здесь следует быть внимательным, так как в качестве отступа может выступать, как табулятор (TAB — 4 пробела), так и обычные пробелы (обычно это двойной пробел). Я всегда использую табулятор.

Помните! Если вы используете табулятор в качестве отступа, то пробелы следует исключить, чтобы везде было одинаково. И наоборот — если используете пробелы, то табулятор следует исключить. Иначе, компилятор выдаст ошибку.

Sass

.maincontent .main-title font-size: 30px font-weight: 700 margin: 0 0 30px .description margin-bottom: 30px p color: #444444 font-size: 16px line-height: 22px

Scss

.maincontent { .main-title { font-size: 30px; font-weight: 700; margin: 0 0 30px; } .description { margin-bottom: 30px; p { color: #444444; font-size: 16px; line-height: 22px; } } }

В большинстве редакторов кода (например, Sublime Text) есть разметка отступов в виде полос, что не дает нам запутаться. В примерах ниже я буду использовать синтаксис Sass.

Упрощаем жизнь с помощью Sass

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

Вот чем мне приглянулся Sass с самого начала, так это как раз вложенностью css-правил одних в другие. Это здорово экономит время, а код получается структурируемым и легкочитаемым. Например, если мы хотим написать стили элементам определенного родительского контейнера, то нам в Css необходимо каждый раз указывать родительский класс, например вот так:

Main .title { font-size: 30px; color: #444; } .main .subtitle { font-size: 20px; } .main .description { font-size: 14px; margin-bottom: 30px; }

То есть мы везде указываем родительский класс.main , а это в свою очередь не совсем удобно. Используя Sass, можно записать следующим образом:

Scss

.main { .title { font-size: 30px; color: #444; } .subtitle { font-size: 20px; } .description { font-size: 14px; margin-bottom: 30px; } }

Sass

.main .title font-size: 30px color: #444 .subtitle font-size: 20px .description font-size: 14px margin-bottom: 30px

Согласитесь так смотрится намного аккуратнее, да и писать код можно быстрее, ведь родительский класс.main мы пишем всего один раз. Если вы хотите повторить за мной, не устанавливая Ruby и всякое подобное ПО можно воспользоваться онлайн-компилятором для демонстрации.

Вложенные свойства

Помимо вложенности правил в Sass существует возможность вложенности свойств. Например, вот как можно записать значения margin:

Sass

.main .title margin: top: 10px right: 15px bottom: 10px left: 15px

Css

.main .title { margin-top: 10px; margin-right: 15px; margin-bottom: 10px; margin-left: 15px; }

Привязка к селектору или конкатенация - знак &

Написание нашего кода можно ускорить и сделать его еще компактнее, применив конкатенацию (соединение) посредством символа — & . Как это работает? Например, у нас есть такие классы, как: .main-title , .main-subtitle , .main-description . В Sass данные классы можно записать следующим образом:

Main &-title font-size: 30px color: #444 &-subtitle font-size: 20px &-description font-size: 14px margin-bottom: 30px

Main-title { font-size: 30px; color: #444; } .main-subtitle { font-size: 20px; } .main-description { font-size: 14px; margin-bottom: 30px; }

С помощью символа & мы соединяемся к корневому классу, то есть в данном случае нет необходимости постоянно повторять корень.main . В тоже время следует иметь ввиду, что мы не создали дочерние элементы.

/* Ссылка */ a { color: red; } a:hover { color: blue; } /* Псевдоэлементы */ .main::before { content: ""; display: block; font-size: 20px; } .main::after { content: ""; display: block; font-size: 30px; }

Иногда нужно указать цепочку селекторов до текущего элемента. Можно конечно вынести его в корень, но чтобы не нарушать вложенность можно написать следующим образом:

Main .container & width: 700px

Container .main { width: 700px }

Переместив & после селектора, мы поменяли порядок стыковки, т. е. класс.container в данном случае является родительским.

Привязка к родительскому селектору, но на уровнь выше

Выше для примера я демонстрировал Sass код:

Main &-title font-size: 30px color: #444 &-subtitle font-size: 20px &-description font-size: 14px margin-bottom: 30px

Теперь представьте, что в блоке.main-title существует еще один элемент которому нужно явно указать стили, используя всю цепочку родителей. Я долго время просто указывал корневое название (в данном случае — .main), но это не очень удобно. Я стал ковырять документацию Sass и нашел решение. На самом деле все просто — нам необходимо объявить ссылку на родителя и использовать ее, там, где нужно.

Вот так я делал раньше:

Main &-title font-size: 30px color: #444 .main__icon // указываем корень.main, иначе, если использовать & будет стыковка к.main-title color: #444 width: 20px &-subtitle font-size: 20px &-description font-size: 14px margin-bottom: 30px

А теперь можно сделать так:

Main $self: & // ссылка на родителя &-title font-size: 30px color: #444 #{$self}__icon // вместо & используем ссылку на родителя color: #444 width: 20px &-subtitle font-size: 20px &-description font-size: 14px margin-bottom: 30px

Если заметили мы объявили ссылку на родителя — $self: & . Мне это чем-то напоминает ссылку на объект (this), который вызвал событие в javaScript. Теперь в нужно месте мы можем просто его вызвать #{$self} . Вот оказывается как все просто, а я голову ломал и думал, что нет решения этой проблемы в Sass.

Main-title { font-size: 30px; color: #444; } .main-title .main__icon { color: #444; width: 20px; } .main-subtitle { font-size: 20px; } .main-description { font-size: 14px; margin-bottom: 30px; }

Шаблоны-заготовки

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

%button background-color: #666 border: 1px solid #666 padding: 0 20px font-size: 15px line-height: 40px height: 40px .button-green @extend %button background-color: green border-color: green .button-red @extend %button background-color: red border-color: red

Button-green, .button-red { background-color: #666; border: 1px solid #666; padding: 0 20px; font-size: 15px; line-height: 40px; height: 40px; } .button-green { background-color: green; border-color: green; } .button-red { background-color: red; border-color: red; }

Шаблоном выступает в данном случает селектор %button (об этом говорит знак — %). Это удобно тем, что сам селектор шаблона нигде не участвует, а его стили наследуются другими селекторами посредством директивы — @extend . Данный шаблон можно использовать сколько угодно раз, сокращая тем самым количество кода.

SassScript

В Sass, как и в языках программирования имеют место быть такие возможности, как: создание переменных, арифметические операции (сложение, вычитание, деление, умножение и т.д.), итерации (циклы), функции (миксины) и многое другое. То есть Sass это своего рода некий язык программирования, который призван опять таки упростить написание кода и ускорить работу в разы.

Переменные

Переменная в Sass начинается со знака $ , а имя пишется латиницей, например: $color . Следует отметить, что знаки: «— » и «_ » взаимозаменяемы. К примеру, если назвали $color-red , то можно вызвать и $color_red . Определяется переменная следующим образом: $название: значение , например: $color: #f6f6f6 .

Переменная объявленная вне каких либо уровней вложенности, доступна глобально, т.е. можно использовать везде. Если же вы определили переменную в каком либо уровне вложенности селектора, то она будет доступна только на данном уровне. Чтобы она работала глобально во всем документе необходимо указать ключевое слово !global .

Title $font-size: 10px !global font-size: $font-size .subtitle font-size: $font-size

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

Директивы

@extend

Данную директиву мы затронули выше, когда изучали шаблон-заготовку. Закрепим еще раз знания. С помощью @extend мы можем скопировать правила любого селектора. Например, при верстке может быть так, что элемент «А » и элемент «Б » могут быть схожи по внешнему виду. В данном случае можно написать правила элементу «А», а для «Б» просто скопировать стили элемента «А», слегка переопределив нужные свойства.

Block_a background-color: #cccccc border: 5px solid #999999 padding: 20px font-size: 30px height: 150px width: 150px .block_b @extend .block_a padding: 15px

Block_a, .block_b { background-color: #cccccc; border: 5px solid #999999; padding: 20px; font-size: 30px; height: 150px; width: 150px; } .block_b { padding: 15px; }

В данном примере мы сверстали 2 одинаковых квадрата. У квадрата «Б» мы переопределили только отступ padding: 15px . Вот так работает @extend. Я довольно часто пользуюсь данной директивой.

@import

Данная директива позволяет объединять несколько файлов стилей в один. Это очень удобно, тем более, если проект большой. Не стоит путать с директивой, которая существует в Css — @import . В Css обязательным атрибутом является — url() .

На самом деле удобнее писать стили в разных файлах и предназначение у каждого свое. Например, весь каркас страницы можно разделить на регионы: header.sass, sidebar.sass, footer.sass. Собрать все можно в главном файле main.sass, как раз используя @import. Файлы регионов можно указать также через нижнее подчеркивание в начале имени файла, например так: _header.sass, _sidebar.sass, _footer.sass. Такие файлы называются фрагментами. При импорте фрагментов не обязательно указывать расширение файла.

Простой импорт

@import "header.sass" @import "sidebar.sass" @import "footer.sass"

Импорт фрагментов

@import "header" @import "sidebar" @import "footer"

Файлы фрагментов могут быть с расширениями: *.sass , *.scss или *.css . Например, главный файл может быть с расширением *.sass , а шапка сайта, к примеру с расширением *.scss . То есть не важно какое у вас расширение главного файла. Следует отметить, что при импорте переносятся все переменные и миксины (о них поговорим ниже) в главный файл, в который происходит импорт.

Также, можно указать импорт нескольких файлов через запятую: @import «header», «sidebar», «footer».

Имейте ввиду, что импорт происходит в том месте, где вы указали директиву @import . Обычно это делают в начале документа.

@at-root

Директива @at-root говорит сама за себя и если переводить на русский, то будет звучать так — «от корня» . Иными словами мы переносим селектор в корень, отменяя цепочку родительских селекторов. Тут конечно можно задать вопрос — «А зачем нужна эта директива, если можно перенести селектор в корень в ручную?». Ответ прост — удобство написания кода, не нарушая структуру. Когда вы научитесь работать с Sass в полной мере вы это поймете.

Main &-title font-size: 30px color: #444 @at-root .main__icon color: #444 width: 20px

Main-title { font-size: 30px; color: #444; } .main__icon { color: #444; width: 20px; }

Управляющие директивы и выражения

Директива @if

Данная директива выполняет стили, если выражение, заключенное в ней возвращает любое значение кроме false и null .

$color: green .header @if $color == green background-color: green @else if $color == blue background-color: blue @else background-color: #f6f6f6

Header { background-color: green; }

Те, кто знаком хотя бы с основами языка программирования (например, javaScript или Php) разобраться будет не сложно. Здесь суть та же самая, главное знать синтаксис написания кода.

Директива @for

В языке программирования (опять же в Javascript или Php) с помощью For можно задать цикл. В Sass данная директива выполняет тоже самое — создает цикл. Для каждой итерации (повторения) используется переменная-счетчик, которая изменяет данные вывода.

Директива имеет 2 формы написания: 1. @for $var from <начало> through <конец> и 2. @for $var from <начало> to <конец> . Если вы хотите, чтобы последняя цифра была включена в цикл, то используйте «through «. Давайте рассмотрим пример:

@for $i from 1 to 6 .elem-item-#{$i} background-image: url("images/image-#{$i}.jpg")

Elem-item-1 { background-image: url("images/image-1.jpg"); } .elem-item-2 { background-image: url("images/image-2.jpg"); } .elem-item-3 { background-image: url("images/image-3.jpg"); } .elem-item-4 { background-image: url("images/image-4.jpg"); } .elem-item-5 { background-image: url("images/image-5.jpg"); }

Для указания конечного значения я использовал ключевое слово «to «. При таком раскладе цикл заканчивается на цифре — 5 . Обратите внимание насколько компактным выглядит код Sass.

Директива @each

Директива @each также, как и @for выводит значения в цикле и удобен тем, что помимо цифр можно перебирать конкретные значения. Давайте возьмем вышеприведенный цикл и изменим его на какие либо значения.

@each $bgItem in animal, lake, sea, landscape, nature .elem-item-#{$bgItem} background-image: url("images/image-#{$bgItem}.jpg")

Elem-item-animal { background-image: url("images/image-animal.jpg"); } .elem-item-lake { background-image: url("images/image-lake.jpg"); } .elem-item-sea { background-image: url("images/image-sea.jpg"); } .elem-item-landscape { background-image: url("images/image-landscape.jpg"); } .elem-item-nature { background-image: url("images/image-nature.jpg"); }

В данном случае не создается переменная-счетчик, а количество итераций зависит от количества созданных значений после ключевого слова «in «. Значения выводятся через переменную (в данном примере — $bgItem), название которой может быть произвольным.

Миксины (функции)

Миксины (примеси) — это своего рода функция, как в языке программирования, которая призвана избавить от повторяющегося кода. Миксины могут содержать целые фрагменты стилей, разрешенные в Sass. Давайте рассмотрим пример, для большей наглядности.

@mixin align-center position: absolute top: 50% left: 50% transform: translate(-50%, -50%) .container @include align-center

Создается миксин директивой @mixin , далее через пробел следует имя миксина, а также опционально передаваемые параметры. Сразу отмечу, что знаки дефиса (-) и нижнего подчеркивания (_) в имени миксина взаимозаменяемы. Миксин может содержать в себе не только правила, но и селекторы. Выше я привел пример элементарного миксина без параметров.

Вызывается миксин директивой @include и далее через пробел указываем имя созданного миксина. В примере выше — это центрирование блока по оси X и по оси Y с помощью абсолютного позиционирования. Если такое приходится применять часто, то согласитесь легче вызвать просто миксин, нежели писать стили центровки снова и снова.

Теперь давайте рассмотрим миксин с параметрами (аргументами).

@mixin border($width, $color) border: width: $width style: solid color: $color .square @include border(2px, #ccc)

Square { border-width: 2px; border-style: solid; border-color: #ccc; }

Как видим, после названия миксина в скобках мы задаем аргументы, в данном случае — это ширина бордюра и цвет. Это простейший миксин, который я привел для наглядности. На практике же можно встретить более сложные миксины с использованием различных условий и переменных. Но не будем сейчас все усложнять, надо всегда начинать с чего-то малого и простого, а потом уже двигаться по мере продвижения вверх.

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

Ну что ж, всем спасибо за внимание! Как всегда, вопросы задаем в комментариях и подписывайтесь либо на телеграм канал , либо на рассылку по email (форма в сайдбаре справа), чтобы не пропустить ничего интересного.

До встречи в других моих постах…

Привет, друзья!

Это подробное руководство по препроцессору Sass для начинающих. Здесь мы познакомимся с препроцессором Sass, его преимуществами, синтаксисом и рассмотрим возможности использования на примерах.

Класснуть

Плюсануть

Запинить

Спонсор выпуска - хостинг партнер: partnerwp.ru

Все Sass/CSS примеры и настроенный Gulp проект для данного урока вы можете скачать с GitHub .

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

Преимущества Sass

Совместимость с различными версиями CSS, благодаря которой вы можете использовать любые CSS библиотеки в вашем проекте;
Огромное количество разнообразных функций на любой случай жизни. Таким богатым функционалом могут похвастаться немногие CSS препроцессоры;
Sass - это один из самых старых CSS препроцессоров, вобравший большой опыт за долгие годы своего существования;
Замечательная возможность использовать Sass фреймворки, упрощающие жизнь разработчику. Один из таких фреймворков - Bourbon, который мы используем в некоторых выпусках Джедая верстки при написании Sass;
Синтаксис. Вы можете выбрать один из двух синтаксисов, который вам ближе - упрощенный (SASS) и развернутый CSS-подобный (SCSS).

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

Настройка окружения

В качестве окружения для работы с Sass в этом уроке, как и в других наших уроках, мы будем использовать версию Sass для таск-менеджера Gulp (gulp-sass ). Для использования оригинальной Ruby версии или компиляции Sass посредством специального ПО, вы можете ознакомиться с инструкциями на оф. сайте . Данный урок носит преимущественно практический характер, поэтому останавливаться на возможных вариантах подключения к проекту не будем, подключим Sass наиболее популярным способом, используя Gulp.

Убедитесь, что у вас установлена последняя версия Node.js и Gulp. Если Node.js не установлен, скачайте его и установите . После установки Node.js установите gulp командой "npm i -g gulp" (Windows) или "sudo npm i -g gulp" (Linux, OS X). Почитать: .

Npm i --save-dev gulp gulp-sass

Var gulp = require("gulp"), // Подключаем Gulp sass = require("gulp-sass"); // Подключаем Sass пакет gulp.task("sass", function() { // Создаем таск "sass" return gulp.src(["sass/**/*.sass", "sass/**/*.scss"]) // Берем источник.pipe(sass({outputStyle: "expanded"}).on("error", sass.logError)) // Преобразуем Sass в CSS посредством gulp-sass .pipe(gulp.dest("css")) // Выгружаем результата в папку css }); gulp.task("watch", function() { gulp.watch(["sass/**/*.sass", "sass/**/*.scss"], ["sass"]); // Наблюдение за sass файлами в папке sass }); gulp.task("default", ["watch"]);

Обратите внимание на строку 6 - здесь мы используем один из стилей вывода в результирующий файл: nested - вложенный, по умолчанию; expanded - развернутый; compact - компактный, когда селектор и его свойства в фигурных скобках выводятся в одну строку; compressed - сжатый. Кроме того, благодаря обработке .on("error", sass.logError) , если возникнет ошибка, нам не придется перезагружать команду выполенния Gulpfile и мы будем видеть, в какой строке Sass файла у нас ошибка. В примерах я буду использовать стиль вывода expanded для наглядности.

У вас должна быть следующая структура проекта в вашей файловой системе:

myproject/
- css/
  - common.css
- sass/
  - common.sass
- node_modules/
- gulpfile.js
- package.json

Запускаем выполнение Gulpfile командой gulp в терминале папки проекта.

Здесь мы берем все Sass файлы из директории sass/ вашего проекта и выгружаем готовый CSS результат в папку css/ . Кроме того, здесь мы устанавливаем наблюдение watch за изменениями в Sass файлах и автоматическую компиляцию в CSS, если такие изменения имеют место быть. Результирующий css файл подключается в верстку.

Если вам что-то не понятно по настройке Gulp пакетов в данном примере, прочтите руководство Gulp .

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

Синтаксис Sass

Есть 2 варианта написания Sass, 2 синтаксиса: SASS и SCSS. Самый старый вариант написания Sass - это синтаксис отступов . Именно этот вариант написания мы будем использовать в нашем уроке. Расширение файлов для такого синтаксиса - *.sass . Второй вариант - это синтаксис, расширяющий синтаксис CSS , Sassy CSS. SCSS пишется как обычный CSS, но расширен дополнительными возможностями Sass. Расширение файлов с SCSS синтаксисом - *.scss .

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

SASS и SCSS синтаксис:

SASS - синтаксис отступов	SCSS - синтаксис расширения
$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color	$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }

Кроме базовых правил написания (фигурные скобки, точка с запятой в конце строк), SASS и SCSS различаются также написанием некоторых функций. Так что будьте внимательны при использовании каких-либо примеров из интернета, проверяйте, какой именно синтаксис используется. Если довольно большой пример из интернета выполнен в SCSS стиле, а ваш проект написан в SASS, вы можете его импортировать в ваш основной файл, не меняя синтаксис и расширение файла посредством директивы @import , например, если вы скачали файл carousel.scss , то можете подключить его в ваш main.sass строкой @import "carousel" . Также можно поступить в обратной ситуации, когда необходимо импортировать *.sass файлы в файл main.scss. В нашем примере с Гитхаба, мы импортируем все _x.x.sass файлы в один common.sass , где x.x - это номер заголовка примера из данной статьи.

Мы будем использовать синтаксис отступов.

1. Расширение возможностей CSS с помощью Sass

1.1 Правила вложения

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

1.2 Привязка к родительскому селектору

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

Обратите внимание на правило body.firefox & , которое позволяет нам получить новую цепочку от любого элемента до текущего, если установить в конце & .

Кроме того, привязку к родителю можно использовать для создания составных селекторов:

1.3 Вложенные свойства

Для удобства, вы можете разбивать суффикс пространства имен свойства на вложения. Например, margin -top, margin -bottom, margin -left, margin -right имеют общую основу margin и могут быть разбиты на вложения следующим образом:

1.4 Селекторы-шаблоны

Иногда возникает ситуация, когда несколько элементов на странице используют одинаковую CSS базу, одинаковый набор свойств, характерный только для них. Данные базовые CSS правила можно оформить в виде селектора-шаблона для использования в нескольких местах Sass. Селекторы-шаблоны выводятся посредством директивы @extend .

2. SassScript

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

2.1 Переменные в Sass

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

2.2 Операции с числами и строками + интерполяция

Sass дает возможность использовать стандартные арифметические операции над числами, такие как сложение (+), вычитание (-), деление (/) и остаток от деления по модулю (%). Операторы сравнения (<, >, <=, >=, ==, !=) также поддерживаются для чисел.

Кроме того, в Sass есть возможность конкатенировать (соединять) строки.

Как видим из примера $summ: 10 + 20 / 2 , соблюдается приоритет в выполнении арифметических операций - сначала деление, потом сложение. Для определения порядка действий, можно использовать круглые скобки, как в математике. Обратите внимание, что при сложении 12px + 8px , мы получим 20px .

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

Интерполяция - это получение нового значения, используя другие.

Чаще всего интерполяция в Sass используется для получения нового значения переменной, благодаря "интегрированию" в значение другой переменной, посредством конструкции #{} , например:

Вы не можете просто взять и вставить в строку переменную, без использования интерполяции, как например, это можно сделать в PHP, в двойных кавычках. Обязательно используйте интерполяцию в переменные.

2.3 Операции с цветами

Цвета в Sass можно складывать, вычетать, делить и умножать. Все арифметические операции выполняются для каждого цвета отдельно: красного, зеленого и синего.

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

3. Директивы и правила

3.1 @import

Вы можете импортировать в ваш Sass файл sass , scss и css файлы с помощью директивы @import , при этом все миксины и переменные будут работать в основном файле, в который происходит импорт.

@import сработает как обычный CSS @import, если:

в пути к файлу присутствует http:// ;
файл вызывается через url() ;
или в импорте присутствуют медиапараметры.

Для того, чтобы другой файл был полноценно импортирован в основной Sass файл, необходимо, чтобы расширение файла было *.sass , *.scss или *.css .

Давайте рассмотрим некоторые примеры.

Следующие файлы импортированы не будут :

Следующие файлы будут импортированы:

Внимание! В новых версиях gulp-sass для импорта CSS файлов в Sass необходимо указывать расширение.css

Возможен импорт нескольких файлов, через запятую: @import "header", "media" .

Файлы, которые начинаются с нижнего подчеркивания, называются фрагменты и при импорте не требуют указания подчеркивания и расширения. Например, файл _header.sass можно импортировать так: @import "header" .

Обратите внимание, что импорт происходит в том месте, где вы указываете директиву @import . Соответственно, есть возможность делать вложенный импорт в том месте, где это необходимо:

#main @import "example"

3.2 @at-root

Директива @at-root поднимает содержимые в ней правила в корень, отменяя цепочку от родителя. Тут все просто:

Мы рассмотрели не все директивы, которые есть в Sass, а только самые используемые на практике. Если вас интересует более глубокое изучение Sass директив, обратитесь к документации .

4. Выражения

Sass поддерживает использование выражений и функций для различных условий, реализации циклов и т.д.

4.1 Директива @if()

Директива @if() позволяет осуществить выполнение SassScript с определенными условиями и имеет следующий синтаксис:

4.2 Директива @for

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

Вы можете указать through вместо to, если требуется пройтись от 1 до 11 включительно, а не только до 10, как в примере.

4.3 Директива @each

Если требуется пройтись по списку значений, а не просто чисел, можно использовать директиву @each :

4.4 Директива @while

@while циклично выводит блоки стилей, пока выражение является true .

5. Миксины

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

Миксин объявляется директивой @mixin , после объявления должно быть указано имя миксина. Вызывается миксин директивой @include , которая принимает имя миксина и передаваемые аргументы, если такие имеют место быть.

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

Сразу отвечу на вопрос - как работать с Sass стилями на готовом сайте, неужели нужно править готовый CSS и заливать по FTP? Нет, так делать нельзя. Вы должны иметь локальную копию ваших Sass стилей или даже целого сайта и после окончания работы деплоить (выгружать) по FTP готовые стили. Для этого, вы можете использовать Gulp пакет vinyl-ftp . Или настроить Sass окружение на вашем сервере для компиляции загружаемых по FTP/sFTP файлов.

На сегодня всё. Спасибо за внимание!