SASS

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.

SassScript поддържа следните механизми: променливи, влагане, миксини, и селектор за наследяване.

Променливи

Sass дава възможност да се дефинират променливи. Променливите започват със знака за долар ($). Присвояването на стойност на променливата става чрез двуеточие (:).

SassScript поддържа четири типа данни:

• Числов тип (включително единици)
• Низове (с кавички или без)
• Цветове (name, or names)
• Булев тип

Променливите могат да бъдат аргументи към или резултат от една или няколко възможни функции. По време на превода от 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 поддържа логическо влагане, но код блоковете не могат да се влагат един в друг. Sass позволява влагане на кода да се вмъква едно в друго.

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;
}

По-сложните типове влагания включват namespaceвлагане и родителски референции, които са дискутирани подробно в документацията на ss d

Миксини

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, Хемтън Катлин, създателят на Sass, обявява версия 1.0 на libSass, open source C++ имплементация на Sass разработена от Катлин, Арън Луинг (Aaron Leung) и инженерния тим на Moovweb.

Целите на libSass дизайна са:

• Производителност – Разработчиците са докладвали 10x увеличение на скоростта над това на Ruby имплементацията на Sass.
• По-лесна интеграция – libSass прави интегрирането на Sass много по-лесно към друг софтуер. Преди libSass, интеграцията на Sass към даден език или софтуерен продукт е изисквала Ruby интерпретатор. За разлика, libSass е статично свързана библиотека с никакви външни зависимости и C-подобен интерфейс, което прави лесно неговото обвиване директно към други програмни езици и инструменти. Например, open source libSass сега съществуват и за Node, Go и Ruby.
• Съвместимост – libSass има за цел пълна съвместимост с официалната Ruby имплементация на Sass; обаче тази цел все още не е напълно постигната.

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

IDE	Software	website
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/
Eclipse
JetBrains IntelliJ IDEA (Ultimate Edition)		https://www.jetbrains.com/idea/
JetBrains RubyMine		http://www.jetbrains.com/ruby/
JetBrains PhpStorm		http://www.jetbrains.com/phpstorm/
NetBeans		http://plugins.netbeans.org/plugin/34929/scss-support
Emacs	SCSS Mode	https://github.com/antonj/scss-mode/
Vim	haml.zip	http://www.vim.org/scripts/script.php?script_id=1433

Вижте също

• 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

Тази страница частично или изцяло представлява превод на страницата Sass (stylesheet language) в Уикипедия на английски. Оригиналният текст, както и този превод, са защитени от Лиценза „Криейтив Комънс – Признание – Споделяне на споделеното“, а за съдържание, създадено преди юни 2009 година – от Лиценза за свободна документация на ГНУ. Прегледайте историята на редакциите на оригиналната страница, както и на преводната страница, за да видите списъка на съавторите. ​ ВАЖНО: Този шаблон се отнася единствено до авторските права върху съдържанието на статията. Добавянето му не отменя изискването да се посочват конкретни източници на твърденията, които да бъдат благонадеждни.​