Установка SASS. Переменные в Sass

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

Compass — это CSS -фреймворк с открытым исходным кодом, что позволяет использовать CSS3 и популярные шаблоны проектирования. Compass работает исключительно с Sass , что способствует написанию более чистого и быстрого CSS -кода.

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

1. Compass.app

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

Его применение позволяет дизайнерам очень просто компилировать стили, не используя интерфейс командной строки. Приложение Compass.app написано на Java (JRuby ) и работает на Mac , Linux и РС . Чтобы использовать его, вам не нужно устанавливать среду Ruby .

2. Scout


Scout — это кроссплатформенное приложение, которое запускает Sass и Compass через встроенную среду Ruby , что позволяет легко управлять всеми вашими Sass -проектами. Теперь вам не придется беспокоиться об установке Ruby или заниматься другими техническими вопросами.

3. Codekit


Codekit — это мощный компилятор, который автоматически обрабатывает при сохранении файлы Sass , Compass , Less , Stylus , Jade , Haml , Slim , CoffeeScript и Javascript .

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

4. Archetype


Archteype — это Compass/Sass фреймворк для создания настраиваемых, совместимых шаблонов и компонентов интерфейсов. Archteype поставляется с обширной документацией и использует оригинальный синтаксис языков программирования.

5. Susy


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

6. The Sassway


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

7. Sassaparilla


Sassaparilla позволяет, используя Sass и Compass , значительно быстрее запускать адаптивные веб-проекты. Инструмент предназначен в основном для работы с макетами с вертикальной разбивкой элементов.

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

8. LivingStyleGuide


LivingStyleGuide Gem — инструмент, предназначенный для упрощения создания руководств по стилям для Sass и Compass . Для того чтобы создать руководство по стилям, просто добавьте к Sass свои комментарии в одном из форматов Markdown .

9. Pondasee


Инструмент Pondasee был разработан, чтобы ускорить процесс создания веб-приложений. Он обладает всеми возможностями и функциями SCSS и Compass , и предназначен для упрощения создания шаблонов.

10. LiveReload


LiveReload встраивается в панель меню и отслеживает все изменения в файловой системе. Как только вы сохраняете файл, он обрабатывается в соответствии с заданными параметрами, и окно браузера обновляется. LiveReload работает с движками SASS , Compass , LESS , Stylus , CoffeeScript , IcedCoffeeScript , Eco , SLIM , HAML и Jade . Он настраивается всего с помощью двух чекбоксов, чтобы вам не пришлось ломать голову над большим количеством опций.

11. Koala


Koala — это GUI -приложение для компиляции CoffeeScript , Compass , Less и Sass , которое делает процесс разработки веб-дизайна более эффективным. Приложение работает на Mac , Linux , и Windows , и включает в себя такие функции, как компиляция в режиме реального времени, поддержка нескольких языков программирования и многое другое.

12. Bootstrap Sass


Bootstrap-Sass — это Sass -версия Bootstrap , которая идеально подходит для разработки Sass -приложений. Инструмент может устанавливаться с Rails , Compass или только с Sass .

13. Forge


Forge — бесплатный набор инструментов, запускаемых из командной строки. Он предназначен для загрузки и разработки в соответствующей среде тем WordPress с использованием таких языков программирования, как Sass , LESS и CoffeeScript .

Forge создает структурированную исходную папку с четкой и простой иерархией (файлы основных шаблонов, SCSS-файлы и опции темы ). При внесении изменений в процессе разработки исходная папка автоматически компилируется в локально установленную систему WordPress .

14. Prepros


Prepros — это приложение, разработанное для упрощения компиляции кода. Оно компилирует коды Sass , Scss , Compass , Less , Jade , Haml и CoffeeScript в режиме реального времени, с автоматическим обновлением окна браузера,. Приложение не имеет зависимостей и имеет такие средства, как встроенный HTTP -сервер, отслеживание файлов в фоновом режиме, уведомления об ошибках и интерактивное включение CSS .

24 марта 2012 в 13:22

SCSS - немного практики, часть I

  • CSS

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

Что такое SCSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Sass

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

Scss

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

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

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

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

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

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

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

Scss

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

Sass

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

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

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

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

Sass

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

Css

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

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

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

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

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

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

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

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

Main .container & width: 700px

Container .main { width: 700px }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SassScript

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

Переменные

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

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

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

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

Директивы

@extend

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

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

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

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

@import

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

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

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

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

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

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

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

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

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

@at-root

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

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

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

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

Директива @if

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

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

Header { background-color: green; }

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

Директива @for

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

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

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

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

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

Директива @each

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Класснуть

Плюсануть

Запинить

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

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

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

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

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

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

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

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

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

Npm i --save-dev gulp gulp-sass

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

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

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

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

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

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

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

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

Синтаксис Sass

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. SassScript

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

3.1 @import

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

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

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

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

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

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

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

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

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

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

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

3.2 @at-root

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

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

4. Выражения

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

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

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

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

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

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

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

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

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

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

5. Миксины

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

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

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

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

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

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

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 препроцессоре).