Sass (язык таблиц стилей) - Sass (stylesheet language)

Для схемы распространения программного обеспечения, известной как «SaaS», см. Программное обеспечение как сервис.
Sass
Sass Logo Color.svg
РазработаноХэмптон Кэтлин
РазработчикНатали Вайценбаум, Крис Эппштейн
Впервые появился28 ноября 2006 г.; 14 лет назад (2006-11-28)
Стабильный выпуск
3.5.6 / 23 марта 2018 г.; 2 года назад (2018-03-23)[1]
Печатная дисциплинаДинамический
Операционные системыКроссплатформенность
ЛицензияЛицензия MIT
Расширения имени файла.sass, .scss
Интернет сайтsass-lang.com
Основной реализации
Дротик, Рубин
Под влиянием
CSS (как с отступом, так и SCSS)

YAML и Haml (синтаксис с отступом)

Меньше (SCSS)
Под влиянием
Меньше, Стилус, Тритий, Загрузочный (v4 +)

Sass (Короче для синтаксически отличные таблицы стилей) это препроцессор язык сценариев то есть интерпретированный или же составлен в Каскадные таблицы стилей (CSS). SassScript - это сам язык сценариев.

Sass состоит из двух синтаксис. Исходный синтаксис, называемый «синтаксис с отступом», использует синтаксис, аналогичный Haml.[2] Оно использует отступ разделять блоки кода и новая линия символы в отдельные правила. В новом синтаксисе «SCSS» (Sassy CSS) используется блочное форматирование, подобное CSS. Он использует фигурные скобки для обозначения блоков кода и точки с запятой для разделения правил внутри блока. Синтаксис с отступом и файлы SCSS традиционно получают расширения .sass и .scss соответственно.

CSS3 состоит из серии селекторов и псевдоселекторов, которые группируют правила, которые к ним применяются. Sass (в более широком контексте обоих синтаксисов) расширяет CSS, предоставляя несколько механизмов, доступных в более традиционных языки программирования, особенно объектно-ориентированные языки, но они недоступны для самого CSS3. Когда SassScript интерпретируется, он создает блоки правил CSS для различных селекторов, как это определено файлом Sass. Интерпретатор Sass переводит SassScript в CSS. В качестве альтернативы Sass может отслеживать файл .sass или .scss и переводить его в выходной файл .css при сохранении файла .sass или .scss.[3]

Синтаксис с отступом - это метаязык. SCSS - это вложенный метаязык, поскольку действительный CSS является действительным SCSS с тем же семантика.

SassScript предоставляет следующие механизмы: переменные, гнездование, миксины, и селектор наследование.[2]

История

Sass изначально был разработан Хэмптон Кэтлин и разработан Натали Вайценбаум.[4][5] После его первоначальных версий Вайценбаум и Крис Эппштейн продолжили расширять Sass с помощью SassScript, языка сценариев, используемого в файлах Sass.

Основные реализации

SassScript был реализован на нескольких языках, примечательные реализации:

  • Оригинал Открытый исходный код Рубин реализация создана в 2006 году,[6] так как не рекомендуется из-за отсутствия специалистов по сопровождению и достиг конца срока службы в марте 2019 года.[7][8]
  • Официальный открытый исходный код Дротик выполнение.[6]
  • libSass, официальный открытый исходный код C ++ выполнение.
  • официальная реализация JavaScript, опубликованная как модуль "sass" на npm.
  • JSass, неофициальный Ява выполнение.[9]
  • phamlp, неофициальная реализация SASS / SCSS в PHP.[6]
  • Ваадин имеет реализацию Sass на Java.[10]
  • Firebug, а Fire Fox XUL ("наследие") расширение для веб-разработки.[11] С тех пор он устарел в пользу инструментов разработчика, интегрированных в сам Firefox. Он перестал работать, так как Firefox 57 отказался от поддержки расширений XUL.

Функции

Переменные

Sass позволяет определять переменные. Переменные начинаются с символа знак доллара ($). Переменная назначение делается с двоеточие (:).[11]

SassScript поддерживает четыре типа данных:[11]

  • Цифры (включая единицы)
  • Струны (с кавычками или без)
  • Цвета (имя или имена)
  • Булевы

Переменные могут быть аргументы к одному из нескольких доступных функции.[12] Во время перевода значения переменных вставляются в выходной документ CSS.[2]

SCSSSassСкомпилированный CSS
$ первичный цвет: # 3bbfce;$ маржа: 16px;.content-navigation {  цвет границы: $Основной цвет;  цвет: затемнять($Основной цвет, 10%);}.граница {  набивка: $поле / 2;  поле: $поле / 2;  цвет границы: $Основной цвет;}
$ первичный цвет: # 3bbfce$ маржа: 16px.content-navigation  цвет границы: $ первичный цвет  цвет: затемнять($ первичный цвет, 10%).граница  набивка: $ маржа/2  поле:  $ маржа/2  цвет границы: $ первичный цвет
.контент-навигация {  цвет границы: # 3bbfce;  цвет: # 2b9eab;}.граница {  набивка: 8px;  поле: 8px;  цвет границы: # 3bbfce;}

Гнездование

CSS поддерживает логическое вложение, но сами блоки кода не вложены. Sass позволяет вставлять вложенный код друг в друга.[2]

SCSSSassСкомпилированный CSS
стол.hl {  поле: 2em 0;  тд.ln {    выравнивание текста: верно;  }}Ли {  шрифт: {    семья: засечки;    масса: смелый;    размер: 1.3em;  }}
стол.hl   поле: 2Эм 0  тд.ln     выравнивание текста: верно  Ли   шрифт:     семья: засечки    масса: смелый    размер: 1.3Эм
стол.гл {  поле: 2Эм 0;}стол.гл тд.пер {  выравнивание текста: верно;}Ли {  семейство шрифтов: засечки;  font-weight: смелый;  размер шрифта: 1.3Эм;}

Более сложные типы вложенности, включая пространство имен вложение и родительские ссылки обсуждаются в документации Sass.[11]

SCSSSassСкомпилированный CSS
@mixin стол-основа {  th {    выравнивание текста: центр;    font-weight: смелый;  }  тд, th {    набивка: 2 пикселя;  }}#данные {  @включают стол-основа;}
= основание стола  th    выравнивание текста: центр    font-weight: смелый  тд, th    набивка: 2px#данные  + стол-основание
#данные th {  выравнивание текста: центр;  font-weight: смелый;}#данные тд, #данные th {  набивка: 2px;}

Петли

Sass позволяет перебирать переменные, используя @за, @каждый и @пока, который можно использовать для применения разных стилей к элементам с похожими классами или идентификаторами.

SassСкомпилированный CSS
$ squareCount: 4@за $ i из 1 через $ squareCount   #квадрат-#{$ i}    фоновый цвет: красный   ширина: 50px * $ i   высота: 120px / $ i
#квадрат-1 {  фоновый цвет: красный;  ширина: 50px;  высота: 120px;}#квадрат-2 {  фоновый цвет: красный;  ширина: 100px;  высота: 60px;}#квадрат-3 {  фоновый цвет: красный;  ширина: 150px;  высота: 40px;}

Аргументы

Миксины также поддерживают аргументы.[2]

SassСкомпилированный CSS
= слева($ dist)   плавать: оставили  маржа слева: $ dist#данные   + слева(10px)
#данные {  плавать: оставили;  маржа слева: 10px;}

В сочетании

SassСкомпилированный CSS
= основание стола  th    выравнивание текста: центр    font-weight: смелый  тд, th     набивка: 2px= слева($ dist)   плавать: оставили  маржа слева: $ dist#данные   + слева(10px)  + стол-основание
#данные {  плавать: оставили;  маржа слева: 10px;}#данные th {  выравнивание текста: центр;  font-weight: смелый;}#данные тд, #данные th {  набивка: 2px;}

Наследование селектора

Хотя CSS3 поддерживает Объектная модель документа (DOM) иерархия, она не позволяет наследовать селектор. В Sass наследование достигается путем вставки строки внутри блока кода, которая использует ключевое слово @extend и ссылается на другой селектор. Атрибуты расширенного селектора применяются к вызывающему селектору.[2]

SassСкомпилированный CSS
.ошибка  граница: 1px # f00  фон: #fdd.error.intrusion   размер шрифта: 1.3Эм  font-weight: смелый.badError   @продлевать .ошибка  ширина рамки: 3px
.ошибка, .badError {  граница: 1px # f00;  фон: #fdd;}.ошибка.вторжение,.badError.вторжение {  размер шрифта: 1.3Эм;  font-weight: смелый;}.badError {  ширина рамки: 3px;}

Sass поддерживает множественное наследование.[11]

libSass

На конференции разработчиков HTML5 2012 года Хэмптон Кэтлин, создатель Sass, анонсировал версию 1.0 libSass, реализации Sass на C ++ с открытым исходным кодом, разработанную Кэтлином, Аароном Леунгом и командой инженеров в Moovweb.[13][14] Текущий сопровождающий Sass Крис Эппштейн также выразил намерение внести свой вклад.[15]

По словам Кэтлина, libSass можно «вставить [пед] во что угодно, и в нем будет Sass ... Вы можете вставить его прямо в Firefox сегодня и собрать Firefox, и он будет компилироваться там. Мы написали собственный парсер с нуля, чтобы убедитесь, что это возможно ".[16]

Цели разработки libSass:

  • Производительность - Разработчики сообщили о 10-кратном увеличении скорости по сравнению с реализацией Sass на Ruby.[17]
  • Более простая интеграция - libSass упрощает интеграцию Sass в большее количество программ. До появления libSass тесная интеграция Sass в язык или программный продукт требовала объединения всего интерпретатора Ruby. Напротив, libSass - это статически связываемая библиотека с нулевыми внешними зависимостями и C-подобным интерфейсом, что упрощает перенос Sass непосредственно в другие языки программирования и инструменты. Например, привязки libSass с открытым исходным кодом теперь существуют для Узел, Идти, и Рубин.[14]
  • Совместимость - цель libSass - полная совместимость с официальной реализацией Sass на Ruby. Эта цель была достигнута в libsass 3.3.[18]

Интеграция IDE

Интеграция IDE Sass
IDEПрограммного обеспеченияинтернет сайт
Adobe Dreamweaver CC 2017https://blogs.adobe.com/creativecloud/getting-started-with-css-preprocessors-less-and-sass/
Затмение
EmacsРежим SCSShttps://github.com/antonj/scss-mode/
JetBrains IntelliJ IDEA (Максимальная версия)https://www.jetbrains.com/idea/
JetBrains PhpStormhttp://www.jetbrains.com/phpstorm/
JetBrains RubyMinehttp://www.jetbrains.com/ruby/
JetBrains WebStormhttp://www.jetbrains.com/webstorm/
Microsoft Visual StudioMindscapehttp://www.mindscapehq.com/products/web-workbench
Microsoft Visual StudioSassyStudiohttp://visualstudiogallery.msdn.microsoft.com/85fa99a6-e4c6-4a1c-9f00-e6a8129b6f4d
Microsoft WebMatrixhttp://www.microsoft.com/web/
NetBeanshttp://plugins.netbeans.org/plugin/34929/scss-support
Vimhaml.ziphttp://www.vim.org/scripts/script.php?script_id=1433
Атомhttps://github.com/atom/language-sass
Код Visual Studiohttps://code.visualstudio.com/Docs/languages/css
Возвышенныйhttps://github.com/P233/Syntax-highlighting-for-Sass
Изменить +https://www.editplus.com/others.html

Смотрите также

Рекомендации

  1. ^ Последние выпуски
  2. ^ а б c d е ж Медиа-марка (3.2.12). «Sass - классные синтаксические таблицы стилей». Sass-lang.com. Получено 2014-02-23.
  3. ^ Sass - прекрасные синтаксические таблицы стилей Руководство
  4. ^ "Sass: синтаксически отличные таблицы стилей". sass-lang.com. Архивировано из оригинал на 01.09.2013.
  5. ^ «Блог Натали Вайценбаум». Архивировано из оригинал на 2007-10-11.
  6. ^ а б c "Sass / Scss". Drupal.org. 2009-10-21. Получено 2014-02-23.
  7. ^ Вайценбаум, Натали. «Ruby Sass достиг конца срока службы« Sass Blog ». sass.logdown.com. Получено 2019-04-21.
  8. ^ "Sass: Ruby Sass". sass-lang.com. Получено 2019-04-21.
  9. ^ «jsass - Java-реализация компилятора Sass (и некоторые другие полезности). - Хостинг проектов Google». Получено 2014-02-23.
  10. ^ "SassCompiler (API Vaadin 7.0.7)". Vaadin.com. 2013-06-06. Получено 2014-02-23.
  11. ^ а б c d е Sass (синтаксически отличные таблицы стилей) SASS_REFERENCE
  12. ^ Модуль: Sass :: Script :: Functions Функции Sass
  13. ^ Х. Кэтлин (2012-10-15). «6 правил мобильного дизайна Хэмптона». Конференция разработчиков HTML5. Получено 2013-07-11.
  14. ^ а б М. Кэтлин (30 апреля 2012 г.). "libsass". Блог Moovweb. Архивировано из оригинал на 2013-05-08. Получено 2013-07-11.
  15. ^ К. Эппштейн (2012-04-15). "Твитнуть". Получено 2013-07-11.
  16. ^ А. Стаковяк и А. Торп (26.06.2013). "Sass, libsass, Haml и многое другое с Хэмптоном Кэтлином". Получено 2013-07-30.
  17. ^ Д. Ле Нуай (07.06.2013). "Сасск и Бурбон". Получено 2013-07-11.
  18. ^ «Совместимость с Sass». sass-compatibility.github.io. Получено 2019-11-29.

внешняя ссылка