Написание 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
$font-stack : Helvetica , sans-serif ; $primary-color : #333 ; body { font : 100% $font-stack ; color : $primary-color ; }Sass Syntax
$font-stack : Helvetica , sans-serif $primary-color : #333 body font : 100% $font-stack color : $primary-colorCSS Output
body { font : 100% Helvetica , sans-serif ; color : #333 ; }Когда Sass обрабатывается, он принимает значения, заданные нами в $font-stack и $primary-color и вставляет их в обычном CSS -файле в тех местах, где мы указывали переменные как значения. Таким образом переменные становятся мощнейшей возможностью, например, при работе с фирменными цветами, используемыми на всем сайте.
Вложенности
При написании HTML , Вы, наверное, заметили, что он имеет четкую вложенную и визуальную иерархию. С CSS это не так.
Sass позволит вам вкладывать CSS селекторы таким же образом, как и в визуальной иерархии HTML. Но помните, что чрезмерное количество вложенностей делает ваш документ менее читабельным и воспринимаемым, что считается плохой практикой.
Чтобы понять что мы имеем ввиду, приведем типичный пример стилей навигации на сайте:
SCSS Syntax
nav { ul { margin : 0 ; padding : 0 ; list-style : none ; } li { display : inline-block ; } a { display : block ; padding : 6px 12px ; text-decoration : none ; } }Sass Syntax
nav ul margin : 0 padding : 0 list-style : none li display : inline-block a display : block padding : 6px 12px text-decoration : noneCSS Output
nav ul { margin : 0 ; padding : 0 ; list-style : none ; } nav li { display : inline-block ; } nav a { display : block ; padding : 6px 12px ; text-decoration : none ; }Вы заметили, что селекторы 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
// _reset.scss html , body , ul , ol { margin : 0 ; padding : 0 ; } // base.scss @import "reset" ; body { font : 100% Helvetica , sans-serif ; background-color : #efefef ; }Sass Syntax
// _reset.sass html , body , ul , ol margin : 0 padding : 0 // base.sass @import reset body font : 100% Helvetica , sans-serif background-color : #efefefCSS Output
html , body , ul , ol { margin : 0 ; padding : 0 ; } body { font : 100% Helvetica , sans-serif ; background-color : #efefef ; }Обратите внимание на то, что мы используем @import "reset"; в base.scss файле. Когда вы импортируете файл, то не нужно указывать расширение.scss . Sass - умный язык и он сам догадается.
Миксины (примеси)
Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3 , где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов. Миксины позволяют создавать группы деклараций CSS , которые вам придется использовать по нескольку раз на сайте. Вы даже можете передавать переменные в миксины, чтобы сделать их более гибкими. Так же хорошо использовать миксины для вендорных префиксов. Пример для transform:
SCSS Syntax
@mixin transform ($property ) { -webkit-transform : $property ; -ms-transform : $property ; transform : $property ; } .box { @include transform (rotate (30deg )); }Sass Syntax
=transform ($property ) -webkit-transform : $property -ms-transform : $property transform : $property .box +transform (rotate (30deg ))CSS Output
.box { -webkit-transform : rotate (30deg ); -ms-transform : rotate (30deg ); transform : rotate (30deg ); }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
%message-shared { border : 1px solid #ccc ; padding : 10px ; color : #333 ; } %equal-heights { display : flex ; flex-wrap : wrap ; } .message { @extend %message-shared ; } .success { @extend %message-shared ; border-color : green ; } .error { @extend %message-shared ; border-color : red ; } .warning { @extend %message-shared ; border-color : yellow ; }Sass Syntax
/* This CSS will print because %message-shared is extended. */ %message-shared border : 1px solid #ccc padding : 10px color : #333 // This CSS won"t print because %equal-heights is never extended. %equal-heights display : flex flex-wrap : wrap .message @extend %message-shared .success @extend %message-shared border-color : green .error @extend %message-shared border-color : red .warning @extend %message-shared border-color : yellowCSS Output
.message , .success , .error , .warning { border : 1px solid #ccc ; padding : 10px ; color : #333 ; } .success { border-color : green ; } .error { border-color : red ; } .warning { border-color : yellow ; }Вышеуказанный код сообщает классам.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
.container { width : 100% ; } article [ role = "main" ] { float : left ; width : 600px / 960px * 100% ; } aside [ role = "complementary" ] { float : right ; width : 300px / 960px * 100% ; }Sass Syntax
.container width : 100% article [ role = "main" ] float : left width : 600px / 960px * 100% aside [ role = "complementary" ] float : right width : 300px / 960px * 100%CSS Output
.container { width : 100% ; } article [ role = "main" ] { float : left ; width : 62.5% ; } aside [ role = "complementary" ] { float : right ; width : 31.25% ; }Мы создали простую адаптивную модульную сетку, с шириной в 960 пикселей. Используя математические операторы, мы использовали полученные данные с пиксельными значениями и конвертировали их в процентные, причем без особых усилий. Скомпилированный 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 для дизайнеров и не только" за 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
@each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url("/images/#{$animal}.png"); } }Скомпилировано в:
CSS
.puma-icon { background-image: url("/images/puma.png"); } .sea-slug-icon { background-image: url("/images/sea-slug.png"); } .egret-icon { background-image: url("/images/egret.png"); } .salamander-icon { background-image: url("/images/salamander.png"); }Оператор @extend
Часто возникает ситуация, когда один класс должен иметь все стили другого класса, помимо своих собственных стилей. Наиболее распространенное решение это использовать два класса; первый содержит общие стили, второй – специфичные.
Оператор @extend позволяет избежать этих проблем, обеспечивая возможность одному селектору наследовать стили от другого селектора. Например:
SCSS
.error { border: 1px #f00; background-color: #fdd; } .error.intrusion { background-image: url("/image/hacked.png"); } .seriousError { @extend .error; border-width: 3px; }Скомпилировано в:
CSS
.error, .seriousError { border: 1px #f00; background-color: #fdd; } .error.intrusion, .seriousError.intrusion { background-image: url("/image/hacked.png"); } .seriousError { border-width: 3px; }Всем привет! Как быстро летит время. Я даже не заметил, как я перешел от написания стилей с обычного 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: 22pxScss
.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: 15pxCss
.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, но знания поверхностные и их хотелось бы прокачать? Данная статья поможет вам уверенно использовать всю мощь препроцессора 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, архитектуре стилей для крупных проектов и многое другое. Так что подписывайтесь на мой блог и будете в курсе новых публикаций.
