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 — приложение для часов / sass: общедоступное / таблицы стилей Он используется для просмотра всего каталога, если SASS содержит много файлов в каталоге. |
sass input.scss output.css
Он используется для запуска кода SASS из командной строки.
sass —watch input.scss: output.css
Он информирует SASS о просмотре файла и обновлении CSS при каждом изменении файла SASS.
sass — приложение для часов / sass: общедоступное / таблицы стилей
Он используется для просмотра всего каталога, если SASS содержит много файлов в каталоге.
Rack / Rails / Merb Plugin
Rack — это интерфейс веб-сервера, который используется для разработки веб-приложений на Ruby. Для получения информации о стойке, просто перейдите по этой ссылке .
Вы можете включить SASS в версии Rails 3, используя файл environment.rb, находящийся в папке config . Включите SASS для Rails 3, используя следующий код —
config.gem "sass"
Вы можете использовать следующую строку в Gemfile для Rails 3 (и выше), как —
gem "sass"
Rails — это веб-инфраструктура с открытым исходным кодом, которая использует веб-стандарты, такие как JSON, HTML, CSS и JavaScript, для отображения пользовательского интерфейса. Для работы с Rails вам необходимо иметь базовые знания Ruby и объектно-ориентированного программирования. Узнайте больше о фреймворке Rails здесь .
Если вы хотите включить приложение SASS in Rack , добавьте следующие строки в файл config.ru , который находится в корневом каталоге приложения:
require 'sass/plugin/rack' use Sass::Plugin::Rack
Merb — это фреймворк для веб-приложений, который обеспечивает скорость и модульность для 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 |
:стиль Он отображает стиль вывода. |
| 2 |
:синтаксис Вы можете использовать отступ синтаксиса для sass и синтаксис расширения CSS для scss . |
| 3 |
: property_syntax Он использует отступ синтаксиса для использования свойств. Если это не правильно, то это выдаст ошибку. Например, рассмотрим «background: # F5F5F5», в котором background является именем свойства, а # F5F5F5 является значением его свойства. Вы должны использовать двоеточие после имени свойства. |
| 4 |
: кэш Ускоряет компиляцию файлов 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 |
:опрос Он использует опросный бэкэнд для 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 |
:имя файла Это имя файла, которое отображается и используется для сообщения об ошибках. |
| 16 |
:линия Он определяет первую строку шаблона 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 |
: пользовательские Это делает данные доступными для функций SASS в отдельных приложениях. |
| 24 |
:тихо Он отключает предупреждения, устанавливая его в значение true. |
:стиль
Он отображает стиль вывода.
:синтаксис
Вы можете использовать отступ синтаксиса для sass и синтаксис расширения CSS для scss .
: property_syntax
Он использует отступ синтаксиса для использования свойств. Если это не правильно, то это выдаст ошибку. Например, рассмотрим «background: # F5F5F5», в котором background является именем свойства, а # F5F5F5 является значением его свойства. Вы должны использовать двоеточие после имени свойства.
: кэш
Ускоряет компиляцию файлов SASS. По умолчанию установлено значение true.
: read_cache
Он только для чтения файлов SASS, если кеш не установлен и read_cache установлен.
: cache_store
Его можно использовать для хранения и доступа к кэшированному результату, установив для него экземпляр Sass :: CacheStores :: Base .
: never_update
Он никогда не должен обновлять файл CSS, если файлы шаблона изменяются. По умолчанию установлено значение false.
: always_update
Он должен обновлять файл CSS при каждом изменении файлов шаблона.
: always_check
Он должен проверять наличие обновлений при каждом запуске сервера. Он перекомпилирует и перезапишет файл CSS, если в файле шаблона SASS есть обновление.
:опрос
Он использует опросный бэкэнд для Sass :: Plugin :: Compiler # watch (который следит за шаблоном и обновлением CSS-файлов) , устанавливая для него значение true.
: full_exception
Он отображает описание ошибки всякий раз, когда возникает исключение в коде SASS в созданном файле CSS. Он отображает номер строки, в которой произошла ошибка, а также источник в файле CSS.
: template_location
Он предоставляет путь к каталогу шаблона в приложении.
: css_location
Он предоставляет путь для таблиц стилей CSS в приложении.
: unix_newlines
Он предоставляет новые строки в стиле Unix при записи файлов, устанавливая для него значение true.
:имя файла
Это имя файла, которое отображается и используется для сообщения об ошибках.
:линия
Он определяет первую строку шаблона SASS и отображает номера строк для ошибок.
: load_paths
Он используется для загрузки путей для шаблона SASS, которые включены с использованием директивы @import .
: filesystem_importer
Он используется для импорта файлов из файловой системы, которая использует подкласс Sass :: Importers :: Base для обработки путей загрузки строк.
: sourcemap
Он генерирует исходные карты, которые инструктируют браузер найти стили SASS. Он использует три значения —
: auto — содержит относительные URI. Если нет относительного URI, тогда используется «file:» URI.
: file — Использует URI «file:», которые работают локально, а не на удаленном сервере.
: inline — содержит исходный текст на исходной карте, который используется для создания больших файлов исходных карт.
: line_numbers
Он отображает номер строки для ошибок, сообщенных в файле CSS, установив для него значение true.
: trace_selectors
Это помогает отследить селекторы импорта и миксины, когда оно установлено в значение true.
: debug_info
Он предоставляет информацию об отладке файла SASS, используя номер строки и файл, когда для него установлено значение true.
: пользовательские
Это делает данные доступными для функций SASS в отдельных приложениях.
:тихо
Он отключает предупреждения, устанавливая его в значение true.
Выбор синтаксиса
Вы можете определить, какой синтаксис вы используете в шаблоне SASS, используя инструмент командной строки SASS. По умолчанию SASS использует синтаксис с отступом, который является альтернативой синтаксису SCSS на основе CSS. Вы можете использовать программу командной строки SCSS, которая похожа на программу SASS, но по умолчанию она использует синтаксис SCSS.
Кодировки
SASS использует кодировку символов таблиц стилей, указав следующие спецификации CSS —
Сначала он проверяет байт Unicode, следующее объявление @charset, а затем кодирование строки Ruby.
Далее, если ничего не установлено, тогда кодирование кодировки рассматривается как UTF-8 .
Определите кодировку символов явно с помощью объявления @charset . Просто используйте «имя кодировки @charset» в начале таблицы стилей, и SASS предполагает, что это заданная кодировка символов.
Если выходной файл SASS содержит символы не ASCII, он будет использовать объявление @charset .