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

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

Особенности использования SASS. Настройка 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 и ее описание
1 sass input.scss output.css
Этой командой вы запустите компилятор SASS, который сконвертирует SCSS файл в файл CSS
2 sass — watch input.scss:output.css
Эта команда запускает SASS компилятор и конвертирует SASS в CSS при каждом сохраненном изменение в указанном файле с расширением .scss или .sass
3 sass — watch app/sass:public/stylesheets
Это командой вы можете посмотреть каталог с файлами SASS или SCSS, данная команда полезна, если у вас много таких файлов.

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

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

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

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

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

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

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

Мы рассмотрели, как можно использовать 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, добавьте строку кода, как показано ниже в конфигурационный файл приложения:

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

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

Номер Настройки для SASS и их описание
1 :style
Данный параметр SASS позволяет задать стиль выходного файла.
2 :syntax
Данная опция SASS позволяет указать компилятору синтаксис SASS кода. Соответственно, для того чтобы использовать синтаксис SASS, нужно написать :sass, чтобы синтаксис был SCSS, напишите :scss. Значение по умолчанию :sass.
3 :property_syntax
Данная настройка SASS компилятора задает правила для написания CSS правил в синтаксисе SASS и не работает в синтаксисе SCSS.
4 :cache
Этот параметр SASS позволяет настроить кэширование. Если параметр cache имеет значение true, то SASS компилятор будет кэшировать фрагменты кода, которые импортируются в исходный SASS-файл. Параметры кэширования в SASS чем-то похожи на поле HTTP заголовка Cache-Control.
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 файла у вас быть не должно.

Текст комментария: