Руководство по SASS для абсолютных новичков. Механизм кэширования SASS компилятора. SASS фрагменты - Пример

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

Это подробное руководство по препроцессору 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 на примерах

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

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

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

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

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

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

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

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

Синтаксис

Для Sass доступно два синтаксиса. Первый, известный как SCSS (Sassy CSS) и используемый повсюду в этой статье - это расширенный синтаксис CSS. Это означает, что каждая валидная таблица стилей CSS это валидный SCSS файл, несущий в себе туже самую логику. Более того, SCSS понимает большинство хаков в CSS и вендорные синтаксисы, например такой как синтаксис фильтра в старом IE. Этот синтаксис улучшен Sass функционалом описанным ниже. Файлы использующие этот синтаксис имеют.scss расширение.

Второй и более старый синтаксис, также известный как краёный синтаксис или иногда просто Sass, даёт более сжатую возможность работы с CSS. Он использует отступы вместо скобок, что отделить вложения селекторов и новые строки вместо точек с запятой для разделения свойств. Иногда люди находят такой способ проще для понимания и быстрее для написания, чем SCSS. По факту, такой синтаксис имеет тот же функционал, хотя некоторые из них имеют слегка другой подход. Файлы используемые этот синтаксис имеют расширение.sass .

Любой синтаксис может импортировать файлы, написанные в другом. Файлы могут быть автоматически сконвертированы из одного в другой, используя sass-convert команду:

# Convert Sass to SCSS $ sass-convert style.sass style.scss # Convert SCSS to Sass $ sass-convert style.scss style.sass

Использование Sass

Sass может быть использован тремя способами: как командной строкой, как отдельный модуль Ruby и как плагин для rack-фреймворка, включая Ruby on Rails и Merb. Первым делом для всего этого надо установить Sass гем:

Если вы на Windows, то возможно вам надо установить сначала Ruby.

Для запуска Sass из командной строки просто используйте:

sass input.scss output.css

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

sass --watch input.scss:output.css

Если у вас есть директория с множеством Sass файлов, то вы также можете указать Sass следить за всей директорией:

sass --watch app/sass:public/stylesheets

Используйте sass --help для полной документации.

Селекторы

CSS vs. SCSS селекторы.

#main { color: #999; } #main .content { color: #bfbfbf; }

CSS отрывок выше, может быть написан в SCSS таким образом:

#main{ color: #999; .content{ color: #bfbfbf; } }

Как мы можем видеть, SCSS структура более схожа с DOM структурой. Это позволяет нам организовать наш CSS более эффективно. Вот примеры:

#main h1 { color: #00ff00; width: 97%; .title { background-color: #ff0000; color: #000000; } }

Будет скомпилировано в:

#main h1 { color: #00ff00; width: 97%; } #main h1 .title{ background-color: #ff0000; color: #000000; }

Ссылаясь на родительский селектор:

#wrapper h1{ width:20px; &:hover{ width:25px; } }

& будет заменен родительским селектором. То есть код выше, будет эквиалентен:

#wrapper h1{ width:20px; } #wrapper h1:hover{ width:25px; }

Импорты

Нормальный импорт.

@import “foo.css”; //импортирует foo.css @import “foo” screen; //импортирует foo.scss @import “foo.scss” screen; //импортирует foo.scss @import “foo1”,”foo2" screen; //импортирует foo1.scss и foo2 scss

Частичный

Если вы не хотите компилировать SCSS файл как CSS, вы можете использовать “ _ ” перед названием файла.

@import “colors”; //_colors.scss будет импортирован @import “utils/foo.scss”; // Это импортирует fo.scss в папку utils.

Вложенные импорты:

Если demo.scss включает в себя:

Example { color: red; }

#main { @import “demo”; }

Будет скомпилировано в

#main .example { color: red; }

Переменные

SCSS переменные начинаются с символа $ .

$width: 10px; $headercolor:red; #main h1{ width: $width; color:$headercolor; }

Будет скомпилировано в:

#main h1{ width: 10px; color:red; }

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

#main { $width: 5em !global; width: $width; } #sidebar { width: $width; }

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

Вы также можете производить разные операции в SCSS. Для примера:

P { font: 10px/8px; // Чистый CSS без деления $width: 1000px; width: $width/2; // Использование переменных в делении width: round(1.5)/2; // Использование функции и деления height: (500px/2); // Использование скобок и деления margin-left: 5px + 8px/2px; // Использование сложения и деления font: (italic bold 10px/8px); // В списке, скобке на учитываются }

Скомпилируется в:

Вставка: #{}

Вы можете использовать переменные в свойствах имен и значения, используя #{} . Для примера:

$name: foo; $attr: border; p.#{$name} { #{$attr}-color: blue; }

Скомпилируется в:

P.foo { border-color: blue; }

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

@if

p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } @if null { border: 3px double; } }

Скомпилируется в:

P { border: 1px solid; }

@for

@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }

Скомпилируется в:

Item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }

@each

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) { #{$header} { font-size: $size; } }

Скомпилируется в:

H1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.2em; }

@while

$i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; }

Скомпилируется в:

Item-6 { width: 12em; } .item-4 { width: 8em; } .item-2 { width: 4em; }

Миксины

Миксины позволяют вам определять стили, которые могут быть переиспользованы на протяжении всей таблицы стилей. Вы можете думать о миксинах, как о функциях в каком-либо другом языке програмирования. Вы можете передавать переменные, также как в функциях любого другого языка програмирования. В SCSS миксины возврашают набор CSS правил. Вы можете использовать миксины так @include имя-миксина, определенное директивной @mixin .

Рассмотрите следующий пример:

@mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000; } .page-title { @include large-text; padding: 4px; margin-top: 10px; }

Скомпилируется в:

Page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px; }

Вы также можете использовать составные миксины, например как:

@mixin mixin-one{ color: red; } @mixin mixin-two{ width:20px; } .page-title { @include mixin-one; @include mixin-two; }

Вы также можете передавать переменные в миксинах:

$globel-prefixes:webkit moz ms o; @mixin prefixer ($property,$value,$prefixes:null){ @if $prefixes==null{ @each $prefix in $globel-prefixes { -#{$prefix}-#{$property}: $value; } } @else { @each $prefix in $prefixes { -#{$prefix}-#{$property}: $value; } } #{$property}: $value; } *{ @include prefixer(box-sizing,border-box); }

Будет скомпилено в:

*{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }

Функции

Вы также можете определять функции, возвращающие значение. Для примера.

$no-of-columns:12; $gutter-width:2%; @function get-column-width($i){ @return (100% - ($no-of-columns/$i - 1) * $gutter-width) / $no-of-columns * $i; } .col-6 { width:get-column-width(6); }

Будет скомпилировано в:

Col-6 { width: 49%; }

Расширения

Вы столкнетесь с ситуацией, когда вам нужно будет переиспользовать стили. Рассмотрите следующий пример:

Normal Blue

Оба будут иметь одинаковые стили, кроме цвета.

Btn{ margin:10px; color:black; width:200px; height:100px; } .btn-blue{ @extend .btn; background:blue; }

Это будет скомпилировано в:

Btn,.btn-blue{ margin:10px; color:black; width:200px; height:100px; } .btn-blue{ background:blue; }

Вы также можете связывать расширения и использовать несколько расширений в одном CSS селекторе.

Если вы не хотите, чтобы директива расширения была скомпилена в CSS, вы можете использовать % перед селектором.

%btn{ margin:10px; color:black; width:200px; height:100px; } .btn-blue{ @extend %btn; background:blue; } .btn-red{ @extend %btn; background:red; } Будет скомпилировано в: .btn-blue{ margin:10px; color:black; width:200px; height:100px; background:blue; } .btn-red{ margin:10px; color:black; width:200px; height:100px; background:red; }

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

Итак, в этой записи мы поговорим про использование SASS на сайтах и в других проектах. Посмотрим, как «прикрутить» SASS к различным библиотекам Ruby. Поговорим о том, как SASS кэширует код для ускорения работы. Для корректной работы HTML страниц важно, чтобы была указана кодировка, поэтому необходимо разобраться с тем, как SASS работает с кодировкой. И еще мы посмотрим команды компилятора SASS для его настройки.

Использование SASS в проектах и на сайтах

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

• SASS можно установить и использовать, как модуль языка Ruby;
• с SASS можно работать, как с инструментов командной строки операционной системы;
• SASS можно использовать как плагин Rack фреймворка;
• SASS можно использовать с помощью десктопного компилятора или онлайн компилятора, но в этом случае процесс конвертации из SASS в SCSS будет ручным.

Если вы хотите , то сперва нужно установить Ruby, мы об этом уже говорили ранее.

Давайте составим таблицу, в которой перечислим команды для компиляции SASS в CSS и дадим им краткое описание.

Обратите внимание на то, что эти команды выполняются в командной строке операционной системы.

Плагин SASS для Rack. Плагин SASS для Rails. Плагин SASS для Merb

SASS можно легко использовать с плагином Rack. Я не очень силен в языке Ruby, о чем очень сожалею, возможно, когда-нибудь я наверстаю упущенное, но сейчас скажу, что изначально Rack – это серверная стойка. В контексте языка Ruby: Rack – это библиотека или фреймворк, которая упрощает работу с и позволяет с легкостью обрабатывать веб-серверу клиента.

В общем, если вы знаете, что такое Rack и умеете с ним работать, то для подключения плагина SASS к Rack воспользуйтесь командой:

config.gem "sass"

Если вы хотите включить плагин SASS в приложение Rack, то добавьте следующие строки в файл config.ru, который присутствует в корне приложения:

require "sass/plugin/rack" use Sass::Plugin::Rack

Мы рассмотрели, как можно использовать SASS с языком Ruby и его библиотеками, давайте теперь поговорим про опции SASS при компиляции.

Механизм кэширования SASS компилятора

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

Для ускорения работы SASS разработчики используют следующий прием:

1. Создают общий SASS файл.
2. Создают несколько небольших SASS файлов, в которых прописывают стили для различных элементов .
3. Импортируют маленькие файлы в большой.

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

Если вам не нужна возможность кэширования в SASS, то ее можно отключить, задав параметру:cache значение false.

Настройка SASS компилятора

Вы можете произвести настройку SASS компилятора. Для этого есть специальные опции SASS или параметры SASS, как вам удобно, так и называйте. Чтобы настроить SASS компилятор в Rail или Rack, добавьте строку кода, как показано ниже в конфигурационный файл приложения:

Sass::Plugin.options[:style] = :compact

Давайте посмотрим, что мы можем настроить в SASS при помощи параметров или опций SASS.

Номер	Настройки для SASS и их описание
1	: style Данный параметр SASS позволяет задать стиль выходного файла.
2	: syntax Данная опция SASS позволяет указать компилятору . Соответственно, для того чтобы использовать синтаксис SASS, нужно написать:sass, чтобы синтаксис был SCSS, напишите:scss. Значение по умолчанию:sass.
3	: property _ syntax Данная настройка SASS компилятора задает правила для написания CSS правил в синтаксисе SASS и не работает в синтаксисе SCSS.
4	: cache Этот параметр SASS позволяет настроить кэширование. Если параметр cache имеет значение true, то SASS компилятор будет кэшировать фрагменты кода, которые импортируются в исходный SASS-файл. Параметры кэширования в SASS чем-то похожи на поле .
5	: read _ cache Эта опция SASS компилятору говорит о том, что тот не должен кэшировать код при новой компиляции, а может использовать только старый кэш при условии, что параметр:cache не указан.
6	: cache _ store В SASS можно настроить папку с хранилищем кэша. Если опция установлена на подкласс Sass::CacheStores::Base, то хранилище кеша будет использоваться хранения и извлечения кешированных результатов компиляции.
7	: never _ update SASS компилятор можно настроить так, чтобы он никогда не обновлял CSS файлы, если передать этому параметру значение true.
8	: always _ update SASS компилятор можно настроить так, чтобы он всегда обновлял CSS файлы при обновлении и сохранении исходных файлов, если передать этому параметру значение true.
9	: always _ check Эта опция SASS компилятора используется в том случае, когда необходимо перекомпилировать все SASS файлы в CSS при запуске сервера.
10	: poll Когда значение опции true, всегда используйте опрос серверной части для Sass::Plugin::Compiler#watch, а не стандартной файловой системы.
11	: full _ exception Данная настройка SASS компилятора позволяет задать отображение ошибок, если ей передать значение true, то ошибки будут показаны. При этом это будет показан номер строки, в которой компилятор нашел ошибку.
12	: template _ location Данный параметр позволяет задать путь к каталогу с шаблонов SASS.
13	: css _ location Эта опция указывает месторасположение CSS файлов
14	: unix _ newlines Перенос строки в Windows CRLF, перенос строки в Unix CR, данный параметр позволяет изменять в файле переносы строк с Windows на Unix.
15	: filename Компилятору можно указать файл, в котором будет вестись лог ошибок.
16	: line Эта опция SASS определяет первую строку шаблона SASS, от которой будет вестись отсчет для указания номера строк при обнаружении ошибки.
17	: load _ paths Этот параметр используется для подключения файла SASS при использование @ import директивы.
18	: filesystem _ importer Этот параметр используется для импорта файлов из файловой системы usesSass :: Importers :: Base
19	: sourcemap Этот параметр помогает браузеру найти стили SASS, данный параметр может использовать три значения:· : auto :это значение используется для указания месторасположения файла при помощи относительного URI (URI в HTTP).· : file : это значение служит для указания локального пути к файлу и не используется для работы с удаленными серверами.· : inline :это значение содержит в себе текст sourcemap.
20	: line _ numbers Это опция нужна для отображения номера ошибок в CSS файле, ошибки будут отображаться если задать значение true.
21	: trace _ selectors Компилятор SASS можно настроить так, чтобы он помогал отслеживать CSS селекторы импорта и примеси. Компилятор будет помогать в том случае, когда данной опции будет передан параметр true.
22	: debug _ info Данная опция помогает настроить SASS компилятор для отладки кода.
23	: custom Если вы хотите использовать код SASS в разных приложения, то эта опция вам поможет.
24	: quiet Вы можете отключить предупреждения, которые выдает SASS компилятор этой опцией.

Кодировка SASS файлов. Настройка кодировки SASS компилятора

Настраивать кодировку SASS компилятора не имеет особого смысла, поскольку SASS определяет ее автоматически. Изначально для определения кодировки SASS смотрит на CSS спецификацию и возвращает полученное значение Ruby: SASS считывает порядок байтов Unicode после директивы @charset, если SASS не может понять кодировку, то он кодирует файлы в UTF-8.

Чтобы явно задать кодировку для SASS компилятора используйте директиву @charset.

Как компилятор SASS определяет синтаксис файла

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

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

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