SASS

от Уикипедия, свободната енциклопедия
Направо към навигацията Направо към търсенето

Sass (Syntactically Awesome Stylesheets) е език за каскадни шаблони, първоначално създаден от Хемптън Катлин и разработен от Натали Вейзенбаум.[1][2] След първоначалните версии Вейзенбаум и Крис Епщайн продължават да разширяват Sass със SassScript, прост скриптов език използван във Sass файловете.

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

Официалната имплементация на Sass e open-source и работи с Ruby, но съществуват и други имплементации включително с PHP, както и високо продуктивната имплементация с езика C наречена libSass.[3][4] Има също така и Java имплементация, наречена JSass.[5] Sass поддържа интеграция с Firefox разширението Firebug.[6]

SassScript поддържа следните механизми: променливи, нестинг, миксини ((възможност за съхраняване и споделяне на декларации за CSS)) и селектор за наследяване.[7]

Променливи[редактиране | редактиране на кода]

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

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

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

Променливите могат да бъдат аргументи към или резултат от една или няколко възможни функции.[8] По време на превода от Sass към Css стойностите на променливите се пренасят в изходния CSS документ.[7]

В 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 позволява влагане на кода да се вмъква едно в друго.[7]

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[6]

Миксини[редактиране | редактиране на кода]

CSS не поддържа миксини. Всяко повторение на код трябва да се повтаря на всяко едно място. Миксините са части от кода, които съдържат някаква валидна Sass команда. Когато миксина бъде извикан, върнатият резултат се добавя на нужното място. Миксините позволяват ефективен и чист код, за повторенията.[7]

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

Аргументи[редактиране | редактиране на кода]

Миксините също поддържат аргументи.[7]

@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 и референцията на другия селектор. Атрибутите на наследявания селектор, се добавят към текущия.[7]

.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 поддържа и множествено наследяване.[6]

libSass[редактиране | редактиране на кода]

През 2012 на HTML5 Developer Conference, Хемтън Катлин, създателят на Sass, обявява версия 1.0 на libSass, open source C++ имплементация на Sass разработена от Катлин, Арън Луинг (Aaron Leung) и инженерния тим на Moovweb.[4][9]

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

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

Интеграция в IDE[редактиране | редактиране на кода]

IDE Software website
Microsoft Visual Studio Mindscape www.mindscapehq.com
Microsoft Visual Studio SassyStudio visualstudiogallery.msdn.microsoft.com
Microsoft WebMatrix www.microsoft.com
Eclipse
JetBrains IntelliJ IDEA (Ultimate Edition) www.jetbrains.com
JetBrains RubyMine www.jetbrains.com
JetBrains PhpStorm www.jetbrains.com
NetBeans plugins.netbeans.org
Emacs SCSS Mode github.com
Vim haml.zip www.vim.org

Вижте също[редактиране | редактиране на кода]

Източници[редактиране | редактиране на кода]

  1. Sass: Syntactically Awesome Style Sheets. // sass-lang.com.
  2. Natalie Weizenbaum's blog. //
  3. Sass / Scss. // Drupal.org. Посетен на 23 февруари 2014.
  4. а б в H. Catlin. Hampton's 6 Rules of Mobile Design. // HTML5 Developer Conference, 15 октомври 2012. Посетен на 11 юли 2013.
  5. jsass – A Java implementation of the Sass compiler (and some other goodies). – Google Project Hosting. // Code.google.com. Посетен на 23 февруари 2014.
  6. а б в г д Sass (Syntactically Awesome StyleSheets) SASS_REFERENCE
  7. а б в г д е Media Mark (3.2.12). Sass – Syntactically Awesome Stylesheets. // Sass-lang.com. Посетен на 23 февруари 2014.
  8. Module: Sass::Script::Functions Sass Functions
  9. а б M. Catlin. libsass. // Moovweb Blog, 30 април 2012. Посетен на 11 юли 2013.
  10. D. Le Nouaille. Sassc and Bourbon. // 7 юни 2013. Посетен на 11 юли 2013.

Външни препратки[редактиране | редактиране на кода]

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