Синтаксис SASS. Основы Sass Sass не работает

Которая нужна для компиляции кода на препроцессорах SASS и LESS. Разберем как работать с препроцессором SASS.

Препроцессинг

Написание CSS само по себе весело, но когда таблица стилей становится огромной, то становится и сложно её обслуживать. И вот в таком случае нам поможет препроцессор. SASS позволяет использовать функции недоступные в самом CSS, например, переменные, вложенности, миксины, наследование и другие приятные вещи, возвращающие удобство написания CSS.

Как только Вы начинаете пользоваться SASS, препроцессор обрабатывает ваш SASS-файл и сохраняет его как простой CSS-файл, который Вы сможете использовать на любом сайте.

Переменные

Думайте о переменных, как о способе хранения информации, которую вы хотите использовать на протяжении написания всех стилей проекта. Вы можете хранить в переменных цвета, стеки шрифтов или любые другие значения CSS, которые вы хотите использовать. Чтобы создать переменную в Sass нужно использовать символ $. Рассмотрим пример:

$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }

Когда Sass обрабатывается, он принимает значения, заданные нами в $font-stack и $primary-color и вставляет их в обычном CSS-файле в тех местах, где мы указывали переменные как значения. Таким образом переменные становятся мощнейшей возможностью, например, при работе с фирменными цветами, используемыми на всем сайте.

Body { font: 100% Helvetica, sans-serif; color: #333; }

Вложенности

При написании HTML, Вы, наверное, заметили, что он имеет четкую вложенную и визуальную иерархию. С CSS это не так.

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

Чтобы понять что мы имеем ввиду, приведем типичный пример стилей навигации на сайте:

Nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }

Вы заметили, что селекторы ul, li, и a являются вложенными в селектор nav? Это отличный способ сделать ваш CSS-файл более читабельным. Когда вы сгенерируете CSS-файл, то на выходе вы получите что-то вроде этого:

Nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }

Фрагментирование

Вы можете создавать фрагменты Sass-файла, которые будут содержать в себе небольшие отрывки CSS, которые можно будет использовать в других Sass-файлах. Это отличный способ сделать ваш CSS модульным, а также облегчить его обслуживание. Фрагмент - это простой Sass-файл, имя которого начинается с нижнего подчеркивания, например, _partial.scss. Нижнее подчеркивание в имени Sass-файла говорит компилятору о том, что это только фрагмент и он не должен компилироваться в CSS. Фрагменты Sass подключаются при помощи директивы @import.

Импорт

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

Например, у вас есть несколько фрагментов Sass-файлов - _reset.scss и base.scss. И мы хотим импортировать _reset.scss в base.scss.

// _reset.scss html, body, ul, ol { margin: 0; padding: 0; } // base.scss @import "reset"; body { font: 100% Helvetica, sans-serif; background-color: #efefef; }

Обратите внимание на то, что мы используем @import ‘reset’; в base.scss файле. Когда вы импортируете файл, то не нужно указывать расширение.scss. Sass - умный язык и он сам догадается. Когда CSS сгенерируется вы получите:

Html, body, ul, ol { margin: 0; padding: 0; } body { font: 100% Helvetica, sans-serif; background-color: #efefef; }

Миксины (примеси)

Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3, где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов. Миксины позволяют создавать группы деклараций CSS, которые вам придется использовать по нескольку раз на сайте. Хорошо использовать миксины для вендорных префиксов. Пример для border-radius:

@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); }

Для создания миксина используйте директиву @mixin + название этого миксина. Мы назвали наш миксин border-radius. Также, в миксине мы используем переменную $radius внутри скобок, тем самым позволяя себе передавать в переменной все, что захотим. После того, как вы создали миксин, вы можете его использовать в качестве параметра CSS, начиная вызов с @include и имени миксина. Когда ваш CSS скомпилируется вы получите следующее:

Box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }

Наследование

Это одна из самых полезных функций Sass. Используя директиву @extend можно наследовать наборы свойств CSS от одного селектора другому. Это позволяет держать ваш Sass-файл в «чистоте». В нашем примере мы покажем вам как сделать стили оповещений об ошибках, предупреждениях и удачных исходов.

Message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } .error { @extend .message; border-color: red; } .warning { @extend .message; border-color: yellow; }

Вышеуказанный код позволяет взять свойства CSS из.message и применить их в.success, .error и.warning. Во время компиляции CSS-файла работает магия, которая поможет вам избежать написания лишних классов в HTML элементах. Результат выглядит вот так:

Message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; }

Математические операторы

Использовать математику в CSS очень полезно. Sass имеет несколько стандартных математических операторов, таких как +, -, *, / и %. В нашем примере мы совершаем простые математические вычисления для расчета ширины aside и article.

Container { width: 100%; } article { float: left; width: 600px / 960px * 100%; } aside { float: right; width: 300px / 960px * 100%; }

Мы создали простую адаптивную модульную сетку, с шириной в 960 пикселей. Используя математические операторы, мы использовали полученные данные с пиксельными значениями и конвертировали их в процентные, причем без особых усилий. Скомпилированный CSS выглядит так:

Container { width: 100%; } article { float: left; width: 62.5%; } aside { float: right; width: 31.25%; }

Практический пример:

В своем файле HTML нам нужен лишь очень простой код и ссылка на файл CSS в папке CSS нашего проекта.

Вот и весь нужный нам HTML! Теперь перейдем к Sass. Войдите в любимый текстовый редактор и создайте новый файл, сохраните его в папку sass и назовите style.scss. Чтобы было проще, мы будем писать все в SCSS, который Sass тоже умеет обрабатывать, да и SCSS не очень-то строг с новичками. В начале своего файла мы напишем базовый сброс для HTML, импорт для Compass и пропишем переменные цвета для кнопки.

@import "compass"; //Простой сброс body, div, a { margin: 0; padding: 0; border: 0; } a {text-decoration: none;} a:focus {outline: 0;} //Переменные цвета $button-colour: #2e6bc6; $button-start: #37a0dc; $button-stop: #2068a6; $border: #163861; $text-shadow: #06304b; //Цвета при проведении мышью $button-hover-colour: #2e7dc6; $button-hover-start: #3f9ff0; $button-hover-stop: #2874a9; $focus-shadow: #0b3c5f; //Основные стили body { font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; }

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

Назначение стилей кнопке

Давайте назначим стили этой кнопке! Мы начнем с применения основных стилей к тэгу с классом button. Я установил здесь базовые стили кнопки, и обратите внимание на то, как я употребляю переменные.

А теперь перейдем к интересной части! Помните импорт Compass, помещенный в начале таблицы стилей? Здесь мы воспользуемся им, потому что у Compass есть большая библиотека встроенных классов, которые включают префиксы CSS3 для тех браузеров, которым все еще нужна префиксная поддержка.

Button { width: 158px; height: 30px; margin: 120px auto; font-size: 16px; font-weight: bold; text-align: center; display: block; color: #fff; padding: 7px 0 0; border: 1px solid $border; text-shadow: 0 -1px 0 $text-shadow; position: relative; //Классы Compass @include background($button-colour linear-gradient(top, $button-start 20%, $button-stop)); @include border-radius(3px); @include box-shadow(inset 0 1px 0 rgba(#fff, 0.8)); @include transition(all 0.3s ease); }

После первоначального определения стилей мы можем включить несколько абстрактных классов для фоновых цветов, линейных градиентов, радиусов рамки и переходов. Лучше всего то, что все будет компилироваться только с нужными префиксами, и сэкономит нам на их написании время! Класс пока будет компилироваться в файле style.css в следующее:

Button { width: 158px; height: 30px; margin: 120px auto; font-size: 16px; font-weight: bold; text-align: center; display: block; color: #fff; padding: 7px 0 0; border: 1px solid #163861; text-shadow: 0 -1px 0 #06304b; position: relative; background: #2e6bc6 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #37a0dc), color-stop(100%, #2068a6)); background: #2e6bc6 -webkit-linear-gradient(top, #37a0dc 20%, #2068a6); background: #2e6bc6 -moz-linear-gradient(top, #37a0dc 20%, #2068a6); background: #2e6bc6 -o-linear-gradient(top, #37a0dc 20%, #2068a6); background: #2e6bc6 linear-gradient(top, #37a0dc 20%, #2068a6); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

Написание стилей с вложенными элементами

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

Button { &:hover { @include background($button-hover-colour linear-gradient(top, $button-hover-start 20%, $button-hover-stop)); @include box-shadow(inset 0 1px 1px rgba(#fff, 0.95)); } &:active { @include background(linear-gradient(bottom, $button-start 20%, $button-stop)); text-shadow: 0 1px 0px $text-shadow; @include box-shadow(inset 0 2px 8px $focus-shadow); } }

После стилей основной кнопки можно вложить селекторы псевдоклассов для состояний элемента:hover и:active, с помощью амперсанда, который будет говорить Sass, что это – вложенный класс, прикрепленный к родительскому элементу. В состоянии проведения мышью:hover можно добавить выразительности градиенту и внутренней тени, использовав абстрактные классы Compass, тогда как активное состояние:active переворачивает градиент и меняет тень блока так, что создается впечатление нажатия кнопки.

Button:hover { background: #2e7dc6 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3f9ff0), color-stop(100%, #2874a9)); background: #2e7dc6 -webkit-linear-gradient(top, #3f9ff0 20%, #2874a9); background: #2e7dc6 -moz-linear-gradient(top, #3f9ff0 20%, #2874a9); background: #2e7dc6 -o-linear-gradient(top, #3f9ff0 20%, #2874a9); background: #2e7dc6 linear-gradient(top, #3f9ff0 20%, #2874a9); -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95); -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95); } .button:active { background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(20%, #37a0dc), color-stop(100%, #2068a6)); background: -webkit-linear-gradient(bottom, #37a0dc 20%, #2068a6); background: -moz-linear-gradient(bottom, #37a0dc 20%, #2068a6); background: -o-linear-gradient(bottom, #37a0dc 20%, #2068a6); background: linear-gradient(bottom, #37a0dc 20%, #2068a6); text-shadow: 0 1px 0px #06304b; -webkit-box-shadow: inset 0 2px 8px #0b3c5f; -moz-box-shadow: inset 0 2px 8px #0b3c5f; box-shadow: inset 0 2px 8px #0b3c5f; }

Выше показано, что получается после того, как состояния:active и:hover компилируются в Sass’е; они написаны, как селекторы псевдоклассов к родительскому элементу в действенном CSS, а также нужный нам CSS, дополненный альтернативами, для завершения нашей кнопки с тремя состояниями.

Файл style.scss и скомпилированная таблица стилей

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

Sass (Syntactically Awesome Stylesheets) - це скриптова метамова, яка компілюється в звичайні CSS-стилі. Якщо ви добре знайомі з CSS + HTML, то з SASS розберетеся за кілька днів.

Всі, хто стикається з CSS розміром більше 500 рядків, мають справу з головним болем на тему того, як би його спростити. На жаль, з часів розробки стандартів каскадних стилів їх структура кардинально не змінювалася. Вимоги до верстки, кому я буду брехати, - ускладнилися в рази. Якщо колись 50-70 рядків стилів могли оформити простий сайт, то сьогодні такого обсягу вистачить хіба що на header. Та й то - тільки на мій:).

2007 року з’явилася перша версія SASS, розроблена Гемптоном Кетліном. Не думаю, що простий набір правил і примітивний компілятор замислювалися тоді як одні з основних інструментів фронтенд-майстрів і верстальників сучасного інтернету.

Розширення SASS-файлів можуть бути .sass і .scss - це залежить від обраного синтаксису. Браузер, втім, не розуміє жодного з них, тому для взаєморозуміння потрібно використовувати компілятор. Його завдання - привести SASS в зрозумілий класичний CSS, який буде розпізнано будь-яким браузером.

Роль компілятора може виконувати серверний js або програма, встановлена ​​у вас на робочій машині і моніторять зміни в робочих файлах.

Які бувають синтаксиси в Sass

У мови є два основних «діалекти»: SASS і новіший SCSS. Відмінності між ними невеликі, проте порушення правил синтаксису не дозволить скомпілювати файл. У SASS-синтаксисі немає фігурних дужок, вкладеність елементів в ньому реалізована за допомогою відступів, а стильові правила обов’язково відокремлені новими рядками.

Незалежно від синтаксису, SCSS назад сумісний з CSS. Тобто будь-який CSS обов’язково буде дійсним SCSS-кодом.

Через відсутність дужок і крапок з комою зворотної сумісності у SASS-синтаксису з CSS немає.

Вигоди Sass

Спочатку розкажу в двох словах і далі трохи докладніше. Мені в CSS завжди не вистачало змінних і заважали хаки для кросбраузерності. Нижче на прикладах ви побачите, що SASS вирішує ці дві проблеми блискуче.

Змінні (variables)

Sass дозволяє призначати змінні - і це одна з ключових переваг. Змінна, за аналогією з php, починається зі знака долара ($), значення присвоюються за допомогою двокрапки.

Змінні в Sass можна розділити на 4 типи:

1. число (int)
2. строка (string)
3. логічний тип (так/ні, boolean)
4. кольори (ім’я, імена)

Наведу простий приклад, після якого стаття втратить актуальність, тому як вам стане все ясно і ви зможете самі все зрозуміти.

SCSS-синтаксис

$blue: #3bbfce; /* колір */ $margin: 16px; /* відступ */ $fontSize: 14px; /* розмір тексту */ .content { border: 1px solid $blue; /* синій бордюр */ color: darken($blue, 20%); /* затемнення кольору на 20% */ } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; }

SASS-синтаксис

$blue: #3bbfce $margin: 16px $fontSize: 14px .content border: 1px solid $blue color: darken($blue, 20%) .border padding: $margin / 2 margin: $margin / 2 border-color: $blue

Результат в CSS

Content { border: 1px solid #3bbfce; color: #217882; } .border { padding: 8px; margin: 8px; border-color: #3bbfce; }

Як бачите, в результаті ми отримуємо звичайний CSS. Поїхали далі.

Вкладені правила (nesting)

Я б Sass вивчив тільки за те, що в ньому є нестінг. Це значно спрощує редагування стилів і навігацію по робочому файлу стилів.

Nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }

Nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }

Вам більше не доведеться стежити за вкладеністю елементів і правильністю успадкування класів. Візуально вкладені в Sass всередину батьківського елемента правила будуть збережені з тієї ж ієрархією з урахуванням правил CSS.

Доповнення (mixin)

Правило DRY (Do not Repeat Yourself) реалізовано в Sass за допомогою техніки mixin. Ті шматки коду, які в CSS зазвичай вам доводилося дублювати, тут можна зберегти в окремій змінної і вставляти в потрібних місцях. Компілятор, зустрівши таку змінну, збереже замість неї потрібний шматок коду.

@mixin table-base { th { text-align: center; font-weight: bold; } td, th { padding: 2px } } #data { @include table-base; }

#data th { text-align: center; font-weight: bold; } #data td, #data th { padding: 2px; }

Аргументи (arguments)

Доповнення вміють змінювати код в залежності від переданих їм аргументів. Наприклад, кросбраузерності обведення з Хакамі можна вмістити в один рядок.

@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box-1 { @include border-radius(10px); } .box-2 { @include border-radius(5px); }

Box-1 { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } .box-2 { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; }

Наслідування (extend)

Створивши одного разу будь-яке правило, ми можемо використовувати його всередині іншого. Наслідуваний елемент отримає всі властивості вихідного класу, які ми можемо доповнити будь-якими іншими.

Error { border: 1px #f00; background: #fdd; } .error.intrusion { font-size: 1.3em; font-weight: bold; } .badError { @extend .error; border-width: 3px; }

Error, .badError { border: 1px #f00; background: #fdd; } .error.intrusion, .badError.intrusion { font-size: 1.3em; font-weight: bold; } .badError { border-width: 3px; }

Ці прості можливості збільшують швидкість верстки і не дають загубитися в купі коду. У всякому разі, мені. Корисно запам’ятати, що вся документація по SASS є на

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

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

Самый простой способ получить такой результат - использовать терминал. После того, как Sass установлен, вы можете компилировать ваш Sass в CSS , используя команду sass . Вам всего лишь нужно сообщить Sass, где взять файл Sass и в какой файл CSS его скомпилировать. Например, запустив команду sass input.scss output.css в терминале, вы сообщаете Sass взять один Sass файл, input.scss , и скомпилировать в файл output.css .

Также, вы можете следить за изменениями только определенных файлов или папок, используя флаг --watch . Данный флаг сообщает Sass, что необходимо следить за изменениями указанных файлов и при наличии таковых производить перекомпиляцию CSS после сохранения файлов. Если вы хотите отслеживать изменения (вместо ручной перекомпиляции) вашего файла, например, input.scss , то вам необходимо просто добавить флаг в команду:

sass –watch input.scss output.css

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

Sass --watch app/sass:public/stylesheets

Sass будет отслеживать все файлы в директории app/sass и компилировать CSS в директорию public/stylesheets .

Переменные

Думайте о переменных, как о способе хранения информации, которую вы хотите использовать на протяжении написания всех стилей проекта. Вы можете хранить в переменных цвета, стеки шрифтов или любые другие значения CSS , которые вы хотите использовать. Чтобы создать переменную в Sass нужно использовать символ $ . Рассмотрим пример:

SCSS Syntax

Sass Syntax

CSS Output

Когда Sass обрабатывается, он принимает значения, заданные нами в $font-stack и $primary-color и вставляет их в обычном CSS -файле в тех местах, где мы указывали переменные как значения. Таким образом переменные становятся мощнейшей возможностью, например, при работе с фирменными цветами, используемыми на всем сайте.

Вложенности

При написании HTML , Вы, наверное, заметили, что он имеет четкую вложенную и визуальную иерархию. С CSS это не так.

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

Чтобы понять что мы имеем ввиду, приведем типичный пример стилей навигации на сайте:

SCSS Syntax

Sass Syntax

CSS Output

Вы заметили, что селекторы ul , li , и a являются вложенными в селектор nav ? Это отличный способ сделать ваш CSS -файл более читабельным. Когда вы сгенерируете CSS -файл, то на выходе вы получите что-то вроде этого:

Фрагментирование

Вы можете создавать фрагменты Sass-файла, которые будут содержать в себе небольшие отрывки CSS , которые можно будет использовать в других Sass-файлах. Это отличный способ сделать ваш CSS модульным, а также облегчить его обслуживание. Фрагмент - это простой Sass-файл, имя которого начинается с нижнего подчеркивания, например, _partial.scss . Нижнее подчеркивание в имени Sass-файла говорит компилятору о том, что это только фрагмент и он не должен компилироваться в CSS. Фрагменты Sass подключаются при помощи директивы @import .

Импорт

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

Например, у вас есть несколько фрагментов Sass-файлов - _reset.scss и base.scss . И мы хотим импортировать _reset.scss в base.scss .

SCSS Syntax

Sass Syntax

CSS Output

Обратите внимание на то, что мы используем @import "reset"; в base.scss файле. Когда вы импортируете файл, то не нужно указывать расширение.scss . Sass - умный язык и он сам догадается.

Миксины (примеси)

Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3 , где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов. Миксины позволяют создавать группы деклараций CSS , которые вам придется использовать по нескольку раз на сайте. Вы даже можете передавать переменные в миксины, чтобы сделать их более гибкими. Так же хорошо использовать миксины для вендорных префиксов. Пример для transform:

SCSS Syntax

Sass Syntax

CSS Output

To create a mixin you use the @mixin directive and give it a name. We"ve named our mixin transform . We"re also using the variable $property inside the parentheses so we can pass in a transform of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin.

Расширение/Наследование

Это одна из самых полезных функций Sass. Используя директиву @extend можно наследовать наборы свойств CSS от одного селектора другому. Это позволяет держать ваш Sass-файл в «чистоте». В нашем примере мы покажем вам как сделать стили оповещений об ошибках, предупреждениях и удачных исходах, используя другие возможности Sass, которые идут рука-об-руку с расширением, классами-шаблонами. Класс-шаблон - особый тип классов, который выводится только при использовании расширения - это позволит сохранить ваш скомпилированный CSS чистым и аккуратным.

SCSS Syntax

Sass Syntax

CSS Output

Вышеуказанный код сообщает классам.message , .success , .error и.warning вести себя как %message-shared . Это означает, что где бы не вызывался %message-shared , то и.message , .success , .error и.warning тоже будут вызваны. Магия происходит в сгенерированном CSS , где каждый из этих классов получает css-свойства, как и %message-shared . Это позволит вам избежать написания множества классов в HTML элементах.

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

Когда вы генерируете ваш CSS , то он будет выглядеть как пример ниже. Обратите внимание, %equal-heights не попадает в CSS , так как ни разу не был использован.

Математические операторы

Использовать математику в CSS очень полезно. Sass имеет несколько стандартных математических операторов, таких как + , - , * , / и % . В нашем примере мы совершаем простые математические вычисления для расчета ширины aside и article .

SCSS Syntax

Sass Syntax

CSS Output

Мы создали простую адаптивную модульную сетку, с шириной в 960 пикселей. Используя математические операторы, мы использовали полученные данные с пиксельными значениями и конвертировали их в процентные, причем без особых усилий. Скомпилированный CSS выглядит так.

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

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

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

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

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

Переменные

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

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

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

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

// Моя библиотека цветов 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;} aside { margin-bottom: $unit*2; /* 20px */} footer{ margin-top: $unit*4; /* 40px */}

Примеси

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

Например, у вас на сайте есть разделитель, который вы используете довольно часто. Например, вы можете им разбивать основные блоки (например, articles и header) или четные параграфы. Разделитель имеет нижний отступ, нижнее поле, рамку и тень.

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

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.

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

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

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

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

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

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

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

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

$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 */ .module h3 { font-weight: bold;} .module p { padding-bottom: 10px;}

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

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

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

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

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

Оператор @import
позволяет подключить содержимое стороннего CSS(SCSS)-файла в текущий CSS(SCSS)-файл.
@import не разрешается вставлять после любых объявлений кроме @charset или другого @import .

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

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

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

Циклы в SASS

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

SCSS

Скомпилировано в:

CSS

Оператор @extend

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

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

SCSS

Скомпилировано в:

CSS