✖


Jump to content

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

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

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

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

Sass (сокращение от «синтаксически потрясающие таблицы стилей» ) — это препроцессора язык сценариев , который интерпретируется или компилируется в каскадные таблицы стилей (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-sass" в npm , основанный на устаревшем libSass. [14]
  • JSass, неофициальная реализация Java , [15] на основе устаревшей библиотеки libSass. [16]
  • phamlp — неофициальная реализация Sass/SCSS на PHP . [8]
  • Vaadin имеет Java-реализацию Sass. [17]
  • Firebug — Firefox XUL («устаревшее») -расширение для веб-разработки. [18] С тех пор он устарел в пользу инструментов разработчика, интегрированных в сам Firefox. Он перестал работать после того, как в Firefox 57 была прекращена поддержка расширений XUL.

Функции

[ редактировать ]

Переменные

[ редактировать ]

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

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

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

СКСС Сасс Скомпилированный CSS 
$primary-color: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $primary-color;
  color: darken($primary-color, 10%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $primary-color;
}

$primary-color: #3bbfce
$margin: 16px

.content-navigation
  border-color: $primary-color
  color: darken($primary-color, 10%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $primary-color

:root{
    --primary-color:#3bbfce;
    --secondary-color:#2b9eab;
    --margin:8px;
}


.content-navigation {
  border-color: var(--secondary-color)
  color: var(--secondary-color);
}

.border {
  padding: 8px;
  margin: var(--margin);
  border-color: #3bbfce;
}

Вложение

[ редактировать ]

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

СКСС Сасс Скомпилированный CSS 
table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.3em;
  }
}

table.hl 
  margin: 2em 0
  td.ln 
    text-align: right
  
li 
  font: 
    family: serif
    weight: bold
    size: 1.3em

table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.3em;
}

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

СКСС Сасс Скомпилированный CSS 
@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {
    padding: 2px;
  }
}

#data {
  @include table-base;
}

=table-base
  th
    text-align: center
    font-weight: bold
  td, th
    padding: 2px

#data
  +table-base

#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

Петли

[ редактировать ]

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

Сасс Скомпилированный CSS 
$squareCount: 4
@for $i from 1 to $squareCount 
  #square-#{$i} 
   background-color: red
   width: 50px * $i
   height: 120px / $i

#square-1 {
  background-color: red;
  width: 50px;
  height: 120px;
}

#square-2 {
  background-color: red;
  width: 100px;
  height: 60px;
}

#square-3 {
  background-color: red;
  width: 150px;
  height: 40px;
}

Аргументы

[ редактировать ]

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

Сасс Скомпилированный CSS 
=left($dist) 
  float: left
  margin-left: $dist

#data 
  +left(10px)

#data {
  float: left;
  margin-left: 10px;
}

В сочетании

[ редактировать ]
Сасс Скомпилированный CSS 
=table-base
  th
    text-align: center
    font-weight: bold
  td, th 
    padding: 2px

=left($dist) 
  float: left
  margin-left: $dist

#data 
  +left(10px)
  +table-base

#data {
  float: left;
  margin-left: 10px;
}
#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

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

[ редактировать ]

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

Сасс Скомпилированный CSS 
.error
  border: 1px #f00
  background: #fdd

.error.intrusion 
  font-size: 1.3em
  font-weight: bold

.badError 
  @extend .error
  border-width: 3px

.error, .badError {
  border: 1px #f00;
  background: #fdd;
}

.error.intrusion,
.badError.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  border-width: 3px;
}

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

libSass

[ редактировать ]

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

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

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

  • Производительность. Разработчики сообщили о десятикратном увеличении скорости по сравнению с реализацией 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
Затмение
Эмакс дерзкий режим
JetBrains IntelliJ IDEA (Ultimate Edition)
JetBrains PhpStorm
JetBrains РубиМайн
JetBrains ВебШторм
Майкрософт Визуал Студия Мышление
Майкрософт Визуал Студия Нахальная студия
Microsoft ВебМатрикс
NetBeans
Почему haml.zip
Атом
Код Visual Studio
возвышенный
Редактировать+

Политическое участие

[ редактировать ]

В последние годы Сасс участвовал в нескольких политических дискуссиях из-за заявлений, сделанных руководителями проекта в репозиториях проекта и в официальных сообщениях. Примечательно, что сообщение о коммите в репозитории Sass GitHub содержало политически окрашенное заявление относительно геополитики Ближнего Востока. [25]

См. также

[ редактировать ]

Ссылки

[ редактировать ]
  1. ^ Jump up to: а б «Dart Sass — последний релиз» . github.com .
  2. ^ Jump up to: а б с д и ж Медиамарка (3.2.12). «Sass — синтаксически потрясающие таблицы стилей» . Sass-lang.com . Проверено 23 февраля 2014 г. {{cite web}}: CS1 maint: числовые имена: список авторов ( ссылка )
  3. ^ Jump up to: а б Фиртман, Максимилиано (15 марта 2013 г.). Программирование мобильного Интернета . O'Reilly Media, Inc. ISBN  978-1-4493-3497-0 .
  4. ^ Либби, Алекс (2019). Знакомство с Dart Sass: практическое введение в замену Sass, созданную на основе Dart . Беркли, Калифорния: Apress. дои : 10.1007/978-1-4842-4372-5 . ISBN  978-1-4842-4371-8 .
  5. ^ Sass — Потрясающее синтаксическое руководство по таблицам стилей
  6. ^ «Sass: синтаксически потрясающие таблицы стилей» . sass-lang.com . Архивировано из оригинала 1 сентября 2013 г.
  7. ^ «Блог Натали Вайценбаум» . Архивировано из оригинала 11 октября 2007 г.
  8. ^ Jump up to: а б с «Сасс/Сссс» . Друпал.орг. 21 октября 2009 г. Проверено 23 февраля 2014 г.
  9. ^ "дерзость" . www.npmjs.com .
  10. ^ "дерзкий встроенный" . www.npmjs.com .
  11. ^ Вайценбаум, Натали. «Жизнь Ruby Sass подошла к концу «Sass Blog» . sass.logdown.com . Проверено 21 апреля 2019 г.
  12. ^ «Сасс: Руби Сасс» . sass-lang.com . Проверено 21 апреля 2019 г.
  13. ^ «LibSass устарел» . sass-lang.com . 26 октября 2020 г.
  14. ^ "узел-дерзость" . www.npmjs.com .
  15. ^ «jsass — Java-реализация компилятора Sass (и некоторых других вкусностей). — Хостинг проектов Google» . Проверено 23 февраля 2014 г.
  16. ^ «JSass-документация» . jsass.readthedocs.io .
  17. ^ «SassCompiler (API Vaadin 7.0.7)» . Vaadin.com. 06.06.2013. Архивировано из оригинала 21 апреля 2014 г. Проверено 23 февраля 2014 г.
  18. ^ Jump up to: а б с д и Sass (синтаксически потрясающие таблицы стилей) SASS_REFERENCE
  19. ^ Модуль: Sass::Script::Functions Функции Sass
  20. ^ Х. Кэтлин (15 октября 2012 г.). «6 правил мобильного дизайна Хэмптона» . Конференция разработчиков HTML5. Архивировано из оригинала 15 декабря 2021 г. Проверено 11 июля 2013 г.
  21. ^ Jump up to: а б М. Кэтлин (30 апреля 2012 г.). "либсасс" . Блог Moovweb. Архивировано из оригинала 8 мая 2013 г. Проверено 11 июля 2013 г.
  22. ^ А. Стаковяк и А. Торп (26 июня 2013 г.). «Sass, libsass, Haml и многое другое с Hampton Catlin» . Архивировано из оригинала 6 августа 2013 г. Проверено 30 июля 2013 г.
  23. ^ Д. Ле Нуай (07.06.2013). «Сасск и Бурбон» . Проверено 11 июля 2013 г.
  24. ^ «Совместимость с Sass» . sass-compatibility.github.io . Проверено 29 ноября 2019 г.
  25. ^ «Обновите баннер, чтобы он гласил: «Свободная Палестина» » .

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

[ редактировать ]
[ редактировать ]
Retrieved from "https://en.wikipedia.org/w/index.php?title=Sass_(style_sheet_language)&oldid=1235495949"
Arc.Ask3.Ru: конец переведенного документа.
Arc.Ask3.Ru
Номер скриншота №: 92512d86f7fa19473ba05237963c16ab__1721391660
URL1:https://arc.ask3.ru/arc/aa/92/ab/92512d86f7fa19473ba05237963c16ab.html
Заголовок, (Title) документа по адресу, URL1:
Sass (style sheet language) - Wikipedia
Данный printscreen веб страницы (снимок веб страницы, скриншот веб страницы), визуально-программная копия документа расположенного по адресу URL1 и сохраненная в файл, имеет: квалифицированную, усовершенствованную (подтверждены: метки времени, валидность сертификата), открепленную ЭЦП (приложена к данному файлу), что может быть использовано для подтверждения содержания и факта существования документа в этот момент времени. Права на данный скриншот принадлежат администрации Ask3.ru, использование в качестве доказательства только с письменного разрешения правообладателя скриншота. Администрация Ask3.ru не несет ответственности за информацию размещенную на данном скриншоте. Права на прочие зарегистрированные элементы любого права, изображенные на снимках принадлежат их владельцам. Качество перевода предоставляется как есть. Любые претензии, иски не могут быть предъявлены. Если вы не согласны с любым пунктом перечисленным выше, вы не можете использовать данный сайт и информация размещенную на нем (сайте/странице), немедленно покиньте данный сайт. В случае нарушения любого пункта перечисленного выше, штраф 55! (Пятьдесят пять факториал, Денежную единицу (имеющую самостоятельную стоимость) можете выбрать самостоятельно, выплаичвается товарами в течение 7 дней с момента нарушения.)