Язык таблицы стилей
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, поскольку действительный CSS — это действительный SCSS с той же семантикой .
SassScript предоставляет следующие механизмы: переменные , вложение , миксины и наследование селекторов . [2]
История
Sass был первоначально разработан Хэмптоном Кэтлином и разработан Натали Вайзенбаум. [4] [5] После первых версий Вайзенбаум и Крис Эппштейн продолжили расширять Sass с помощью SassScript, языка сценариев, используемого в файлах Sass.
Основные реализации
SassScript был реализован на нескольких языках, заслуживают внимания следующие реализации:
- Официальная реализация Dart с открытым исходным кодом . [6]
- Официальный модуль узла «sass» на npm , который представляет собой Dart Sass, скомпилированный на чистом JavaScript. [7]
- Официальный модуль узла, встроенный в sass, который представляет собой JavaScript-оболочку для собственного исполняемого файла Dart. [8]
- Исходная реализация Ruby с открытым исходным кодом , созданная в 2006 году, [6] устарела из-за отсутствия сопровождающих, и ее срок службы истек в марте 2019 года. [9] [10]
- libSass, официальная реализация C++ с открытым исходным кодом , устарела в октябре 2020 года. [11]
- Устаревший модуль узла «node-sass» в npm , основанный на устаревшем libSass. [12]
- JSass, неофициальная реализация Java , [13] основанная на устаревшей версии libSass. [14]
- phamlp — неофициальная реализация Sass/SCSS на PHP . [6]
- Vaadin имеет Java-реализацию Sass. [15]
- Firebug — XUL - расширение Firefox («устаревшее») для веб-разработки. [16] С тех пор он был признан устаревшим в пользу инструментов разработчика, интегрированных в сам Firefox. Он перестал работать после того, как в Firefox 57 была прекращена поддержка расширений XUL.
Функции
Переменные
Sass позволяет определять переменные. Переменные начинаются со знака доллара ( $). Присвоение переменной осуществляется с помощью двоеточия ( :). [16]
SassScript поддерживает четыре типа данных: [16]
Переменные могут быть аргументами или результатами одной из нескольких доступных функций . [17] Во время перевода значения переменных вставляются в выходной CSS-документ. [2]
Вложение
CSS поддерживает логическую вложенность, но сами блоки кода не являются вложенными. Sass позволяет вставлять вложенный код друг в друга. [2]
Более сложные типы вложения, включая вложение пространств имен и родительские ссылки, обсуждаются в документации Sass. [16]
Петли
Sass позволяет перебирать переменные с помощью и @for, которые можно использовать для применения разных стилей к элементам со схожими классами или идентификаторами.@each@while
Аргументы
Миксины также поддерживают аргументы . [2]
В комбинации
Наследование селектора
Хотя CSS3 поддерживает иерархию объектной модели документа (DOM), он не допускает наследование селекторов. В Sass наследование достигается путем вставки строки внутри блока кода, которая использует ключевое слово @extend и ссылается на другой селектор. Атрибуты расширенного селектора применяются к вызывающему селектору. [2]
Sass поддерживает множественное наследование . [16]
libSass
На конференции разработчиков HTML5 2012 года Хэмптон Кэтлин, создатель Sass, анонсировал версию 1.0 libSass, реализацию Sass на C++ с открытым исходным кодом, разработанную Кэтлином, Аароном Люнгом и командой инженеров Moovweb . [18] [19] Нынешний сопровождающий Sass Крис Эппштейн также выразил намерение внести свой вклад. [20]
По словам Кэтлина, libSass можно «вставить куда угодно, и в нем будет Sass… Сегодня вы можете поместить его прямо в Firefox и собрать Firefox, и он там скомпилируется. Мы написали наш собственный парсер с нуля, чтобы убедитесь, что это возможно». [21]
Цели разработки libSass:
- Производительность. Разработчики сообщили о десятикратном увеличении скорости по сравнению с реализацией Sass на Ruby. [22]
- Более простая интеграция — libSass упрощает интеграцию Sass в большее количество программного обеспечения. До появления libSass для тесной интеграции Sass в язык или программный продукт требовалось объединить весь интерпретатор Ruby. Напротив, libSass — это статически подключаемая библиотека с нулевыми внешними зависимостями и C-подобным интерфейсом, что позволяет легко встроить Sass непосредственно в другие языки программирования и инструменты. Например, привязки libSass с открытым исходным кодом теперь существуют для Node , Go и Ruby . [19]
- Совместимость. Целью libSass является полная совместимость с официальной реализацией Sass на Ruby. Эта цель была достигнута в libsass 3.3. [23]
Интеграция с IDE
Смотрите также
Рекомендации
- ^ ab "Dart Sass - последний выпуск" . github.com .
- ^ abcdef Media Mark (3.2.12). «Sass — синтаксически потрясающие таблицы стилей». Sass-lang.com . Проверено 23 февраля 2014 г.
{{cite web}}: CS1 maint: числовые имена: список авторов ( ссылка ) - ^ Sass — Потрясающее синтаксическое руководство по таблицам стилей
- ^ «Sass: Синтаксически потрясающие таблицы стилей» . sass-lang.com . Архивировано из оригинала 1 сентября 2013 г.
- ^ "Блог Натали Вайценбаум" . Архивировано из оригинала 11 октября 2007 г.
- ^ abc "Sass / Scss". Друпал.орг. 21 октября 2009 г. Проверено 23 февраля 2014 г.
- ^ "дерзость". www.npmjs.com .
- ^ "встроенный в дерзость" . www.npmjs.com .
- ^ Вайценбаум, Натали. «Жизнь Ruby Sass подошла к концу « Блог Sass» . sass.logdown.com . Проверено 21 апреля 2019 г.
- ^ "Sass: Руби Сасс" . sass-lang.com . Проверено 21 апреля 2019 г.
- ^ «LibSass устарел» . sass-lang.com . 26 октября 2020 г.
- ^ "узел-дерзость". www.npmjs.com .
- ^ «jsass — Java-реализация компилятора Sass (и некоторых других вкусностей). — Хостинг проектов Google» . Проверено 23 февраля 2014 г.
- ^ "Документация JSass" . jsass.readthedocs.io .
- ^ «SassCompiler (API Vaadin 7.0.7)» . Vaadin.com. 06.06.2013. Архивировано из оригинала 21 апреля 2014 г. Проверено 23 февраля 2014 г.
- ^ abcde Sass (синтаксически потрясающие таблицы стилей) SASS_REFERENCE
- ^ Модуль: Sass::Script::Functions Функции Sass
- ^ Х. Кэтлин (15 октября 2012 г.). «6 правил мобильного дизайна Хэмптона». Конференция разработчиков HTML5. Архивировано из оригинала 15 декабря 2021 г. Проверено 11 июля 2013 г.
- ^ аб М. Кэтлин (30 апреля 2012 г.). "либсасс". Блог Moovweb. Архивировано из оригинала 8 мая 2013 г. Проверено 11 июля 2013 г.
- ^ К. Эппштейн [@chriseppstein] (15 апреля 2013 г.). «Хорошие ресурсы по написанию продакшн-платформы на C++ для x-платформы? Я не программировал с колледжа, но хочу взломать libsass /cc @hcatlin @akhleung» (твит) . Проверено 19 марта 2021 г. - через Twitter .
- ^ А. Стаковяк и А. Торп (26 июня 2013 г.). «Sass, libsass, Haml и многое другое с Hampton Catlin». Архивировано из оригинала 6 августа 2013 г. Проверено 30 июля 2013 г.
- ^ Д. Ле Нуай (07.06.2013). «Сасск и Бурбон» . Проверено 11 июля 2013 г.
- ^ «Совместимость Sass» . sass-compatibility.github.io . Проверено 29 ноября 2019 г.
Внешние ссылки
