Sass (язык таблиц стилей)
Язык таблиц стилей
Сасс
РазработаноХэмптон Кэтлин
РазработчикНатали Вайценбаум, Крис Эппштейн
Впервые появился28 ноября 2006 г. ; 18 лет назад (2006-11-28)
Стабильный релиз
1.75.0 [1] / 11 апреля 2024 г. ; 9 месяцев назад [1] (2024-04-11)
Дисциплина печатиДинамичный
ОСКроссплатформенный
ЛицензияЛицензия Массачусетского технологического института
Расширения имени файла.sass, .scss
Веб-сайтsass-lang.com
Основные внедрения
Дарт
Под влиянием
CSS (как «с отступом», так и SCSS)

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

Меньше (SCSS)
Под влиянием
Меньше , Стилус , Тритий , Bootstrap (v4+)

Sass (сокращение от syntactically awesome style tables ) — это язык сценариев препроцессора , который интерпретируется или компилируется в каскадные таблицы стилей (CSS). SassScript — это сам язык сценариев.

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

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

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

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

История

Sass был изначально разработан Хэмптоном Кэтлином и развит Натали Вайценбаум. [6] [7]

Основные внедрения

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

  • Официальная реализация Dart с открытым исходным кодом . [8]
  • Официальный модуль узла «sass» на npm , представляющий собой Dart Sass, скомпилированный в чистый JavaScript. [9]
  • Официальный «встроенный в sass» модуль узла, представляющий собой оболочку JavaScript вокруг собственного исполняемого файла Dart. [10]
  • Первоначальная реализация Ruby с открытым исходным кодом , созданная в 2006 году [8], с тех пор устарела из-за отсутствия поддержки и достигла конца жизненного цикла в марте 2019 года. [11] [12]
  • libSass, официальная реализация C++ с открытым исходным кодом , устарела в октябре 2020 года. [13]
  • Устаревший модуль node "node-sass" в npm , основанный на устаревшей libSass. [14]
  • JSass, неофициальная реализация Java , [15] основанная на устаревшей libSass. [16]
  • phamlp, неофициальная реализация Sass/SCSS в PHP . [8]
  • Vaadin имеет реализацию Sass на Java. [17]
  • Firebug , расширение Firefox XUL («устаревшее») для веб-разработки. [18] С тех пор оно было устарело в пользу инструментов разработчика, интегрированных в сам Firefox. Оно перестало работать с тех пор, как Firefox 57 прекратил поддержку расширений XUL.

Функции

Переменные

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

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

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

ССССассСкомпилированный CSS
$primary-color : #3bbfce ; $margin : 16 пикселей ;  .content-navigation { border-color : $ primary-color ; цвет : затемнить ( $ primary-color , 10 % ); }      .border { padding : $ margin / 2 ; margin : $ margin / 2 ; border-color : $ primary-color ; }           
$primary-color : #3bbfce $margin : 16 пикселей  .content-navigation border-color : $primary-color цвет : затемнить ( $primary-color , 10 % )     .border padding : $margin / 2 margin : $margin / 2 border-color : $primary-color      
: корень { --primary-color : #3bbfce ; --secondary-color : #2b9eab ; --margin : 8 пикселей ; }   . content-navigation { border-color : var ( --secondary-color ) цвет : var ( --secondary-color ); }     . border { padding : 8 px ; margin : var ( --margin ); border-color : #3bbfce ; }

Вложенность

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

ССССассСкомпилированный CSS
таблица .hl { margin : 2em 0 ; td .ln { text-align : right ; } }         li { шрифт : { семейство : serif ; начертание : жирный ; размер : 1 .3em ; } }          
таблица .hl поле : 2 em 0 td .ln выравнивание текста : вправо li шрифт : семейство : serif насыщенность : жирный размер : 1 .3 em                  
table.hl { margin : 2 em 0 ; } table.hl td.ln { text - align : right ; }​​​​        li { семейство шрифтов : serif ; начертание шрифта : жирный ; размер шрифта : 1.3 em ; }

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

ССССассСкомпилированный CSS
@mixin table-base { th { text-align : center ; font-weight : bold ; } td , th { padding : 2px ; } }              #данные { @include table-base ; }  
=table-base th text-align : center font-weight : bold td , th padding : 2 px         #данные +таблица-база 
# данные th { text-align : center ; font-weight : bold ; } # данные td , # данные th { padding : 2 px ; }

Петли

Sass позволяет выполнять итерацию по переменным с помощью @for, @eachи @while, что можно использовать для применения разных стилей к элементам со схожими классами или идентификаторами.

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

Аргументы

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

СассСкомпилированный CSS
=left ( $dist ) float : левое поле-left : $dist     #данные +слева ( 10 пикселей )  
# данные { float : left ; margin-left : 10 px ; }

В сочетании

СассСкомпилированный CSS
=table-base th text-align : center font-weight : bold td , th padding : 2 px          =left ( $dist ) float : левое поле-left : $dist     #данные +слева ( 10 пикселей ) +основание-таблицы   
# данные { float : left ; margin-left : 10 px ; } # данные th { text-align : center ; font-weight : bold ; } # данные td , # данные th { padding : 2 px ; }

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

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

СассСкомпилированный CSS
.error border : 1 px #f00 background : #fdd     .error.intrusion размер шрифта : 1 .3 em начертание шрифта : жирный     .badError @extend .error border-width : 3 px     
. error , . badError { border : 1 px #f00 ; background : #fdd ; }       . error . intrusion , . badError . intrusion { размер шрифта : 1.3 em ; начертание шрифта : жирный ; }     . badError { border-width : 3 px ; }

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

libSass

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

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

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

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

Интеграция с IDE

Интеграция IDE Sass
ИДЕПрограммное обеспечение
Adobe Dreamweaver CC 2017
Затмение
Emacssass-режим
JetBrains IntelliJ IDEA (максимальная версия)
JetBrains PhpStorm
JetBrains RubyMine
JetBrains WebStorm
Microsoft Visual StudioМысленный ландшафт
Microsoft Visual StudioSassyStudio
Microsoft Веб-матрица
NetBeans
Вимhaml.zip
Атом
Код Visual Studio
Возвышенный
Редактировать+

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

Ссылки

  1. ^ ab "Dart Sass - последний релиз". github.com .
  2. ^ abcdef Media Mark (3.2.12). "Sass - Syntactically Awesome Stylesheets". Sass-lang.com . Получено 23.02.2014 .{{cite web}}: CS1 maint: numeric names: authors list (link)
  3. ^ ab Firtman, Maximiliano (2013-03-15). Программирование мобильного Интернета. O'Reilly Media, Inc. ISBN 978-1-4493-3497-0.
  4. ^ Либби, Алекс (2019). Знакомство с Dart Sass: практическое введение в замену Sass, построенную на Dart. Беркли, Калифорния: Apress. doi :10.1007/978-1-4842-4372-5. ISBN 978-1-4842-4371-8.
  5. ^ Sass - Syntactically Awesome Stylesheets Архивировано 09.10.2013 в Wayback Machine Tutorial
  6. ^ "Sass: Syntactically Awesome Style Sheets". sass-lang.com . Архивировано из оригинала 2013-09-01.
  7. ^ "Блог Натали Вайценбаум". Архивировано из оригинала 2007-10-11.
  8. ^ abc "Sass / Scss". Drupal.org. 2009-10-21. Архивировано из оригинала 2016-03-10 . Получено 2014-02-23 .
  9. ^ "дерзость". www.npmjs.com .
  10. ^ "sass-embedded". www.npmjs.com .
  11. ^ Вайценбаум, Натали. «Ruby Sass достиг конца срока службы «Блог Sass». sass.logdown.com . Получено 21.04.2019 .
  12. ^ "Sass: Ruby Sass". sass-lang.com . Получено 21.04.2019 .
  13. ^ "LibSass устарел". sass-lang.com . 26 октября 2020 г.
  14. ^ "node-sass". www.npmjs.com .
  15. ^ "jsass - реализация компилятора Sass на Java (и некоторые другие полезные вещи). - Google Project Hosting" . Получено 23.02.2014 .
  16. ^ "Документация JSass". jsass.readthedocs.io .
  17. ^ "SassCompiler (Vaadin 7.0.7 API)". Vaadin.com. 2013-06-06. Архивировано из оригинала 2014-04-21 . Получено 2014-02-23 .
  18. ^ abcde Sass (Синтаксически потрясающие таблицы стилей) SASS_REFERENCE
  19. ^ Модуль: Sass::Script::Functions Функции Sass
  20. ^ H. Catlin (2012-10-15). «6 правил мобильного дизайна Хэмптона». Конференция разработчиков HTML5. Архивировано из оригинала 2021-12-15 . Получено 2013-07-11 .
  21. ^ ab M. Catlin (2012-04-30). "libsass". Блог Moovweb. Архивировано из оригинала 2013-05-08 . Получено 2013-07-11 .
  22. ^ A. Stacoviak & A. Thorp (2013-06-26). "Sass, libsass, Haml и многое другое с Hampton Catlin". Архивировано из оригинала 2013-08-06 . Получено 2013-07-30 .
  23. ^ D. Le Nouaille (2013-06-07). "Sassc and Bourbon" . Получено 2013-07-11 .
  24. ^ "Sass Compatibility". sass-compatibility.github.io . Архивировано из оригинала 2019-12-05 . Получено 2019-11-29 .

Дальнейшее чтение

  • Ндиа, Джон Гичуки; Мукета, Джеффри Мучири; Омиено, Кельвин Кабети (2019). «Метрики сложности для каскадных таблиц стилей Sassy» (PDF) . Baltic Journal of Modern Computing . 7 (4). doi :10.22364/bjmc.2019.7.4.01.
  • Седерхолм, Дэн (2013). Sass для веб-дизайнеров (PDF) . A Book Apart. ISBN 978-1-937557-13-3.
  • Уоттс, Люк (2016). Мастерство Sass. Packt Publishing.
  • Официальный сайт
Retrieved from "https://en.wikipedia.org/w/index.php?title=Sass_(style_sheet_language)&oldid=1258310111"