Которая нужна для компиляции кода на препроцессорах 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 { 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; }

Давайте назначим стили этой кнопке! Мы начнем с применения основных стилей к тэгу с классом 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.

27.07.2017

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

Что такое SASS?

SASS (Syntactically Awesome Style Sheets) - один из самых популярных . Он представляет собой набор функций для CSS, которые позволяют кодить быстрее и эффективнее. SASS поддерживает интеграцию с Firefox Firebug. SassScript позволяет создавать переменные, вложенные стили и наследуемые селекторы.

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

Зачем нужен SASS?

Большинство фронтенд фреймворков, включая Bootstrap, Materialize и Foundation, созданы с помощью этого отличного препроцессора. Знание SASS поможет вам использовать больше функций этих фреймворков.

Как использовать SASS?

Существует много приложений, которые позволяют легко и быстро начать использовать SASS: CodeKit, Compass, Koala и т.д. Вы узнаете о них в других частях туториала. В этой главе мы не будем использовать никаких приложений или инструментов кроме тех, которые необходимы для запуска SASS на компьютере. Вам не придется волноваться об операционной системе, потому что всё будет понятно всем пользователям.

Скачивание и Установка SASS

Установить SASS можно только на машину, на которой уже есть Ruby:

• Ruby предустановлен на Mac, так что вы можете сразу установить Sass Macintosh;
• Если вы работаете на Windows, то вам необходимо сначала скачать Ruby ;
• Ruby на Linux можно скачать через систему управления пакетами (apt package manager), rbenv или rvm.

После установки Ruby на вашу машину можно установить SASS. Давайте откроем командную строку Ruby и установим SASS на вашу систему:

Gem install sass

Если команда выше не сработает, то вам, возможно, придется использовать sudo команду:

Sudo gem install sass

Если вы хотите проверить версию SASS используйте следующую команду:

SASS установлен. Давайте создадим папку проекта и назовем ее sass-basic. Создайте базовый html файл со следующим кодом:

My First SASS Project

Hello friend I am learning SASS and it"s really awesome.

Body{ text-align: center; } h1{ color: #333; } p{ color: #666; }

Теперь нужно компилировать этот файл используя командную строку/терминал. Давайте откроем командную строку в той же директории (возможно, придется использовать командную строку Ruby, если обычная командная строка не работает). Вбейте следующее и нажмите Enter:

Sass --watch style.scss:style.css

Вы заметите, что сгенерировались новые файлы: style.css и style.css.map. Стоит отметить, что не нужно трогать map файл, также как и.css файл. Если вы хотите внести какие-то изменения, то это можно сделать через style.scss. Вам не понадобится повторять этот процесс при каждом изменении стилей. Компиляция SASS будет работать автоматически при внесении изменений в.scss файл.

В следующей главе мы рассмотрим SASS переменные, и почему они являются самой полезной функций SASS (и в любом другом CSS препроцессоре).

Вы давно хотите изучить sass, но не знали с чего начать? Или вы и так уже используете sass, но знания поверхностные и их хотелось бы прокачать? Данная статья поможет вам уверенно использовать всю мощь препроцессора sass и получать удовольствие от работы с ним.

Ранее я публиковал статью о том, . Теперь же я хочу поведать о более предпочтительном для меня препроцессоре sass.

Что такое sass?

Sass (Syntactically Awesome Style Sheets) — это препроцессор стилей css. Sass добавляет такой функционал к css, что работать с ним становится значительно легче, быстрее и приятней.

Установка sass и как с ним работать

Это первый вопрос которым задается веб-разработчик, который хочет начать использовать препроцессор. Есть несколько вариантов:

• Использовать родной компилятор Ruby Sass gem install sass и компилировать его с помощью команды sassc myfile.scss myfile.css
• Использовать GUI программы: Hammer, CodeKit, Koala или Compass
• Воспользоваться таск-менеджерами или консольными утилитами: gulp, grunt, libsass

По опыту могу сказать, что если вы один разработчик фронт-енда на проекте, то выбрать можно то, что удобней именно для вас. Если не нравится пользоваться консолью или прописывать таски для менеджера, то программы с графическим интерфейсом отлично подойдут. Но если же у вас крупный проект, с которым работают несколько людей с разными операционными системами, то однозначно лучше использовать gulp или grunt.

В чем разница между.sass и.scss?

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

После того, как мы установили компилятор sass, создали файл в проекте с расширением.scss приступим к синтаксису препроцессора.

Переменные

Одним из лучших новшеств, которое добавляет sass в css это использование переменных. Они задаются с помощью символа $

$primaryColor: #eeffcc;

Если вы попробуете скомпилировать этот код, на выходе ничего не будет. Потому что это просто переменная в своем scope. Её необходимо использовать таким образом:

$primaryColor: #eeffcc; body { background: $primaryColor; }

Говоря про scope я имею ввиду, что у каждой переменной есть как и в js своя область видимости.

$primaryColor: #eeccff; body { $primaryColor: #ccc; background: $primaryColor; } p { color: $primaryColor; } // После компиляции у абзаца p будет цвет #eeccff

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

$primaryColor: #eeccff; body { $primaryColor: #ccc !global; background: $primaryColor; } p { color: $primaryColor; } // После компиляции у абзаца p цвет будет #ccc

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

Математика

В отличии от css, sass позволяет производить математические вычисления при задании свойств селекторам.

Поддерживаемые операции:

Сразу скажу о «подводных камнях» при работе с математическими символами.

Во-первых символ деления / встречается при задании шрифта font: 14px/16px , и этот символ по умолчанию не обрабатывается как математический между строчными значениями. Для того что бы делить строчные значения их необходимо оборачивать круглыми скобками.

$fontDiff: (14px/16px);

Во-вторых вы не можете смешивать размерности при математических операциях.

//Так нельзя $container-width: 100% - 20px;

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

Пример использования математических операций:

$container-width: 100%; .container { width: $container-width; } .col-4 { width: $container-width / 4; } // Скомпилируется в: // .container { // width: 100%; // } // // .col-4 { // width: 25%; // }

Функции

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

Например при использовании функции darken() можно в одну строку задать фон при наведении для кнопки, без подбора цветов в photoshop или в вашей IDE.

$awesome-blue: #2196F3; a { padding: 10 15px; background-color: $awesome-blue; } a:hover { background-color: darken($awesome-blue,10%); } //Скомпилируется в: //a { // padding: 10 15px; // background-color: #2196F3; //} // //a:hover { // background-color: #0c7cd5; //}

Вложенность

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

Для понимания, обычно в css что бы задать свойства элемента находящегося внутри родителя мы задаем селектор таким образом:

Container { width: 100%; } .container h1 { color: red; }

В sass же этот же код можно записать так:

Container { width: 100%; h1 { color: red; } }

Правда же здорово? Но для полной гибкости вложенности существует оператор & , который позволяет обращаться к родителю.

A.myAnchor { color: blue; &:hover { //скомпилируется как a.myAnchor:hover text-decoration: underline; } &:visited { //скомпилируется как a.myAnchor:visited color: purple; } }

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

First-component { .text { font-size: 1.4rem; } .button { font-size: 1.7rem; } @at-root .second-component { .text { font-size: 1.2rem; } .button { font-size: 1.4rem; } } }

после компиляции css будет выглядеть так:

First-component .text { font-size: 1.4rem; } .first-component .button { font-size: 1.7rem; } .second-component .text { font-size: 1.2rem; } .second-component .button { font-size: 1.4rem; }

Вложенность сильно улучшает читаемость кода и дальнейшую поддержку его. Только есть одно правило, придерживаться которого рекомендуют сами разработчики sass.

Не используйте больше 4 уровней вложенности в sass.

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

Импортирование

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

@import "part/grids.scss";

По факту вам даже необязательно нужно указывать формат файла.

@import "part/grids";

Если имя файла будет начинаться с нижнего подчеркивания _partial.scss , то он будет выполнен, но на выходе файл css не выдаст. Так обычно называют все файлы scss, которые будут импортироваться в главном файле, что бы выполниться они выполнились, но побочных файлов css не создали.

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

В sass директива @extend позволяет наследовать стили другого класса, заданного ранее.
Например у вас есть стили input, а вам необходимо стилизовать похожий input, но модифицированный.

Input { border-radius: 3px; border: 4px solid #ddd; color: #555; font-size: 17px; padding: 10px 20px; display: inline-block; outline: 0; } .error-input { @extend .input; border:4px solid #e74c3c; }

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

Input, .error-input { border-radius: 3px; border: 4px solid #ddd; color: #555; font-size: 17px; padding: 10px 20px; display: inline-block; outline: 0; } .error-input { border: 4px solid #e74c3c; }

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

%input-style { font-size: 14px; } input { @extend %input-style; color: black; }

При использовании символа % , код не будет скомпилирован в css сам по себе, а лишь в классе-наследнике.

Миксины

Директива миксинов в sass невероятно полезна, она по сути выполняет схожий функционал как и @extend , только выполняя при этом функцию, в которую можно передать параметры.

Sass использует директиву @mixin для задание функции миксина и директиву @include для использования миксина.

Давайте для примера создадим миксин, который будет задавать media queries для респонсива.

Первым шагом будет определение миксина:

@mixin media($queryString){ }

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

@mixin media($queryString){ @media #{$queryString} { @content; } }

Так как мы хотим, что бы строка, которая передается в аргументе функции выполнялась как код, её необходимо обернуть в #{} .
Вторым кусочком пазла является директива @content , когда миксином оборачиваются стили, то они будут доступны через директиву @content .

Вот как будет выглядеть вызов миксина:

Container { width: 900px; @include media("(max-width: 767px)"){ width: 100%; } }

Директива функции

С помощью директивы @function можно создавать функции похожие на миксины, разница только в том, что такие функции отдают не стили, а итоговое значение директивой @return .

@function getColumnWidth($width, $columns,$margin){ @return ($width / $columns) - ($margin * 2); }

Теперь мы можем использовать данную функцию в коде ниже:

$container-width: 100%; $column-count: 4; $margin: 1%; .container { width: $container-width; } .column { background: #1abc9c; height: 200px; display: block; float: left; width: getColumnWidth($container-width,$column-count,$margin); margin: 0 $margin; }

Не дурно, да?

Демо

Теперь на основе полученных знаний мы построим собственную настраиваемую сетку с responsive design.

Прежде всего зададим карту настроек сетки:

$settings: (maxWidth: 800px, columns: 12, margin: 15px, breakpoints: (xs: "(max-width: 480px)", sm: "(max-width: 768px) and (min-width: 481px)", md: "(max-width: 1024px) and (min-width: 769px)", lg: "(min-width: 1025px)"));

Теперь объявим миксин, который будет генерировать нашу сетку.

@mixin renderGridStyles($settings){ }

Так как целью является построить сетку для всех media queries, то мы сделаем цикл, который будет пробегаться по всем @each значениям карты настроек, которую мы будем считывать с помощью директивы map-get .

@mixin renderGridStyles($settings){ $breakpoints: map-get($settings, "breakpoints"); @each $key, $breakpoint in $breakpoints { @include media($breakpoint) { } } }

Нам нужно создать сетку с колонками используя цикл. Для этого создадим еще один миксин renderGrid . С помощью map-get мы получим нужные значения, а с помощью директивы @while пройдемся по ним. Для динамического создания имен классов колонок будем использовать итератор $i .

@mixin renderGrid($key, $settings) { $i: 1; @while $i <= map-get($settings, "columns") { .col-#{$key}-#{$i} { float: left; width: 100% * $i / map-get($settings,"columns"); } $i: $i+1; } }

Теперь создадим контейнер для рядов нашей сетки:

Container { padding-right: map-get($settings, "margin"); padding-left: map-get($settings, "margin"); margin-right: auto; margin-left: auto; } .row { margin-right: map-get($settings, "margin") * -1; margin-left: map-get($settings, "margin") * -1; }

Все готово! Мы создали 12-ти колончатую сетку с поддержкой отзывчивого дизайна, которую легко можно изменять с помощью карты настроек.

Данная статья является вступительной, в дальнейшем я опубликую подробнее о синтаксисе sass, архитектуре стилей для крупных проектов и многое другое. Так что подписывайтесь на мой блог и будете в курсе новых публикаций.

Написание большого количества CSS-кода может быть очень утомительным, поэтому изучение SASS и LESS может сделать жизнь любого веб-разработчика и дизайнера ощутимо легче.

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

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

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

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

Доступны два основных варианта: SASS и LESS . В данной статье, я расскажу о SASS .

Недостатки CSS

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

Давайте рассмотрим слабые места использования «чистого » CSS:

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

Преимущества использования препроцессоров

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

Взгляните теперь на список преимуществ использования препроцессоров:

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

Что такое SASS?

SASS расшифровывается как Syntactically Awesome Style Sheets – если переводить дословно, то это звучит как: «Синтаксически потрясающие таблицы стилей ».

Эта технология была придумана и воплощена Хэмптоном Катлином (Hampton Catlin ). SASS манипулирует CSS-правилами, используя переменные, так называемые миксины (mixins ), наследование и вложенность.

Исходные и скомпилированные файлы имеют расширения .sass и .scss , соответственно. Исходники переводятся в хорошо отформатированный CSS-код с помощью командной строки или веб-плагина.

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

Формат.sass против.scss

Перед началом рассказа о том, как использовать SASS , сравним форматы расширений .sass и .scss , генерируемых SASS . Для начала я представлю вам простой CSS-код, а затем покажу, как его упростить с помощью обоих расширений SASS .

CSS-код

Для исходного примера я использовал тег header и присвоил нулевое значение свойствам margin и padding , а затем прописал белый цвет для свойства color :

header { margin: 0; padding: 0; color: #fff; }

Формат.scss (новый синтаксис SASS)

Чтобы написать приведенный выше пример в формате .scss , мы будем использовать переменную $color и дадим ей шестнадцатеричное значение: #fff , которое соответствует белому цвету.

$color: #fff; header { margin: 0; padding:0; color: $color; }

Формат.sass (старый синтаксис SASS)

Для .sass мы имеем такую же переменную и значение, как и для .scss , но точки с запятой и фигурные скобки не используются.

Заметьте, что синтаксис зависим от абзацев. Это старый формат SASS :

$color: #fff header margin: 0 padding: 0 color: $color

Вот что вам понадобится для успешного завершения практики по данной статье:

• Инсталлятор Ruby;
• Текстовый редактор;
• Время и терпение.

Установка Ruby

Чтобы опробовать SASS , вам нужно скачать Ruby . Запустите программу установки и, выбрав в появившемся окне подходящий язык интерфейса, нажмите OK :

Затем поставьте отметку о том, что вы согласны с условиями лицензии и нажмите «Далее ».

После этого, произведите установку в желаемое место на жестком диске и убедитесь, что выбрана радио-кнопка «Add Ruby executables to your PATH ». Нажмите кнопку «Install » и установка завершена:

Проверка правильности запуска Ruby

Теперь, у вас на компьютере установлен Ruby и пришло время проверить его работоспособность. Откройте командную строку и введите ruby -v .

Команда должна возвратить текущую версию и дату установленного Ruby. Если возвращена ошибка, то значит Ruby был установлен некорректно, либо переменные окружения Ruby не были зарегистрированы:

Установка SASS

Чтобы установить SASS , откройте командную строку и введите gem install sass , после этого вы должны получить сообщение об успешном окончании установки:

Подготовка необходимых файлов

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

Создайте новую папку (для данной статьи, я расположил эту папку на своем рабочем столе) и назовите её, например, SASS или как вам будет угодно. Внутри папки SASS , создайте HTML-файл, дав ему имя index.html .

Поместите в него следующий код:

Теперь, для файла SASS , создайте пустой файл в предпочитаемом вами текстовом редакторе и назовите его style.scss .

Если вы точно следовали всем шагам, то на данный момент у вас будет следующая структура файлов:

Конвертация SASS-кода в CSS

Чтобы преобразовать код SASS в CSS, мы будем использовать команду –watch , которая выполнит компиляцию.

Также, эта команда просканирует папки на наличие изменений. Давайте попробуем сконвертировать SASS -файл в CSS-файл. Но сначала нам нужно расположить код в файле ourstyle.scss , чтобы убедиться, что все работает.

Скопируйте и вставьте следующий SASS -код в файл stye.scss , созданный вами в папке SASS :

$myMargin: 0px auto; $myColor: red; $myWidth: 600px; h1 { color: $myColor; $myMargin: $margin; }

Теперь, находясь в папке рабочего стола, введите sass –watch Sass:Sass :
Используя команду – watch , сконвертируем все .scss -файлы в папке SASS . Также, файлы будут просканированы на наличие в них изменений. Заметьте, что в команде два слова SASS , разделенные двоеточием.

Первое слово представляет текущее положение файла .scss , а второе – расположение выходного файла. Убедитесь, что вы подключили сконвертированный CSS-файл к вашей HTML-странице:

Использование переменных

Переменные SASS объявляются с предваряющим их название символом $ и записываются аналогично CSS-свойствам. С помощью SASS , вы можете определять переменные для таких стилей, как font size , margin , padding и так далее.

Использование переменных дает вам возможность повторного использования заданных ранее значений.

В SASS существует шесть разных типов переменных:

• Строковые (например, $myString: “здесь ваш текст”;);
• Числовые (например, $myNum: 10px;);
• Цветовые (например, $myColor: white;);
• Логические (например, $myBool: true;);
• Списковые (например, $myItemList: 1px solid red;);
• Тип null – значение отсутствует (например, $myVar: null;).

Давайте опробуем эти типы на практике. Откройте файл style.scss и добавьте в него следующий код:

Запустив этот код в браузере, вы получите следующее:

Вложенность

SASS также позволяет определять вложенные стили. Это позволит вам писать очень легко читающиеся стили.

В качестве примера, рассмотрим следующий код:

#container p { font-family: Arial; font-size: 13px; } #container h1 { font-family: Tahoma; font-size: 15px; } #container h2 { font-family: Helvetica; font-size: 14px; }

Для SASS , код будет выглядеть следующим образом:

$myFontsize1: 13px; $myFontsize2: 18px; $myFontsize3: 25px; $myWidth: 500px; $myMargin: 0px auto; #container { width: $myWidth; margin: $myMargin; p { font-family: Arial; font-size: $myFontsize1; } h1 { font-family: Tahoma; font-size: $myFontsize3; } h2 { font-family: Helvetica; font-size: $myFontsize2; } }

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

Если вы запустите этот код в браузере, то увидите следующую картину:

Миксины (Mixins)

Миксины позволяют вам определять общие свойства, а затем использовать их повторно, то есть это реализация наследования. Миксины определяются с помощью директивы @mixin и включают в себя блок кода, который затем можно использовать с помощью директивы @include .

Давайте попрактикуемся. Скопируйте приведенный ниже код в свой файл style.scss :

@mixin border { border: 1px solid red; } #container { width: 960px; margin: 0 auto; @include border; }

Как вы можете видеть, мы использовали директиву @mixins , чтобы создать стиль для свойства border , а затем включили его в стиль идентификатора container с помощью директивы @include .

Если вы запустите данный код в браузере, то увидите следующее:

Операторы

Возможность выполнения математических операций, это одно из преимуществ препроцессоров наподобие SASS , которым не обладает «чистый » CSS. Благодаря этой возможности, вы можете создавать более сложный и динамичный код.

Давайте посмотрим, как это работает. Откройте свой файл style.scss и вставьте в него код, представленный ниже:

$myColor: #aa30ff; $myPadding: 20px; $thickness: 1px; $border: solid red; #samplepara{ color: $myColor; padding: $myPadding+30; } #list1 { color: $myColor; border: $thickness+5 $border; }

Как видите, мы выполнили некоторые математические вычисления, добавив 30px к значению свойства padding , а также увеличили толщину border на 5px.

Если вы запустите этот пример в браузере, то увидите следующую картину:

Функции

SASS также имеет в своем арсенале различные функции. Отличным примером являются цветовые функции.

Взгляните на их список ниже:

• darken(color, amount);
• lighten(color, amount);
• saturate(color, amount);
• desaturate(color, amount);
• alpha(color).

Для того чтобы подробно изучить, как работать с функциями, обратитесь к документации SASS .

А сейчас, мы рассмотрим несколько практических примеров с использованием перечисленных выше функций.

Откройте свой файл style.scss и вставьте туда следующий код:

$myColor: #202020; $myBackground: #e6e6e6; body { background: darken($myBackground, 20%); } h1, h2 { color: lighten($myColor, 40%); }

Результатом этого примера будет затемнение цвета в переменной $myBackground на 20% с помощью соответствующей функции. Далее, в этом же примере, заголовки H1 и H2 осветляются на 40% соответствующей функцией.

После запуска данного примера в браузере вы увидите примерно следующую картину:

Настройка форматирования скомпилированных стилей в SASS

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

Используя опцию -style , мы можем выполнить форматирование скомпилированного CSS-кода. Далее описывается имеющиеся в SASS стили форматирования.

Вложенный формат (Nested Format)

Вложенный стиль это формат по умолчанию. Он задает отступы для всех стилей в выходном CSS-файле.

Чтобы увидеть его в действии, скопируйте и вставьте код, приведенный ниже в свой файл style.scss , а затем откройте командную строку и убедившись, что вы внутри директории SASS , введите SASS –update style.scss .

Эта команда обновит форматирование для уже скомпилированных CSS-стилей через командную строку:

После этого откройте файл style.css и обратите внимание на появившиеся отступы: Работа с Андроидом