От автора: SASS — это более мощный и стабильный язык, обеспечивающий поддержку CSS через расширения CSS. Вы можете применять его тремя способами.
как инструмент командной строки;
как модуль Ruby;
в качестве плагина для фреймворка Rack.
Чтобы начать использование SASS на Windows, вам нужно сначала установить Ruby. Дополнительную информацию по установке Ruby вы можете найти в статье Установка SASS. Ниже приведены команды, используемые для выполнения кода SASS:
sass input.scss output.css — Используется для запуска кода SASS из командной строки.
sass —watch input.scss:output.css — Указывает SASS просмотреть файл и обновить CSS при каждом изменении файла SASS.
sass —watch app/sass:public/stylesheets — Используется для просмотра всей директории, если в директории SASS содержится много файлов.
Плагин Rack / Rails / Merb
Rack — это интерфейс веб-сервера, который используется для разработки веб-приложений на Ruby. Для получения информации о Rack, просто перейдите по этой ссылке. В Rails версии 3 вы можете включить SASS через файл environment.rb, находящийся в папке config. Для это используется следующий код:
|
1 |
config.gem "sass" |
В Gemfile для Rails версии 3 (и выше) можно использовать следующую строку:
|
1 |
gem "sass" |
Rails — это веб-фреймворк с открытым исходным кодом, который использует такие веб-стандарты, как JSON, HTML, CSS и JavaScript, для отображения пользовательского интерфейса. Для работы с Rails вам необходимо иметь базовые знания по Ruby и объектно-ориентированному программированию. Подробнее о структуре Rails читайте здесь.
Если вы хотите подключить SASS в приложении Rack, добавьте следующие строки в файл config.ru, который расположен в корневой директории приложения:
|
1 2 |
require 'sass/plugin/rack' use Sass::Plugin::Rack |
Merb — это фреймворк для создания веб-приложений, который предназначен для увеличения производительности и создания модульной структуры Rails. Чтобы узнать больше о Merb, просто перейдите по этой ссылке. Вы можете подключить SASS в Merb, добавив следующую строку в файл config/dependencies.rb:
|
1 |
dependency "merb-haml" |
Кэширование
SASS кэширует такие документы, как шаблоны и частичные файлы, которые могут быть повторно использованы без их обработки, если в них не вносились изменения. Компилирование файлов SASS выполняется еще быстрее и качественнее, когда шаблоны разбиваются на отдельные файлы, импортируемые в один большой файл. Если вы удалите кэшированные файлы, они будут сгенерированы снова при следующей компиляции.
Параметры
Вы можете установить параметры в файле Rails environment.rb или файле приложения Rack config.ru, используя следующую строку:
|
1 |
Sass::Plugin.options[:style] = :compact |
Вы также можете установить параметры для Merb в файле init.rb, следующим образом:
|
1 |
Merb::Plugin.config[:sass][:style] = :compact |
Ниже описаны параметры, доступные для SASS и SCSS:
:style — Отображает стиль для выводимых данных.
:syntax — Вы можете использовать синтаксис с отступами для sass и синтаксис раширения CSS для scss.
:property_syntax — Вы можете использовать синтаксис с отступами, чтобы применить свойства. Однако, если это будет сделано некорректно, в результате могут возникать ошибки. Например, «background: #F5F5F5», где background — это имя свойства, а #F5F5F5 — значение свойства. Вы должны указывать цвет после имени свойства.
:cache — Ускоряет компиляцию файлов SASS. По умолчанию для оператора задано значение true.
:read_cache — Считывает только файлы SASS, если не задано cache и задано read_cache.
:cache_store — Может использоваться для хранения и доступа к закэшированным результатам, если задать параметр для экземпляра объекта Sass::CacheStores::Base.
:never_update — Указывает никогда не обновлять CSS-файл при обновлении файлов шаблона. По умолчанию установлено false.
:always_update — Указывает обновлять CSS-файл при каждом внесении изменений в файлы шаблона.
:always_check — Указывает проверять наличие обновлений при каждом запуске сервера. Если файл шаблона SASS был обновлен, CSS-файл будет перекомпилирован и переписан.
:poll — Используется polling back-end для Sass::Plugin::Compiler#watch (который просматривает шаблон и обновления CSS-файла), если для параметра задано true.
:full_exception — Выводит описание ошибок каждый раз, когда в код SASS в генерируемом CSS-файле добавляются исключения. Выводится номер строки, в которой возникла ошибка, а также исходный код в CSS-файле.
:template_location — Предоставляет путь к директории шаблона в приложении.
:css_location — Предоставляет путь к таблице стилей CSS в приложении.
:unix_newlines — Когда задано true, обеспечивает при написании файла переносы строк в формате Unix.
:filename — Задает имя файла, которое будет отображаться и использоваться в отчете об ошибках.
:line — Указывает первую строку шаблона SASS и отображает номер строки для отчета об ошибках.
:load_paths — Используется для загрузки пути к шаблону SASS, который включается через директиву @import.
:filesystem_importer — Используется для импорта файлов из файловой системы, которая использует подкласс Sass::Importers::Base для обработки строк загруженных путей.
:sourcemap — Генерирует карту источников, которая указывает браузеру, где искать стили SASS. Для параметра используются три значения: :auto − содержит относительные URI. Если относительные URI отсутствуют, тогда используется «file:» URI; :file − Используются «file:» URIs, которые работают локально, не на удаленном сервере; :inline − Содержит исходный текст в карте источников, который используется для большого файла карты источников.
:line_numbers — Если задано true, отображает номер строки для отчета об ошибках в CSS-файле.
:trace_selectors — Если задано true, помогает отслеживать селекторы импорта и примеси.
:debug_info — Если задано true, предоставляет информацию об исправлении ошибок в файле SASS с именем строки и именем файла.
:custom — Делает данные доступными для функций SASS в отдельном приложении.
:quiet — Если задано true, отключает вывод предупреждений.
Выбор синтаксиса
Вы можете определять, какой синтаксис использовать в шаблоне SASS, используя инструмент командной строки SASS. По умолчанию используется синтаксис с отступами, который является альтернативой синтаксису SCSS на основе CSS. Вы можете использовать программу командной строки SCSS, которая похожа на программу SASS, но по умолчанию она исходит из того, что используется синтаксис SCSS.
Кодировки
SASS использует кодировку символов таблиц стилей, через указание следующих спецификаций CSS:
Сначала он ищет заданную кодировку байтов Unicode, далее объявление @charset и кодировку строк Ruby.
Затем, если ничего не задано, в качестве заданной кодировки будет рассматриваться кодировка UTF-8.
Укажите кодировку символов явно через объявление @charset. Просто добавьте «@charset название кодировки» в начале таблицы стилей, и SASS воспримет ее, как заданную кодировку символов.
Если выходной файл SASS содержит символы, отличные от ASCII, то будет использоваться объявление @charset.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
