Sass (сокращение от синтаксически потрясающих таблиц стилей ) - это язык сценариев препроцессора, который интерпретируется или компилируется в каскадные таблицы стилей (CSS). SassScript - это сам язык сценариев.
Разработано | Хэмптон Кэтлин |
---|---|
Разработчик | Натали Вайценбаум, Крис Эппштейн |
Впервые появился | 28 ноября 2006 г . |
Стабильный выпуск | 3.5.6 / 23 марта 2018 г . [1] |
Печатная дисциплина | Динамический |
Операционные системы | Кроссплатформенность |
Лицензия | Лицензия MIT |
Расширения имени файла | .sass, .scss |
Веб-сайт | sass-lang |
Основные реализации | |
Дарт , Рубин | |
Под влиянием | |
CSS (как с отступом, так и SCSS) Меньше (SCSS) | |
Под влиянием | |
Меньше , Стилус , Тритий , Бутстрап (v4 +) |
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 был реализован на нескольких языках, примечательными реализациями являются:
- Первоначальная реализация Ruby с открытым исходным кодом, созданная в 2006 году [6], устарела из-за отсутствия специалистов по сопровождению и достигла конца срока службы в марте 2019 года. [7] [8]
- Официальная реализация Dart с открытым исходным кодом . [6]
- libSass, официальная реализация C ++ с открытым исходным кодом .
- официальная реализация JavaScript, опубликованная как модуль "sass" на npm .
- JSass, неофициальная реализация Java . [9]
- phamlp, неофициальная реализация SASS / SCSS на PHP . [6]
- У Vaadin есть реализация Sass на Java. [10]
- Firebug , расширение Firefox XUL («устаревшее») для веб-разработки. [11] С тех пор он устарел в пользу инструментов разработчика, интегрированных в сам Firefox. Он перестал работать, так как Firefox 57 отказался от поддержки расширений XUL.
Функции
Переменные
Sass позволяет определять переменные. Переменные начинаются со знака доллара ( $ ). Переменный задание выполняется с помощью двоеточия ( : ). [11]
SassScript поддерживает четыре типа данных: [11]
- Цифры (включая единицы)
- Строки (с кавычками или без)
- Цвета (имя или имена)
- Булевы
Переменные могут быть аргументами или результатом одной из нескольких доступных функций . [12] Во время перевода значения переменных вставляются в выходной документ CSS. [2]
SCSS | Sass | Скомпилированный CSS |
---|---|---|
$ primary-color : # 3bbfce ; $ margin : 16 пикселей ;.content-navigation { цвет границы : $ первичный цвет ; цвет : темный ( $ primary-color , 10 % ); }.border { padding : $ margin / 2 ; маржа : $ маржа / 2 ; цвет границы : $ первичный цвет ; } | $ primary-color : # 3bbfce $ margin : 16 пикселей.content-navigation цвет границы : $ primary-color color : darken ( $ primary-color , 10 % ).border padding : $ margin / 2 margin : $ margin / 2 цвет границы : $ первичный цвет | . контент-навигация { цвет границы : # 3bbfce ; цвет : # 2b9eab ; }. граница { отступ : 8 пикселей ; поле : 8 пикселей ; цвет границы : # 3bbfce ; } |
Гнездование
CSS поддерживает логическое вложение, но сами блоки кода не вложены. Sass позволяет вставлять вложенный код друг в друга. [2]
SCSS | Sass | Скомпилированный CSS |
---|---|---|
таблица .hl { маржа : 2em 0 ; тд .ln { выравнивание текста : вправо ; } }li { font : { family : serif ; вес : жирный ; Размер : 1 .3em ; } } | таблица .hl margin : 2 em 0 td .ln выравнивание текста : справа Ли шрифт : семья : засечки веса : смелый размер : 1 +0,3 ет | стол . hl { маржа : 2 em 0 ; } таблица . hl td . лн { выравнивание текста : право ; }ли { семейство шрифтов : с засечками ; font-weight : жирный ; Размер шрифта : 1,3 эм ; } |
Более сложные типы вложенности, включая вложение пространств имен и родительские ссылки, обсуждаются в документации Sass. [11]
SCSS | Sass | Скомпилированный CSS |
---|---|---|
@mixin table-base { th { выравнивание текста : центр ; font-weight : жирный ; } td , th { padding : 2px ; } }#data { @include table-base ; } | = table-base th text-align : center font-weight : bold td , th отступ : 2 пикселя#data + table-base | # данные th { выравнивание текста : центр ; font-weight : жирный ; } # data td , # data th { padding : 2 px ; } |
Петли
Сасс позволяет итерация переменных , используя @for
, @each
и @while
, которые могут быть использованы для применения различных стилей к элементам с аналогичными классами или идентификаторами.
Sass | Скомпилированный CSS |
---|---|
$ squareCount : 4 @ для $ i от 1 до $ squareCount # square- # { $ i } background-color : red ширина : 50 пикселей * высота $ i : 120 пикселей / $ i | # квадрат-1 { цвет фона : красный ; ширина : 50 пикселей ; высота : 120 пикселей ; }# квадрат-2 { цвет фона : красный ; ширина : 100 пикселей ; высота : 60 пикселей ; }# квадрат-3 { цвет фона : красный ; ширина : 150 пикселей ; высота : 40 пикселей ; } |
Аргументы
Миксины также поддерживают аргументы. [2]
Sass | Скомпилированный CSS |
---|---|
= left ( $ dist ) float : left margin-left : $ dist# данные + слева ( 10 пикселей ) | # данные { float : left ; маржа слева : 10 пикселей ; } |
В комбинации
Sass | Скомпилированный CSS |
---|---|
= table-base th text-align : center font-weight : bold td , th отступ : 2 пикселя= left ( $ dist ) float : left margin-left : $ dist#data + left ( 10 пикселей ) + table-base | # данные { float : left ; маржа слева : 10 пикселей ; } # данные th { выравнивание текста : центр ; font-weight : жирный ; } # data td , # data th { padding : 2 px ; } |
Наследование селектора
Хотя CSS3 поддерживает иерархию объектной модели документа (DOM), он не позволяет наследовать селектор. В Sass наследование достигается путем вставки строки внутри блока кода, которая использует ключевое слово @extend и ссылается на другой селектор. Атрибуты расширенного селектора применяются к вызывающему селектору. [2]
Sass | Скомпилированный CSS |
---|---|
.error border : 1 px # f00 background : #fdd.error.intrusion размер шрифта : 1 +0,3 эм начертание шрифта : жирный.badError @extend .error ширина границы : 3 пикселя | . ошибка , . badError { граница : 1 пикс # f00 ; фон : #fdd ; }. ошибка . Вторжение , . badError . вторжение { размер шрифта : 1,3 эм ; font-weight : жирный ; }. badError { ширина границы : 3 пикселя ; } |
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 с открытым исходным кодом теперь существуют для Node , Go и Ruby . [14]
- Совместимость - цель libSass - полная совместимость с официальной реализацией Sass на Ruby. Эта цель была достигнута в libsass 3.3. [18]
Интеграция IDE
IDE | Программное обеспечение | Веб-сайт |
---|---|---|
Adobe Dreamweaver CC 2017 | https://blogs.adobe.com/creativecloud/getting-started-with-css-preprocessors-less-and-sass/ | |
Затмение | https://www.eclipse.org/ | |
Emacs | Режим SCSS | https://github.com/antonj/scss-mode/ |
JetBrains IntelliJ IDEA (Максимальная версия) | https://www.jetbrains.com/idea/ | |
JetBrains PhpStorm | http://www.jetbrains.com/phpstorm/ | |
JetBrains RubyMine | http://www.jetbrains.com/ruby/ | |
JetBrains WebStorm | http://www.jetbrains.com/webstorm/ | |
Microsoft Visual Studio | Mindscape | http://www.mindscapehq.com/products/web-workbench |
Microsoft Visual Studio | SassyStudio | http://visualstudiogallery.msdn.microsoft.com/85fa99a6-e4c6-4a1c-9f00-e6a8129b6f4d |
Microsoft WebMatrix | http://www.microsoft.com/web/ | |
NetBeans | http://plugins.netbeans.org/plugin/34929/scss-support | |
Vim | haml.zip | http://www.vim.org/scripts/script.php?script_id=1433 |
Атом | https://github.com/atom/language-sass | |
Код Visual Studio | https://code.visualstudio.com/Docs/languages/css | |
Возвышенный | https://github.com/P233/Syntax-highlighting-for-Sass | |
Редактировать + | https://www.editplus.com/others.html |
Смотрите также
- Меньше (язык таблиц стилей)
- Стилус (язык таблиц стилей)
Рекомендации
- ^ "Релизы · sass / sass" . GitHub . Проверено 19 марта 2021 года - через GitHub.
- ^ а б в г д е Медиа-марка (3.2.12). «Sass - классные синтаксические таблицы стилей» . Sass-lang.com . Проверено 23 февраля 2014 .
- ^ Sass - Учебное пособие по синтаксически классным таблицам стилей
- ^ «Sass: синтаксически отличные таблицы стилей» . sass-lang.com . Архивировано из оригинала на 2013-09-01.
- ^ «Блог Натали Вайценбаум» . Архивировано из оригинала на 2007-10-11.
- ^ а б в "Sass / Scss" . Drupal.org. 2009-10-21 . Проверено 23 февраля 2014 .
- ^ Вайценбаум, Натали. «Ruby Sass достиг конца срока службы« Sass Blog » . sass.logdown.com . Проверено 21 апреля 2019 .
- ^ «Sass: Ruby Sass» . sass-lang.com . Проверено 21 апреля 2019 .
- ^ «jsass - Java-реализация компилятора Sass (и некоторые другие полезности). - Хостинг проектов Google» . Проверено 23 февраля 2014 .
- ^ "SassCompiler (API Vaadin 7.0.7)" . Vaadin.com. 2013-06-06 . Проверено 23 февраля 2014 .
- ^ a b c d e Sass (Syntactically Awesome StyleSheets) SASS_REFERENCE
- ^ Модуль: Sass :: Script :: Functions Функции Sass
- ^ Х. Кэтлин (2012-10-15). «6 правил мобильного дизайна Хэмптона» . Конференция разработчиков HTML5 . Проверено 11 июля 2013 .
- ^ а б М. Кэтлин (30 апреля 2012 г.). "libsass" . Блог Moovweb. Архивировано из оригинала на 2013-05-08 . Проверено 11 июля 2013 .
- ^ К. Эппштейн [@chriseppstein] (15 апреля 2013 г.). «Хорошие ресурсы по написанию продукции, x-платформа C ++? Я не писал ни одного кода со времен колледжа, но хочу взломать libsass / cc @hcatlin @akhleung» (твит) . Проверено 19 марта 2021 года - через Twitter .
- ^ А. Стаковяк и А. Торп (26.06.2013). «Sass, libsass, Haml и многое другое с Хэмптоном Кэтлином» . Проверено 30 июля 2013 .
- ^ Д. Ле Нуай (07.06.2013). «Сасск и Бурбон» . Проверено 11 июля 2013 .
- ^ «Совместимость с Sass» . sass-compatibility.github.io . Проверено 29 ноября 2019 .
Внешние ссылки
- Официальный веб-сайт
- pyScss, библиотека и клиент Python Scss
- Компилятор SASS, онлайн-площадка для SASS