Учебники

Sass – Краткое руководство

Sass – Обзор

SASS (Syntaxically Awesome Stylesheet) – это препроцессор CSS, который помогает уменьшить количество повторений с помощью CSS и экономит время. Это более стабильный и мощный язык расширений CSS, который четко и структурно описывает стиль документа.

Первоначально он был разработан Хэмптоном Кэтлином и разработан Натали Вайзенбаум в 2006 году. Позже Вайзенбаум и Крис Эппштейн использовали свою первоначальную версию для расширения Sass с помощью SassScript.

Зачем использовать SASS?

  • Это язык предварительной обработки, который обеспечивает синтаксис с отступом (свой собственный синтаксис) для CSS.

  • Он предоставляет некоторые функции, которые используются для создания таблиц стилей, которые позволяют писать код более эффективно и просты в обслуживании.

  • Это супер-набор CSS, что означает, что он содержит все функции CSS и является препроцессором с открытым исходным кодом, написанным на Ruby .

  • Он обеспечивает стиль документа в хорошем, структурированном формате, чем плоский CSS. Он использует методы многократного использования, логические операторы и некоторые встроенные функции, такие как управление цветом, математика и списки параметров.

Это язык предварительной обработки, который обеспечивает синтаксис с отступом (свой собственный синтаксис) для CSS.

Он предоставляет некоторые функции, которые используются для создания таблиц стилей, которые позволяют писать код более эффективно и просты в обслуживании.

Это супер-набор CSS, что означает, что он содержит все функции CSS и является препроцессором с открытым исходным кодом, написанным на Ruby .

Он обеспечивает стиль документа в хорошем, структурированном формате, чем плоский CSS. Он использует методы многократного использования, логические операторы и некоторые встроенные функции, такие как управление цветом, математика и списки параметров.

Особенности SASS

  • Он более стабилен, мощен и совместим с версиями CSS.

  • Это супер набор CSS и основан на JavaScript.

  • Он известен как синтаксический сахар для CSS, что означает, что он упрощает для пользователя чтение или выражение вещей более четко.

  • Он использует свой собственный синтаксис и компилирует в читаемый CSS.

  • Вы можете легко написать CSS в меньшем количестве кода за меньшее время.

  • Это препроцессор с открытым исходным кодом, который интерпретируется в CSS.

Он более стабилен, мощен и совместим с версиями CSS.

Это супер набор CSS и основан на JavaScript.

Он известен как синтаксический сахар для CSS, что означает, что он упрощает для пользователя чтение или выражение вещей более четко.

Он использует свой собственный синтаксис и компилирует в читаемый CSS.

Вы можете легко написать CSS в меньшем количестве кода за меньшее время.

Это препроцессор с открытым исходным кодом, который интерпретируется в CSS.

Преимущества SASS

  • Это позволяет писать чистый CSS в программной конструкции.

  • Это помогает в написании CSS быстро.

  • Это расширенный набор CSS, который помогает дизайнерам и разработчикам работать более эффективно и быстро.

  • Поскольку Sass совместим со всеми версиями CSS, мы можем использовать любые доступные библиотеки CSS.

  • Можно использовать вложенный синтаксис и полезные функции, такие как манипулирование цветом, математика и другие значения.

Это позволяет писать чистый CSS в программной конструкции.

Это помогает в написании CSS быстро.

Это расширенный набор CSS, который помогает дизайнерам и разработчикам работать более эффективно и быстро.

Поскольку Sass совместим со всеми версиями CSS, мы можем использовать любые доступные библиотеки CSS.

Можно использовать вложенный синтаксис и полезные функции, такие как манипулирование цветом, математика и другие значения.

Недостатки SASS

  • Разработчику требуется время, чтобы освоить новые функции, присутствующие в этом препроцессоре.

  • Если на одном сайте работает много людей, то следует использовать один и тот же препроцессор. Некоторые люди используют Sass, а некоторые люди используют CSS для непосредственного редактирования файлов. Поэтому становится сложно работать на сайте.

  • Есть шансы потерять преимущества встроенного в браузер элемента инспектора.

Разработчику требуется время, чтобы освоить новые функции, присутствующие в этом препроцессоре.

Если на одном сайте работает много людей, то следует использовать один и тот же препроцессор. Некоторые люди используют Sass, а некоторые люди используют CSS для непосредственного редактирования файлов. Поэтому становится сложно работать на сайте.

Есть шансы потерять преимущества встроенного в браузер элемента инспектора.

Sass – Установка

В этой главе мы изучим пошаговую процедуру установки Ruby, которая используется для выполнения файлов SASS.

Системные требования для SASS

  • Операционная система – кроссплатформенная

  • Поддержка браузера – IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

  • Язык программирования – Ruby

Операционная система – кроссплатформенная

Поддержка браузера – IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

Язык программирования – Ruby

Установка Ruby

Шаг 1 – Откройте ссылку https://www.ruby-lang.org/en/downloads/ , вы увидите экран, как показано ниже –

SASS Установка

Загрузите текущую стабильную версию zip-файла.

Шаг 2 – Затем запустите программу установки, чтобы установить Ruby в Системе.

Шаг 3 – Затем добавьте папку Ruby bin в вашу переменную пользователя PATH и системную переменную для работы с командой gem.

Пользовательская переменная пути

  • Щелкните правой кнопкой мыши значок « Мой компьютер» .

  • Выберите Свойства .

  • Затем перейдите на вкладку « Дополнительно » и нажмите « Переменные среды» .

Щелкните правой кнопкой мыши значок « Мой компьютер» .

Выберите Свойства .

Затем перейдите на вкладку « Дополнительно » и нажмите « Переменные среды» .

SASS Установка

В окне Переменные среды дважды щелкните PATH, как показано на снимке экрана ниже.

SASS Установка

Вы получите окно Изменить пользовательскую переменную, как показано на рисунке. Добавьте путь к папке ruby ​​bin в поле Значение переменной как C: \ Ruby \ bin . Если путь уже задан для других файлов, введите точку с запятой и добавьте путь к папке Ruby, как показано ниже.

SASS Установка

Нажмите кнопку ОК .

Системная переменная

  • Нажмите кнопку Новый .

Нажмите кнопку Новый .

SASS Установка

Далее отображается блок New System Variable, как показано ниже.

SASS Установка

  • Введите RubyOpt в поле Имя переменной и rubygems в поле Значение переменной . После ввода имени и значения переменной нажмите кнопку ОК .

Введите RubyOpt в поле Имя переменной и rubygems в поле Значение переменной . После ввода имени и значения переменной нажмите кнопку ОК .

Шаг 4 – Откройте командную строку в вашей системе и введите следующую строку –

gem install sass

Шаг 5 – Далее вы увидите следующий экран после успешной установки SASS.

SASS Установка

пример

Ниже приведен простой пример SASS.

<html>
   <head>
      <title> Import example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Simple Example</h1>
      <h3>Welcome to TutorialsPoint</h3>
   </body>
</html>

Теперь мы создадим файл как style.scss , который очень похож на CSS, и единственное отличие состоит в том, что он будет сохранен с расширением .scss. Оба файла .htm и .scss должны быть созданы внутри папки ruby . Вы можете сохранить ваш файл .scss в папке ruby \ lib \ sass \ (перед этим создайте папку sass в каталоге lib).

h1{
   color: #AF80ED;
}

h3{
   color: #DE5E85;
}

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

sass --watch C:\ruby\lib\sass\style.scss:style.css

SASS Установка

Когда вы запустите указанную выше команду, она автоматически создаст файл style.css . При каждом изменении файла SCSS файл style.css будет обновляться автоматически.

Файл style.css будет иметь следующий код при запуске указанной выше команды –

style.css

h1 {
   color: #AF80ED;
}
h3 {
   color: #DE5E85;
}

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код –

  • Сохраните приведенный выше код в файле hello.html .

  • Откройте этот файл HTML в браузере.

Сохраните приведенный выше код в файле hello.html .

Откройте этот файл HTML в браузере.

SASS Установка

Sass – Синтаксис

В этой главе мы будем изучать синтаксис SASS. SASS поддерживает два синтаксиса, а именно SCSS и синтаксис с отступом .

  • SCSS (Sassy CSS) является расширением синтаксиса CSS. Это означает, что каждый действительный CSS также является допустимым SCSS. SCSS значительно упрощает поддержку больших таблиц стилей и может распознавать специфический синтаксис поставщика. Многие файлы CSS и SCSS используют расширение .scss .

  • Отступ – это более старый синтаксис, иногда его называют просто SASS . Используя эту форму синтаксиса, CSS можно написать кратко. Файлы SASS используют расширение .sass .

SCSS (Sassy CSS) является расширением синтаксиса CSS. Это означает, что каждый действительный CSS также является допустимым SCSS. SCSS значительно упрощает поддержку больших таблиц стилей и может распознавать специфический синтаксис поставщика. Многие файлы CSS и SCSS используют расширение .scss .

Отступ – это более старый синтаксис, иногда его называют просто SASS . Используя эту форму синтаксиса, CSS можно написать кратко. Файлы SASS используют расширение .sass .

SASS с отступом синтаксис

SASS С отступным синтаксисом или просто SASS является альтернативой синтаксису SCSS на основе CSS.

  • Он использует отступ, а не { и } для разделения блоков.

  • Для разделения операторов он использует символы новой строки вместо точек с запятой (;) .

  • Объявление свойства и селекторы должны быть размещены в отдельной строке, а операторы внутри { и } должны быть помещены в новую строку и с отступом .

Он использует отступ, а не { и } для разделения блоков.

Для разделения операторов он использует символы новой строки вместо точек с запятой (;) .

Объявление свойства и селекторы должны быть размещены в отдельной строке, а операторы внутри { и } должны быть помещены в новую строку и с отступом .

Например, рассмотрим следующий код SCSS –

.myclass {
   color = red;
   font-size = 0.2em;
}

Синтаксис с отступом – это более старый синтаксис, который не рекомендуется использовать в новых файлах Sass. Если вы используете этот файл, он отобразит ошибку в файле CSS, как мы использовали = вместо того, чтобы устанавливать свойства и переменные.

Скомпилируйте приведенный выше код с помощью следующей команды –

sass --watch C:\ruby\lib\sass\style.scss:style.css

Затем выполните приведенную выше команду; он отобразит ошибку в файле style.css, как показано ниже –

Error: Invalid CSS after "  color = red": expected "{", was ";"
      on line 2 of C:\ruby\lib\sass\style17.scss

1:.myclass {
2:   color = red;
3:   font-size = 0.2em;
4:}

Синтаксические различия SASS

Большинство синтаксисов CSS и SCSS отлично работают в SASS. Тем не менее, есть некоторые различия, которые объясняются в следующих разделах –

Синтаксис свойства

Свойства CSS могут быть объявлены двумя способами:

  • Свойства могут быть объявлены аналогично CSS, но без точки с запятой (;) .

  • двоеточие (:) будет добавлено к каждому имени свойства.

Свойства могут быть объявлены аналогично CSS, но без точки с запятой (;) .

двоеточие (:) будет добавлено к каждому имени свойства.

Например, вы можете написать как –

.myclass
   :color red
   :font-size 0.2em

По умолчанию можно использовать оба вышеуказанных способа (объявление свойств без точки с запятой и двоеточия с префиксом имени свойства). Однако разрешено указывать только один синтаксис свойства при использовании параметра : property_syntax .

Многострочные селекторы

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

пример

В следующем примере описано использование многострочных селекторов в файле SCSS.

<html>
   <head>
      <title>Multiline Selectors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>
   
   <body>
      <h2>Example using Multiline Selectors</h2 >
      <p class = "class1">Welcome to Tutorialspoint!!!</p>
      <p class = "class2">SASS stands for Syntactically Awesome Stylesheet...</p>
   </body>
</html>

Далее создайте файл style.scss . Обратите внимание на расширение .scss .

style.scss

.class1,
.class2{
   color:red;
}

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

sass --watch C:\ruby\lib\sass\style.scss:style.css

Затем выполните приведенную выше команду, она автоматически создаст файл style.css со следующим кодом –

Сгенерированный style.css как показано ниже –

style.css

.class1,
.class2 {
   color: red;
}

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код –

  • Сохраните приведенный выше HTML-код в файле multiline_selectors .html.

  • Откройте этот HTML-файл в браузере, вывод отобразится так, как показано ниже.

Сохраните приведенный выше HTML-код в файле multiline_selectors .html.

Откройте этот HTML-файл в браузере, вывод отобразится так, как показано ниже.

Sass Синтаксис

Комментарии

Комментарии занимают целую строку и заключают весь текст, вложенный в них. Они основаны на строках с отступным синтаксисом. Для получения дополнительной информации о комментариях, перейдите по этой ссылке .

@Импортировать

В SASS директива @import может быть написана с / без кавычек. В отличие от SCSS, они должны использоваться с кавычками.

Например, в SCSS директива @import может использоваться как –

@import "themes/blackforest";
@import "style.sass";

Это может быть записано в SASS как –

@import themes/blackforest
@import fontstyle.sass

Mixin Директивы

SASS поддерживает сокращение для таких директив, как @mixin и @include . Вместо @mixin и @include вы можете использовать символы = и + , которые требуют меньше ввода и делают ваш код проще и легче для чтения.

Например, вы можете написать директивы mixin как –

=myclass
   font-size: 12px;
p
   +myclass

Приведенный выше код такой же, как –

@mixin myclass
   font-size: 12px;
p
   @include myclass

Устаревший синтаксис

SASS поддерживает использование некоторого старого синтаксиса. Однако использование этого синтаксиса в SASS не рекомендуется . Предупреждение будет отображаться, если вы используете этот синтаксис, и он будет удален в более поздних версиях. Некоторые из старых синтаксисов показаны в следующей таблице.

С. Нет. Оператор и описание
1

знак равно

Он использовался вместо: при установке переменных и свойств в значения SassScript.

2

|| =

Он использовался вместо: всякий раз, когда вы назначаете значение переменной по умолчанию.

3

!

Вместо $,! был использован в качестве префикса переменной. Функциональность не будет изменена, если она используется вместо $.

знак равно

Он использовался вместо: при установке переменных и свойств в значения SassScript.

|| =

Он использовался вместо: всякий раз, когда вы назначаете значение переменной по умолчанию.

!

Вместо $,! был использован в качестве префикса переменной. Функциональность не будет изменена, если она используется вместо $.

Используя 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 – приложение для часов / 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. Он использует три значения –

  • : auto – содержит относительные URI. Если нет относительного URI, тогда используется «file:» URI.

  • : file – Использует URI “file:”, которые работают локально, а не на удаленном сервере.

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

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 .

Сначала он проверяет байт Unicode, следующее объявление @charset, а затем кодирование строки Ruby.

Далее, если ничего не установлено, тогда кодирование кодировки рассматривается как UTF-8 .

Определите кодировку символов явно с помощью объявления @charset . Просто используйте «имя кодировки @charset» в начале таблицы стилей, и SASS предполагает, что это заданная кодировка символов.

Если выходной файл SASS содержит символы не ASCII, он будет использовать объявление @charset .

Sass – CSS-расширения

В этой главе мы будем изучать CSS-расширения . Расширения CSS могут использоваться для улучшения функциональности веб-страниц. В следующей таблице перечислены некоторые расширения CSS, используемые в SASS.

С. Нет. Расширение и описание CSS
1 Вложенные правила

Это способ объединения нескольких правил CSS друг в друге.

2 Ссылки на родительские селекторы: &

Это процесс выбора родительского селектора с помощью символа & .

3 Вложенные свойства

Это позволяет вложить свойства в другие свойства, что приводит к группировке другого связанного кода.

4 Селекторные селекторы

Sass поддерживает селектор-заполнитель, используя селектор класса или идентификатора, используя директиву @extend .

Это способ объединения нескольких правил CSS друг в друге.

Это процесс выбора родительского селектора с помощью символа & .

Это позволяет вложить свойства в другие свойства, что приводит к группировке другого связанного кода.

Sass поддерживает селектор-заполнитель, используя селектор класса или идентификатора, используя директиву @extend .

Sass – Комментарии

В этой главе мы будем изучать Sass Comments . Комментарии представляют собой неисполняемые операторы, которые помещаются в исходный код. Комментарии облегчают понимание исходного кода. SASS поддерживает два типа комментариев.

  • Многострочные комментарии – написаны с использованием / * и * /. Многострочные комментарии сохраняются при выводе CSS.

  • Однострочные комментарии – написаны с использованием //, за которыми следуют комментарии. Однострочные комментарии не сохраняются при выводе CSS.

Многострочные комментарии – написаны с использованием / * и * /. Многострочные комментарии сохраняются при выводе CSS.

Однострочные комментарии – написаны с использованием //, за которыми следуют комментарии. Однострочные комментарии не сохраняются при выводе CSS.

пример

В следующем примере демонстрируется использование комментариев в файле SCSS.

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <a href = "http://www.tutorialspoint.com/">TutorialsPoint</a>
   </body>
</html>

Далее создайте файл style.scss .

style.scss

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are in single line
// They will not appear in the CSS output,
// since they use the single-line comment syntax.
a { color: blue; }

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

sass --watch C:\ruby\lib\sass\style.scss:style.css

Затем выполните указанную выше команду, она автоматически создаст файл style.css со следующим кодом –

style.css

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
   color: black; }

a {
   color: blue; }

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код –

  • Сохраните приведенный выше HTML-код в файле sass_comments.html .

  • Откройте этот HTML-файл в браузере, вывод отобразится так, как показано ниже.

Сохраните приведенный выше HTML-код в файле sass_comments.html .

Откройте этот HTML-файл в браузере, вывод отобразится так, как показано ниже.

Sass Комментарии

Чтобы узнать об интерполяции в многострочных комментариях, нажмите эту ссылку .

Sass – интерполяция в многострочных комментариях

Описание

Интерполяция внутри многострочных комментариев разрешается в результирующем CSS. Вы можете указать переменные или имена свойств в фигурных скобках.

Синтаксис

$var : "value";
/* multiline comments #{$var} */

пример

В следующем примере демонстрируется использование интерполяции в многострочных комментариях в файле SCSS.

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <p>This is an example for Interpolation in SASS.</p>
   </body>
</html>

Далее создайте файл style.scss .

style.css

$version: "7.8";
/* Framework version for the generated CSS is #{$version}. */

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

sass --watch C:\ruby\lib\sass\style.scss:style.css

Затем выполните приведенную выше команду; он автоматически создаст файл style.css со следующим кодом

style.css

/* Framework version for the generated CSS is 7.8. */

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код –

  • Сохраните приведенный выше HTML-код в файле sass_comments_interpolation.htm .

  • Откройте этот HTML-файл в браузере, вывод отобразится так, как показано ниже.

Сохраните приведенный выше HTML-код в файле sass_comments_interpolation.htm .

Откройте этот HTML-файл в браузере, вывод отобразится так, как показано ниже.

Sass Комментарии

Sass – Скрипт

SASS использует небольшой набор расширений, известных как SassScript, которые могут быть включены в документы SASS для вычисления переменных из значений свойств и использует свойства переменных, арифметических и других функций. SassScript также может использоваться с селекторами и именами свойств при использовании миксинов (Mixins позволяет повторно использовать стили CSS во всей таблице стилей).

В следующей таблице перечислены некоторые расширения CSS, используемые в SASS –

С. Нет. Расширение и описание CSS
1 Интерактивная оболочка

Он оценивает выражение SassScript с помощью командной строки.

2 переменные

Он представляет данные, такие как числовые значения, символы или адреса памяти.

3 Типы данных

Он объявляет тип данных для каждого объекта данных.

4 операции

Он предоставляет такие операции, как число, цвет, строка, логическое значение и операции со списком.

5 Скобки

Это пара знаков, которые обычно помечаются круглыми скобками () или квадратными скобками [].

6 функции

Он поддерживает использование функций, предоставляя некоторые ключевые аргументы.

7 интерполирование

Он предоставляет переменные SassScript и имена свойств с использованием синтаксиса # {} .

8 & в SassScript

Это позволяет вложить свойства в другое свойство, что приводит к группе другого связанного кода.

9 Переменные по умолчанию

Это позволяет вложить свойства в другое свойство, что приводит к группе другого связанного кода.

Он оценивает выражение SassScript с помощью командной строки.

Он представляет данные, такие как числовые значения, символы или адреса памяти.

Он объявляет тип данных для каждого объекта данных.

Он предоставляет такие операции, как число, цвет, строка, логическое значение и операции со списком.

Это пара знаков, которые обычно помечаются круглыми скобками () или квадратными скобками [].

Он поддерживает использование функций, предоставляя некоторые ключевые аргументы.

Он предоставляет переменные SassScript и имена свойств с использованием синтаксиса # {} .

Это позволяет вложить свойства в другое свойство, что приводит к группе другого связанного кода.

Это позволяет вложить свойства в другое свойство, что приводит к группе другого связанного кода.

Sass-ru-Правила и директивы

В следующей таблице перечислены все правила и директивы, которые вы можете использовать в SASS.

С. Нет. Директивы и описание
1 @Импортировать

Он импортирует файлы SASS или SCSS, он напрямую берет имя файла для импорта.

2 @средства массовой информации

Он устанавливает правило стиля для разных типов медиа.

3 @extend

Директива @extend используется для разделения правил и отношений между селекторами.

4 @ на корню

Директива @ at-root – это набор вложенных правил, которые могут сделать блок стилей в корне документа.

5 @debug

Директива @debug обнаруживает ошибки и отображает значения выражений SassScript в стандартный поток вывода ошибок.

6 @warn

Директива @warn используется для предупреждения о проблеме; он отображает значения выражений SassScript в стандартный поток вывода ошибок.

7 @ошибка

Директива @error отображает значение выражения SassScript как фатальную ошибку.

Он импортирует файлы SASS или SCSS, он напрямую берет имя файла для импорта.

Он устанавливает правило стиля для разных типов медиа.

Директива @extend используется для разделения правил и отношений между селекторами.

Директива @ at-root – это набор вложенных правил, которые могут сделать блок стилей в корне документа.

Директива @debug обнаруживает ошибки и отображает значения выражений SassScript в стандартный поток вывода ошибок.

Директива @warn используется для предупреждения о проблеме; он отображает значения выражений SassScript в стандартный поток вывода ошибок.

Директива @error отображает значение выражения SassScript как фатальную ошибку.

Sass – Управляющие директивы и выражения

В этой главе мы изучим директивы и выражения управления . Стилизация, основанная на некоторых условиях или многократное применение одного и того же стиля с вариациями, может быть выполнена с помощью управляющих директив и выражений, которые поддерживаются SassScript. Эти директивы управления представляют собой расширенные опции, используемые в основном в миксинах. Они требуют значительной гибкости, так как являются частью библиотек Compass.

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

С. Нет. Директива управления и выражение с описанием
1 если()

Исходя из условия, функция if () возвращает только один результат из двух возможных.

2 @если

Директива @if принимает выражения SassScript и использует вложенные стили всякий раз, когда результатом выражения является что-либо, кроме false или null .

3 @за

Директива @for позволяет генерировать стили в цикле.

4 @each

В директиве @each определяется переменная, которая содержит значение каждого элемента в списке.

5 @в то время как

Он принимает выражения SassScript и до тех пор, пока оператор оценивает как ложный, он итеративно выводит вложенные стили.

Исходя из условия, функция if () возвращает только один результат из двух возможных.

Директива @if принимает выражения SassScript и использует вложенные стили всякий раз, когда результатом выражения является что-либо, кроме false или null .

Директива @for позволяет генерировать стили в цикле.

В директиве @each определяется переменная, которая содержит значение каждого элемента в списке.

Он принимает выражения SassScript и до тех пор, пока оператор оценивает как ложный, он итеративно выводит вложенные стили.

Sass – Mixin Директивы

Миксины позволяют создавать группу стилей, которые можно повторно использовать в вашей таблице стилей без необходимости воссоздания несемантических классов. В CSS миксины могут хранить несколько значений или параметров и вызывать функцию; это помогает избежать написания повторяющихся кодов. Имена Mixin могут использовать подчеркивания и дефисы взаимозаменяемо. Ниже приведены директивы, присутствующие в Mixins –

С. Нет. Директива и описание
1 Определение миксина

Директива @mixin используется для определения миксина.

2 Включая миксин

Директива @include используется для включения миксов в документ.

3 аргументы

Значения SassScript могут быть приняты в качестве аргументов в миксинах, что указывается, когда миксин включен и доступен как переменная в миксине.

4 Передача блоков контента в миксин

Блок стилей передается в миксин.

Директива @mixin используется для определения миксина.

Директива @include используется для включения миксов в документ.

Значения SassScript могут быть приняты в качестве аргументов в миксинах, что указывается, когда миксин включен и доступен как переменная в миксине.

Блок стилей передается в миксин.

Sass – Директивы функций

В этой главе мы будем изучать директивы функций . В SASS вы можете создавать свои собственные функции и использовать их в контексте скрипта или использовать с любым значением. Функции вызываются с использованием имени функции и с любыми параметрами.

пример

В следующем примере демонстрируется использование директивы функции в файле SCSS –

function_directive.htm

<html>
   <head>
      <title>Nested Rules</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>

   <body>
      <div class = "container" id = "set_width">
         <h2>Example for Function directives</h2>
         <p>SASS stands for Syntactically Awesome Stylesheet. </p>
      </div>
   </body>
</html>

Далее создайте файл style.scss .

style.scss

$first-width: 5px;
$second-width: 5px;

@function adjust_width($n) {
   @return $n * $first-width + ($n - 1) * $second-width;
}

#set_width { padding-left: adjust_width(10); }

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

sass --watch C:\ruby\lib\sass\style.scss:style.css

Затем выполните приведенную выше команду; он автоматически создаст файл style.css со следующим кодом –

style.css

#set_width {
   padding-left: 95px; 
}

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код –

  • Сохраните приведенный выше HTML-код в файле function_directive.html .

  • Откройте этот HTML-файл в браузере, вывод отобразится так, как показано ниже.

Сохраните приведенный выше HTML-код в файле function_directive.html .

Откройте этот HTML-файл в браузере, вывод отобразится так, как показано ниже.

Директивы Sass Function

В выводе вы можете видеть, что применяется левый отступ.

Так же, как и mixin, функция также может обращаться к глобально определенным переменным, а также принимать параметры. Вы должны вызвать возвращаемое значение для функции, используя @return . Мы можем вызвать SASS-определенные функции, используя ключевые параметры.

Вызовите вышеуказанную функцию, как показано ниже.

#set_width { padding-left: adjust_width($n: 10); }

Соглашения об именах

Чтобы избежать конфликтов имен, имена функций могут иметь префикс, чтобы их можно было легко дифференцировать. Как и миксины, переменные аргументы также поддерживаются пользовательскими функциями. Функции и другие идентификаторы SASS могут использовать подчеркивания (_) и дефисы (-) взаимозаменяемо.

Например, если функция определена как Adjust_width , она может быть использована как Adjust -width , и наоборот.

Sass – Стиль вывода

В этой главе мы рассмотрим стиль вывода SASS . Файл CSS, который генерирует SASS, состоит из стиля CSS по умолчанию, который отражает структуру документа. Стиль CSS по умолчанию хорош, но может не подходить для всех ситуаций; с другой стороны, SASS поддерживает множество других стилей.

Он поддерживает следующие разные стили вывода –

: вложенная

Вложенный стиль является стилем SASS по умолчанию. Этот способ стилизации очень полезен, когда вы имеете дело с большими файлами CSS. Это делает структуру файла более читабельной и легко понятной. Каждое свойство занимает свою собственную строку, а отступ каждого правила зависит от того, насколько глубоко оно вложено.

Например, мы можем вложить код в файл SASS, как показано ниже –

#first {
   background-color: #00FFFF;
   color: #C0C0C0; 
}

#first p {
   width: 10em; 
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00; 
}

: расширенная

В расширенном типе стилей CSS у каждого свойства и правила есть своя строка. Он занимает больше места по сравнению со стилем Nested CSS. Раздел Правила состоит из свойств, которые все предназначены для правил, тогда как правила не следуют никаким отступам.

Например, мы можем расширить код в файле SASS, как показано ниже –

#first {
   background-color: #00FFFF;
   color: #C0C0C0;
}

#first p {
   width: 10em;
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00;
}

: компактный

Компактный стиль CSS конкурентно занимает меньше места, чем расширенный и вложенный. Основное внимание уделяется селекторам, а не его свойствам. Каждый селектор занимает одну строку, и его свойства также размещаются в той же строке. Вложенные правила располагаются рядом друг с другом без новой строки, и отдельные группы правил будут иметь новые строки между ними.

Например, мы можем сжать код в файле SASS, как показано ниже –

#first { 
   background-color: #00FFFF; color: #C0C0C0; 
}

#first p { 
   width: 10em; 
}

.highlight { 
   text-decoration: underline; font-size: 5em; background-color: #FFFF00; 
}

: сжатый

Сжатый стиль CSS занимает наименьшее количество места по сравнению со всеми другими стилями, обсужденными выше. Он предоставляет пробелы только для разделения селекторов и новой строки в конце файла. Этот способ стилизации сбивает с толку и не легко читается.

Например, мы можем сжать код в файле SASS, как показано ниже –

#first { 
   background-color:#00FFFF;color:#C0C0C0
} 

#first p { 
   width:10em 
} 

.highlight { 
   text-decoration:underline;font-size:5em;background-color:#FFFF00 
}

Расширение Sass

Вы можете расширить функциональность SASS, чтобы предоставлять пользователям различные типы функций и настроек. Чтобы использовать эти функции, пользователь должен знать Ruby.

Определение пользовательских функций SASS

Вы можете определить свои собственные функции SASS при использовании Ruby API. Вы можете добавить свои пользовательские функции, добавив их в методы Ruby, как показано в следующем коде –

module Sass::Script::Functions
   def reverse(string)
      assert_type string, :String
      Sass::Script::Value::String.new(string.value.reverse)
   end
   declare :reverse, [:string]
end

В коде, который вы могли видеть, функция объявляет, определяет имена аргументов для функции. Если произойдет сбой, он не примет никаких аргументов, даже если функция работает, и он также принимает произвольные аргументы ключевого слова. Вы можете получить значения Ruby с помощью средства доступа к значениям и получить доступ к цветным объектам с помощью rgb, red, green или blue .

Магазины кеша

SASS хранит кэш проанализированных документов, который можно использовать повторно без повторного анализа. SASS использует : cache_location для записи файлов кэша в файловой системе. Это ускоряет компиляцию файлов SASS, и если вы удалите кэшированные файлы, они будут сгенерированы снова при следующей компиляции. Вы можете определить свое собственное хранилище кеша, установив опцию : cache_store . Это позволит записывать файлы кэша в файловую систему или совместно использовать файлы кэша для процессов или машин ruby. SASS использует экземпляр подкласса Sass :: CacheStores :: Base для хранения и получения результатов кэша.

Таможенные импортеры

SASS использует @import для импорта файлов SCSS и SASS и передает пути в правило @import для поиска подходящего кода пути для указанных путей. Импортеры SASS используют файловую систему для загрузки кода и добавляют к загрузке, используя базу данных или другую схему именования файлов.

Один импортер может загружать один файл и может быть помещен в массив : load_paths вместе с путями файловой системы. При использовании @import SASS ищет загруженные пути, которые импортируют путь для импортера. Когда путь найден, используется импортированный файл. Пользователь может наследовать импортеров от Sass :: Importers :: Base .