Использование 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::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

: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. Он использует три значения -

  • :auto- Он содержит относительные URI. Если относительного URI нет, используется URI "file:".

  • :file - Он использует URI "file:", которые работают локально, а не на удаленном сервере.

  • :inline - Он содержит исходный текст в исходной карте, который используется для создания больших файлов исходной карты.

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 .