Sass (Syntactically Awesome Stylesheets) е език за каскадни шаблони, първоначално създаден от Хемптън Катлин и разработен от Натали Вейзенбаум. След първоначалните версии Вейзенбаум и Крис Епщайн продължават да разширяват Sass със SassScript, прост скриптов език, използван в Sass файловете.
Sass е предпроцесорен скриптов език, който се интерпретира или компилира в Cascading Style Sheets (CSS). В Sass се използва форматиране в блокове подобно на CSS. Използват се къдравите скоби за отделяне на блоковете код, както и точка и запетая за разделяне на командите в един блок. Кодът се запазва във файлове с разширения .sass и .scss. CSS3 съдържа серия от селектори и псевдоселектори за групиране на прилаганите към тях правила.
Официалната имплементация на Sass e open-source и работи с Ruby, но съществуват и други имплементации с PHP, както и високо продуктивната имплементация с езика C, наречена libSass. Има също така и Java имплементация, наречена JSass. Sass поддържа интеграция с Firefox разширението Firebug.Sass (Syntactically Awesome StyleSheets) SASS_REFERENCE
SassScript поддържа следните механизми: променливи, нестинг, миксини ((възможност за съхраняване и споделяне на декларации за CSS)) и селектор за наследяване.
Променливи Sass дава възможност да се дефинират променливи. Променливите започват със знака за долар ($). Присвояването на стойност на променливата става чрез двоеточие (:).
SassScript поддържа четири типа данни:
Числов тип (включително единици) Низове (с кавички или без) Цветове (name, or names) Булев тип
Променливите могат да бъдат аргументи към или резултат от една или няколко възможни функции.Module: Sass::Script::Functions Sass Functions По време на превода от Sass към CSS стойностите на променливите се пренасят в изходния CSS документ.
Код в SCSS стил:
$blue: #3bbfce; $margin: 16px;
.content-navigation { border-color: $blue; color: darken($blue, 10%); }
.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; }
Код в SASS стил:
$blue: #3bbfce $margin: 16px
.content-navigation border-color: $blue color: darken($blue, 10%)
.border padding: $margin/2 margin: $margin/2 border-color: $blue
Горните примери ще се компилират до: .content-navigation { border-color: #3bbfce; color: #2b9eab; }
.border { padding: 8px; margin: 8px; border-color: #3bbfce; }
Влагане CSS поддържа логическо влагане, но код блоковете не могат да се влагат един в друг. SAAS позволява влагане на код блоковете един в друг.
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; }
Миксини CSS не поддържа миксини. Всяко повторение на код трябва да се повтаря на всяко едно място. Миксините са части от кода, които съдържат някаква валидна Sass команда. Когато миксина бъде извикан, върнатият резултат се добавя на нужното място. Миксините позволяват ефективен и чист код, за повторенията.
@mixin table-base { th { text-align: center; font-weight: bold;
td, th {padding: 2px} }
#data { @include table-base; }
Горният пример ще се компилира до:
#data th { text-align: center; font-weight: bold; } #data td, #data th { padding: 2px; }
Цикли SASS позволява итериране на променливите, използвайки @for, @each и @while, които могат да се използват за прилагане на различни стилови елементи с едни и същи имена на class или id.
$squareCount: 3; @for $i from 1 through $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; }
Аргументи Миксините също поддържат аргументи.
@mixin left($dist) { float: left; margin-left: $dist; }
#data { @include left(10px); }
Горният пример ще се компилира до:
#data { float: left; margin-left: 10px; }
В комбинация @mixin table-base { th { text-align: center; font-weight: bold;
td, th {padding: 2px} }
@mixin left($dist) { float: left; margin-left: $dist; }
#data { @include left(10px); @include table-base; }
Ще се компилира до:
#data { float: left; margin-left: 10px; } #data th { text-align: center; font-weight: bold; } #data td, #data th { padding: 2px; }
Наследяване на селектори Докато CSS3 поддържа Document Object Model (DOM) йерархията, той няма да разреши наследяване на селектори. В Sass наследяването е постигнато чрез добавянето на линия вътре в блока код, като се използва ключовата дума @extend и референцията на другия селектор. Атрибутите на наследявания селектор, се добавят към текущия.
.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 поддържа и множествено наследяване.
libSass През 2012 на HTML5 Developer Conference, Хемтън Катлин обявява версия 1.0 на libSass, open-source C++ имплементация на SASS. Тя е разработена от Катлин, Арън Луинг и инженерния екип на Moovweb.
Целите на libSass дизайна са: производителност – разработчиците докладват десетократно увеличение на скоростта над това на Ruby имплементацията на SASS. По-лесна интеграция – libSass прави интегрирането на SASS много по-лесно към друг софтуер. Преди libSass интеграцията на SASS към даден език или софтуерен продукт изисква Ruby интерпретатор. libSass е статично свързана библиотека с никакви външни зависимости и C-подобен интерфейс, което прави лесно неговото обвиване, директно към други езици за програмиране и инструменти. По-късно libSass се появява и в Node, Go и Ruby. съвместимост – libSass има за цел бъдеща пълна съвместимост с официалната Ruby имплементация на SASS.
Интеграция в IDE IDE Софтуер Уебсайт Microsoft Visual Studio Mindscape www.mindscapehq.com Microsoft Visual Studio SassyStudio visualstudiogallery.msdn.microsoft.com Microsoft WebMatrix www.microsoft.comEclipse IntelliJ IDEA www.jetbrains.com RubyMine www.jetbrains.com PhpStorm www.jetbrains.com NetBeans plugins.netbeans.org Emacs SCSS Mode github.comVim haml.zip www.vim.org
Вижте също Less (език)
Източници
Външни препратки Официален уебсайт Haml/Sass Google Group pyScss, a Python Scss library and client Sai the mixins extension and CSS authoring framework for Less & Sass/Scss (Git) Sass tools and resources
Категория:Маркиращи езици