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

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

Особенности использования SASS. Настройка SASS компилятора

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

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

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

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

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

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

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

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

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

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

[php]

config.gem «sass»

[/php]

Так же использование SASS возможно с Ruby on Rails. SASS можно подключить к библиотеки Ruby on Rails. Данная библиотека была разработана для облегчения создания веб-приложений и реализует архитектуру MVC, библиотека облегчает разработчиком взаимодействие с веб-серверами и серверами баз данных. Чтобы подключить  плагин SASS к библиотеке Rails 3 воспользуйтесь командой:

[php]

gem «sass»

[/php]

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

[php]

require 'sass/plugin/rack'

use Sass::Plugin::Rack

[/php]

Библиотека Merb позволяет использовать SASS. Разработчики Merb вдохновились библиотекой Rails. Merb позволяет упростить работу с HTTP серверами и при этом не ограничивает разработчиков в выборе JavaScript библиотек и движков HTML шаблонов. Если вы хотите подключить плагин SASS к Merb, то вам необходимо внести строку в конфигурационный файл dependencies.rb:

[php]

dependency «merb-haml»

[/php]

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

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

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

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

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

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

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

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

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

[php]

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

[/php]

Настроить SASS можно и для библиотеки Merb, используя следующий пример:

[php]

Merb::Plugin.config[:sass][:style] = :compact

[/php]

Давайте посмотрим, что мы можем настроить в SASS при помощи параметров или опций 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 файла у вас быть не должно.