Использование Sass
SASS является более мощным и стабильным, так как он предоставляет возможности базовому языку за счет расширения CSS. Вы можете использовать SASS тремя разными способами:
- Как инструмент командной строки
- Как модуль Ruby
- Как плагин для Rack enable framework
Если вы используете SASS в Windows, вам необходимо установить Rubyпервый. Дополнительные сведения об установке Ruby см. В главе « Установка SASS» .
В следующей таблице показаны команды, которые используются для выполнения кода SASS -
| С. Нет. | Команда и описание |
|---|---|
| 1 | sass input.scss output.css Он используется для запуска кода SASS из командной строки. |
| 2 | sass --watch input.scss:output.css Он сообщает SASS, что нужно следить за файлом и обновлять CSS при каждом изменении файла SASS. |
| 3 | sass --watch app/sass:public/stylesheets Он используется для просмотра всего каталога, если SASS содержит много файлов в каталоге. |
Плагин Rack / Rails / Merb
Rack- это интерфейс веб-сервера, который используется для разработки веб-приложений на Ruby. Для получения информации о Rack просто перейдите по этой ссылке .
Вы можете включить SASS в Rails 3 версия с использованием environment.rb файл присутствует под configпапка. Включите SASS для Rails 3, используя следующий код -
config.gem "sass"Вы можете использовать следующую строку в Gemfile для Rails 3 (и более поздних версий), как -
gem "sass"Rails- это веб-платформа с открытым исходным кодом, которая использует веб-стандарты, такие как JSON, HTML, CSS и JavaScript, для отображения пользовательского интерфейса. Для работы с Rails вам необходимо иметь базовые знания Ruby и объектно-ориентированного программирования. Узнайте больше о платформе on Rails здесь .
Если вы хотите включить SASS в Rack приложения добавьте следующие строки в config.ru файл, который находится в корневом каталоге приложения -
require 'sass/plugin/rack'
use Sass::Plugin::RackMerbэто фреймворк веб-приложений, который обеспечивает скорость и модульность Rails. Чтобы узнать больше о Merb, просто перейдите по этой ссылке .
Вы можете включить SASS в Merb добавив следующую строку в config/dependencies.rb файл -
dependency "merb-haml"Кеширование
SASS кэширует документы, такие как шаблоны и частичные файлы, которые можно использовать повторно, не анализируя их, если они не были изменены. Это ускоряет компиляцию файлов SASS и работает еще лучше, когда шаблоны разделены на отдельные файлы, которые все импортируются в один большой файл. Если вы удалите кешированные файлы, они будут сгенерированы снова при следующей компиляции.
Параметры
Вы можете установить параметры в файле environment.rb Rails или файле config.ru приложения Rack, используя следующую строку -
Sass::Plugin.options[:style] = :compactВы также можете установить параметры в файле init.rb Merb, используя следующую строку -
Merb::Plugin.config[:sass][:style] = :compactЕсть несколько вариантов, доступных с SASS и SCSS, как описано в таблице ниже -
| С. Нет. | Вариант и описание |
|---|---|
| 1 | :style Он отображает стиль вывода. |
| 2 | :syntax Вы можете использовать синтаксис с отступом для sass и синтаксис расширения CSS для scss . |
| 3 | :property_syntax Он использует синтаксис с отступом для использования свойств. Если это неверно, то будет выдана ошибка. Например, рассмотрим «фон: # F5F5F5», в котором фон - это имя свойства, а # F5F5F5 - его значение свойства. Вы должны использовать двоеточие после имени свойства. |
| 4 | :cache Это ускоряет компиляцию файлов SASS. По умолчанию установлено значение true. |
| 5 | :read_cache Он читает только файлы SASS, если кеш не установлен и установлен read_cache . |
| 6 | :cache_store Его можно использовать для хранения и доступа к кэшированному результату, установив его для экземпляра Sass :: CacheStores :: Base . |
| 7 | :never_update Он никогда не должен обновлять файл CSS, если файлы шаблона изменяются. По умолчанию установлено значение false. |
| 8 | :always_update Он должен обновлять файл CSS при каждом изменении файлов шаблона. |
| 9 | :always_check Он должен проверять наличие обновлений при каждом запуске сервера. Он перекомпилирует и перезапишет файл CSS, если в файле шаблона SASS есть обновление. |
| 10 | :poll Он использует бэкэнд опроса для Sass :: Plugin :: Compiler # watch (который следит за шаблоном и обновлением файлов CSS) , задав для него значение true. |
| 11 | :full_exception Он отображает описание ошибки всякий раз, когда возникает исключение в коде SASS в сгенерированном файле CSS. Он отображает номер строки, в которой произошла ошибка, вместе с источником в файле CSS. |
| 12 | :template_location Он предоставляет путь к каталогу шаблонов в приложении. |
| 13 | :css_location Он предоставляет путь к таблицам стилей CSS в приложении. |
| 14 | :unix_newlines Он предоставляет новые строки в стиле Unix при записи файлов, задав для него значение true. |
| 15 | :filename Это имя отображаемого файла, используемого для сообщения об ошибках. |
| 16 | :line Он определяет первую строку шаблона SASS и отображает номера строк для ошибок. |
| 17 | :load_paths Он используется для загрузки путей для шаблона SASS, которые включаются с помощью директивы @import . |
| 18 | :filesystem_importer Он используется для импорта файлов из файловой системы, которая использует подкласс Sass :: Importers :: Base для обработки путей загрузки строк. |
| 19 | :sourcemap Он генерирует исходные карты, которые инструктируют браузер найти стили SASS. Он использует три значения -
|
| 20 | :line_numbers Он отображает номер строки для ошибок, сообщаемых в файле CSS, задав для него значение true. |
| 21 год | :trace_selectors Это помогает отслеживать селекторы импорта и миксинов, если для него установлено значение true. |
| 22 | :debug_info Он предоставляет отладочную информацию файла SASS с использованием номера строки и файла, если для него установлено значение true. |
| 23 | :custom Это делает данные доступными для функций SASS в отдельных приложениях. |
| 24 | :quiet Он отключает предупреждения, задав для него значение true. |
Выбор синтаксиса
Вы можете определить, какой синтаксис вы используете в шаблоне SASS, используя инструмент командной строки SASS. По умолчанию SASS использует синтаксис с отступом, который является альтернативой синтаксису SCSS на основе CSS. Вы можете использовать программу командной строки SCSS, которая похожа на программу SASS, но по умолчанию она считает синтаксис SCSS.
Кодировки
SASS использует кодировку символов таблиц стилей, указывая следующие спецификации CSS:
Сначала он проверяет байт Unicode, следующее объявление @charset, а затем кодировку строки Ruby.
Затем, если ничего не установлено, кодировка рассматривается как UTF-8 .
Определите кодировку символов явно с помощью объявления @charset . Просто используйте «@charset encoding name» в начале таблицы стилей, и SASS будет считать, что это заданная кодировка символов.
Если выходной файл SASS содержит символы, отличные от ASCII, он будет использовать объявление @charset .