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

Sass

Разработано	Hampton Catlin
Разработчик	Натали Weizenbaum, Chris Eppstein
Впервые появился	28 ноября 2006 г.; 13 лет назад (28.11.2006)
Стабильный выпуск	3.5.6 / 23 марта 2018 г.; 2 года назад (23.03.2018)
Дисциплина ввода	Динамическая
OS	Межплатформенная
Лицензия	Лицензия MIT
Расширения имен файлов	.sass,.scss
Веб-сайт	sass-lang.com
Основные реализации
Dart, Ruby
Под влиянием
CSS (как «с отступом», так и SCSS) YAML и Haml (синтаксис с отступом) Меньше (SCSS)
Под влиянием
Меньше, Стилус, Tritium, Bootstrap (v4 +)

Sass (сокращение от синтаксически потрясающие таблицы стилей ) - это препроцессор скриптинг язык, который интерпретируется или скомпилирован в каскадные таблицы стилей (CSS). SassScript - это сам язык сценариев.

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

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

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

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

• 1 История
• 2 Основные реализации
• 3 Возможности
  • 3.1 Переменные
  • 3.2 Вложение
    • 3.2.1 Циклы
    • 3.2.2 Аргументы
    • 3.2.3 В комбинации
  • 3.3 Наследование селектора
• 4 libSass
• 5 Интеграция IDE
• 6 См. Также
• 7 Ссылки
• 8 Внешние ссылки

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

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

• Исходная реализация open-source Ruby, созданная в 2006 г., поскольку устарела из-за отсутствия специалистов по сопровождению и была прекращена в марте 2019 г.
• Официальная реализация Dart с открытым исходным кодом.
• libSass, официальная реализация с открытым исходным кодом C++.
• официальная реализация JavaScript, опубликованная как модуль «sass» на npm.
• JSass, неофициальная реализация Java.
• phamlp, неофициальная реализация SASS / SCSS в PHP.
• Vaadin имеет реализацию Sass для Java.
• Firebug, Firefox XUL («устаревшее») расширение для веб-разработки. С тех пор он устарел в пользу инструментов разработчика, интегрированных в сам Firefox. Он перестал работать, так как Firefox 57 отказался от поддержки расширений XUL.

Переменные

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

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

• Числа (включая единицы)
• Строки (с кавычками или без)
• Цвета (имя или имена)
• Логические

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

$ primary-color: # 3bbfce; $ margin: 16 пикселей;.content-навигации {цвет границы: $ первичный цвет; цвет: темный ($ primary-color, 10%); }.border {padding: $ margin / 2; маржа: $ маржа / 2; цвет границы: $ первичный цвет; }

$ primary-color: # 3bbfce $ margin: 16px.content-navigation border-color: $ primary-color color: darken ($ primary-color, 10%).border padding: $ margin / 2 margin: $ маржа / 2 цвет границы: $ первичный цвет

. контент-навигация {цвет границы: # 3bbfce; цвет: # 2b9eab; }.border {padding: 8px; маржа: 8 пикселей; цвет границы: # 3bbfce; }

Вложение

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

table.hl {margin: 2em 0; td.ln {выравнивание текста: право; }} li {font: {family: serif; вес: жирный; размер: 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 {выравнивание текста: вправо; } li {font-family: serif; font-weight: жирный; размер шрифта: 1.3em; }

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

@mixin table-base {th {выравнивание текста: центр; font-weight: жирный; } td, th {padding: 2px; }} #data {@include table-base; }

= основание таблицы th text-align: center font-weight: bold td, th padding: 2px #data + table-base

#data th {text-align: center; font-weight: жирный; } #data td, #data th {padding: 2px; }

Циклы

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

$ squareCount: 4 @ for $ i от 1 до $ squareCount #square - # {$ i} background-color: red ширина: 50 пикселей * высота $ i: 120 пикселей / $ i

# square-1 {цвет фона: красный; ширина: 50 пикселей; высота: 120 пикселей; } # квадрат-2 {цвет фона: красный; ширина: 100 пикселей; высота: 60 ​​пикселей; } # square-3 {цвет фона: красный; ширина: 150 пикселей; высота: 40 пикселей; }

Аргументы

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

= left ($ dist) float: left margin-left: $ dist #data + left (10px)

#data {float: left; маржа слева: 10 пикселей; }

В комбинации

= table-base th text-align: center font-weight: bold td, th padding: 2px = left ($ dist) float: левое поле слева: $ dist #data + left (10px) + table-base

#data {float: left; маржа слева: 10 пикселей; } #data th {выравнивание текста: центр; font-weight: жирный; } #data td, #data th {padding: 2px; }

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

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

.error border: 1px # f00 background: #fdd.error.intrusion font-size: 1.3em font-weight : bold.badError @extend.error ширина границы: 3px

.error,.badError {border: 1px # f00; фон: #fdd; }.error.intrusion,.badError.intrusion {размер шрифта: 1.3em; font-weight: жирный; }.badError {ширина границы: 3px; }

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

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

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

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

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

• Меньше (язык таблиц стилей)
• Stylus (язык таблиц стилей)

• Официальный веб-сайт
• pyScss, библиотека Python Scss и клиент