Препроцессор Sass. Полное руководство и зачем он нужен. SASS для Начинающих: Вложенные стили, Фрагменты, Импорт

Для Symbian 16.06.2019
Для Symbian

Статей про SASS (SCSS), Less на хабрахабре уже полно, но на мой взгляд не хватает такой, в которой было бы немного реальной практики. Я постараюсь восполнить этот пробел. Около года назад одна из SASS -статей меня "зацепила", и с тех пор я полюбил эту технологию настолько, что ручной набор обычного CSS кода представляется мне лишней тратой времени. Сия статья посвящается тем верстальщикам (или web-программистам), которые про SCSS ещё не слышали, или же ещё не пробовали в деле. Более опытным товарищам, полагаю, в ней ловить нечего.

Что такое SCSS

SCSS - "диалект" языка SASS . А что такое SASS? SASS это язык похожий на HAML (весьма лаконичный шаблонизатор), но предназначенный для упрощения создания CSS-кода. Проще говоря, SASS это такой язык, код которого специальной ruby-программой транслируется в обычный CSS код. Синтаксис этого языка очень гибок, он учитывает множество мелочей, которые так желанны в CSS. Более того, в нём есть даже логика (@if, each), математика (можно складывать как числа, строки, так и цвета). Возможно, некоторые возможности SCSS покажутся вам избыточными, но, на мой взгляд, лишними они не будут, останутся "про запас".

Отличие SCSS от SASS заключается в том, что SCSS больше похож на обычный CSS код. Пример SASS-кода:

$blue: #3bbfce $margin: 16px .content-navigation border-color: $blue color: darken($blue, 9%) .border padding: $margin / 2 margin: $margin / 2 border-color: $blue
И тоже самое на SCSS:

$blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 9%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; }
Я выбрал SCSS в виду того, что он проще для восприятия коллегам с ним ещё не знакомым. Ещё стоило бы отметить что обычный CSS код вполне вписывается в SCSS синтаксис.

Установка и использование

Для начала нужно установить ruby . После чего нужно установить sass-gem (gem install sass в консоли). Если всё прошло гладко, то теперь вам доступна консольная программа sass . О всех нюансах её использования вы можете прочесть здесь ― sass --help . Я расскажу лишь о двух базовых возможностях:

--watch

Если запустить sass с ключом --watch , то программа будет следить за указанными вами файлами. В случае их изменения, она автоматически пересоберёт все необходимые css-файлы (не все вообще, а только связанные с изменёнными).

Предположим, что у вас есть следующая структура проекта:

Css ---- scss ------ style.scss ---- style.css
Необходимо чтобы sass отслеживал все изменения в css/scss/* и результат сохранял в css/*.css . В таком случае запускаем sass так ― sass --watch css/scss:css/. . Т.е. sass --watch [что]:[куда] .

--update

Если вам нужно единожды обновить css-файлы, то в место --watch применяем --update . Никакой слежки проводится не будет, так же как и проверок на необходимость обновления.

Стоит отметить, что в отличии от Less , SASS не умеет компилировать свой код прямо в браузере. На мой взгляд, такой подход (компиляция на сервере или ПК-верстальщика) является единственно верным.

Практика

Итак, мы подошли к самому главному. Начнём с @import .

@import

Изначально, до использования SCSS, весь CSS код движка, с которым мне по долгу службы приходится работать, находился в 1-ом огромном style.css файле. Моя IDE (Netbeans (кстати, вот плагин для подсветки синтаксиса)) работала с ним с существенными тормозами. Разбивать же его на множество файлов поменьше, и, при необходимости, склеивать их в 1 ― никто не хотел. SCSS решает этот вопрос автоматически.

Стоит отметить 1 нюанс. Если скормить sass не конкретный файл-источник, а директорию, то css файлы не будут генерироваться для файлов начинающихся с _ . Т.е. наличие файла style.scss приведёт к созданию style.css , а наличие файла _some.scss ― нет.

Итак, для того, чтобы включить содержимое файла _template.scss или template.scss пишем

@import "template"; // шаблоны
В конечном счёте, вместо 1-го большого style.css файла у меня получилось более сотни мелких scss -файлов. С первого взгляда может показаться, что такое количество слишком велико и приведёт к страшным мукам. Однако, нужный мне файл я нахожу сразу исходя из удобной структуры каталогов. К тому же, я полагаю, что благодаря кешированию такая "схема" более производительна.

@вложенность

Одна из самых желанных "фич" для CSS ― вложенность селекторов. Пример:

#some { border: 1px solid red; .some { background: white; } } /* => */ #some { border: 1px solid red; } #some .some { background: white; }
Ещё пример:

Input { border: 1px solid gray; background: white; & { color: black; } &.some_class { display: none; } } /* => */ input { border: 1px solid gray; background: white; } input { color: black; } input.some_class { display: none; }
Символ & равносилен родительскому селектору. Допустим тег у нас имеет класс ie_7 , в случае если в качестве обозревателя у нас Internet Explorer 7 . Следующий код позволяет избавиться от всех "хаков" и спец.комментариев:

$IE_7: "body.ie_7"; //... .some { display: inline-block; #{$IE_7} & { zoom: 1; display: inline; } } /* => */ .some { display: inline-block; } body.ie_7 .some { zoom: 1; display: inline; }

$variables

Переменные ― удобная штука. Определяются они так:

$some: red;
Переменные ― не константы, их можно менять по ходу кода:) Одна из первых моих мыслей вылилась в _const.scss файл, который заключает в себе все базовые цвета, размеры шрифтов и пр.

$link: #15157d; $link_bottom: $link; $input_font_size: 13px; $content_bg: #F1F1F1; $input_color: #4E4D4D; $input_color_placeholder: #959595; $text_color: black; ...
Предполагается, что цвет ссылок на сайте ― $link .

A { color: $link; } span.link { color: $link; text-decoration: underline; }
Если в дальнейшем выяснится, что цвет ссылок изменился ― достаточно поменять 1 переменную (в случае CSS нужно было бы пройтись авто-заменой по файлам, возможно даже выборочно). Предположим, что, внезапно, выясняется, что в некотором модуле contacts , цвет ссылок другой. Есть, как минимум, два пути решения.

$contacts_link: orange; // код модуля с использованием $contacts_link вместо $link
Второй

$__link: $link; $link: orange; // код модуля $link: $__link;
Переменные у нас не типизированные, поэтому с равным успехом могут содержать строки, числа и цвета.

@математика

Разделим математику на 2 категории ― цвета и числа. Начнём с чисел. Простой пример:

Block { $block_width: 500px; padding: 5px; border: 1px solid black; width: $block_width - (5px * 2) - (1px * 2); }
При желании можно и padding с border-ом задавать переменными. Всё зависит от сложности вёрстки.

Ещё пример:

Block { $count: 10; $margin_left: 5px; $all_width: 1000px; width: $all_width; .sub_element { width: ($all_width / $count) - $margin_left; margin: 0 0 0 $margin_left; } }
Хочу отметить, что подобного рода манипуляции применяются очень часто. Без них я как без ног.

А теперь цвета. Цвета можно складывать, перемножать:

Some { $color: #010203; color: $color; border-color: $color - #010101; &:hover { color: #010203 * 2; } } /* => */ .some { color: #010203; border-color: #000102; } .some:hover { color: #020406; }
Довольно удобная штука, когда лень подбирать цвета. Также доступны такие функции как opacify и transparentize (более

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

Scss - файл

#main p {

color : #00ff00 ;

width : 97% ;

Redbox {

background-color : #ff0000 ;

color : #000 ;

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

1 2 3 4 5 6 7 8

#main p {

color : #00ff00 ;

width : 97% ;

#main p .redbox {

background-color : #ff0000 ;

color : #000 ;

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

Scss - файл

10 11 12

#main {

width : 97% ;

p , div {

font-size : 2em ;

font-weight : bold ;

pre {

font-size : 3em ;

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

11 12 13 14

#main {

width : 97% ;

#main p ,

#main div {

font-size : 2em ;

#main p a ,

#main div a {

font-weight : bold ;

#main pre {

font-size : 3em ;

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

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

Scss - файл

1 2 3 4 5 6 7 8 9 10

font-weight : bold ;

text-decoration : none ;

&:hover {

text-decoration : underline ;

body .firefox & {

font-weight : normal ;

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

1 2 3 4 5 6 7 8 9 10

font-weight : bold;

text-decoration : none ;

a :hover {

text-decoration : underline ;

body .firefox a {

font-weight : normal ;

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

Scss - файл

1 2 3 4 5 6 7 8 9

#main {

color : black ;

font-weight : bold ;

&:hover {

color : red ;

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

1 2 3 4 5 6 7 8 9

#main {

color : black

#main a {

font-weight : bold ;

#main a:hover {

color : red ;

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

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

Scss - файл

1 2 3 4 5 6

#main {

color : black ;

&-sidebar {

border : 1px solid red ;

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

1 2 3 4 5 6

#main {

color : black ;

#main-sidebar {

border : 1px solid red ;

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

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

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

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

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

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

  • Переменные

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

    Синтаксис SCSS

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

    Синтаксис 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. Но помните, что чрезмерное количество вложенностей делает ваш документ менее читабельным и воспринимаемым, что считается плохой практикой.

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

    Синтаксис SCSS

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

    Синтаксис Sass

    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 .

    Синтаксис SCSS

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

    Синтаксис Sass

    // _reset.sass html , body , ul , ol margin : 0 padding : 0 // base.sass @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:

    Синтаксис SCSS

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

    Синтаксис Sass

    =border-radius ($radius ) -webkit-border-radius : $radius -moz-border-radius : $radius -ms-border-radius : $radius border-radius : $radius .box +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-файл в «чистоте». В нашем примере мы покажем вам как сделать стили оповещений об ошибках, предупреждениях и удачных исходах, используя другие возможности Sass, которые идут рука-об-руку с расширением, классами-шаблонами.

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

    Синтаксис SCSS

    %equal-heights { display : flex ; flex-wrap : wrap ; } %message-shared { border : 1px solid #ccc ; padding : 10px ; color : #333 ; } .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

    // Данный отрывок кода не попадет в CSS, так как %equal-heights никогда не расширялся. %equal-heights display : flex flex-wrap : wrap // Данный отрывок кода попадет в CSS потому, что %message-shared расширен. %message-shared border : 1px solid #ccc padding : 10px color : #333 .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

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

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

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

    .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 .

    Синтаксис SCSS

    .container { width : 100% ; } article [ role = "main" ] { float : left ; width : 600px / 960px * 100% ; } aside [ role = "complementary" ] { float : right ; width : 300px / 960px * 100% ; }

    Синтаксис Sass

    .container width : 100% article [ role = "main" ] float : left width : 600px / 960px * 100% aside [ role = "complementary" ] float : right width : 300px / 960px * 100%

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

    .container { width : 100% ; } article [ role = "main" ] { float : left ; width : 62.5% ; } aside [ role = "complementary" ] { float : right ; width : 31.25% ; }

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

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

Класснуть

Плюсануть

Запинить

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

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

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

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

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

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

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

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

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

Npm i --save-dev gulp gulp-sass

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

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

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

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

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

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

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

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

Синтаксис Sass

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. SassScript

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

3.1 @import

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

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

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

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

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

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

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

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

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

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

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

3.2 @at-root

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

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

4. Выражения

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

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

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

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

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

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

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

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

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

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

5. Миксины

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

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

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

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

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

Что такое Sass, зачем он нужен, его возможности, установка и как его использовать в своих проектах

Что такое Sass

Sass (Syntactically Awesome Stylesheets) - это один из самых развитых, стабильных и многофункциональных препроцессоров. Пользуется большой популярностью у разработчиков. Sass - это более продвинутая версия CSS, которая имеет гораздо бо́льший набор возможностей, а также Sass предназначен для упрощения каскадных таблиц стилей.

Синтаксис Sass имеет 2 вида: SASS и SCSS . SCSS - более похож на CSS, а SASS - отличается отсутствием фигурных скобок. Вложенные элементы реализованы за счёт отступов. Именно такой синтаксис мы будем здесь использовать.

Зачем нужен Sass

Чтобы понять, зачем нужен Sass, перечислим его некоторые возможности :

  1. Sass позволяет вкладывать правила CSS друг в друга
  2. Вложенность свойств
  3. Использование переменных
  4. Поддержка арифметических операций
  5. Операции с цветами
  6. Возможность импортировать в sass файл sass , scss и css файлы
  7. Использование миксинов
  8. И многое другое

Если коротко зачем нужен Sass: он ускоряет и упрощает процесс разработки.

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

Существуют разные способы начать использовать Sass:

  1. C помощью приложений (Koala, CodeKit, Compass и другие)
  2. C помощью командной строки
  3. Используя таск-менеджеры
  4. Простым конвертированием Sass в CSS с помощью онлайн-сервисов

Рассмотрим использование Sass для таск-менеджера Gulp . Перед тем как начать установку, желательно ознакомиться с основами Gulp .

Установка и подключение gulp-sass

Для установки плагина gulp-sass в наш проект, откроем командную строку в папке проекта. Введём следующую команду:

npm i gulp - sass -- save - dev

Плагин будет установлен в папку node_modules и будет добавлена соответствующая запись в файле package.json. После успешной установки нам нужно подключить наш пакет в файле gulpfile.js .

var gulp = require ("gulp" ); sass = require ("gulp-sass" );

Теперь создадим таск sass .

gulp . task ("sass" , function (){ return gulp . src ("app/sass/main.sass" ) . pipe (sass (). on ("error" , sass . logError )) . pipe (gulp . dest ("app/css" )); });

gulp.src - Что берём для обработки

.pipe(sass()) - Конвертируем Sass в CSS

sass() - в скобках можно задать дополнительные настройки отображения CSS на выходе.
Например, sass({outputStyle: "expanded "}) - полностью развёрнутый CSS.
Другие значения: nested (по умолчанию), compact - каждый селектор на разной строке, compressed - всё в одну строку.

Если вдруг мы допустим ошибку, то можно вывести на экран сообщение в каком месте она находится. Для этого добавим .on("error", sass.logError) .

Выполним наш созданный таск gulp-sass . В командной строке введём gulp sass .

Gulp автоматически преобразовал SASS в CSS и создал файл main.css .

Если нужно выбрать не один файл, а несколько, то можно выбрать все файлы сразу. Для этого изменим немного строку, где мы выбираем sass-файлы для конвертации:

gulp . src ("app/sass/**/*.sass" )

sass/**/*.sass - означает выбор всех файлов (с расширением .sass ) во всех папках папки sass.

Резюмируем: подключили плагин gulp-sass , создали таск sass и добавили вывод ошибки (если таковая возникнет). Теперь можно сделать дефолтный таск. Т.е. наш такск gulp-sass будется запускаться командой gulp .

gulp . task ("default" , [ "sass" ]);

Получаем следующий gulpfile.js

var gulp = require ("gulp" ); var sass = require ("gulp-sass" ); gulp . task ("sass" , function (){ return gulp . src ("app/sass/**/*.sass" ) . pipe (sass (). on ("error" , sass . logError )) . pipe (gulp . dest ("app/css" )) }); gulp . task ("default" , [ "sass" ]);

Рассмотрим некоторые возможности Sass на примерах

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

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

Вложенность свойств

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

Арифметические операции с числами

Арифметические операции с цветами



Рекомендуем почитать