Направо към съдържанието

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]

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

Миксини

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

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, Хемтън Катлин обявява версия 1.0 на libSass, open-source C++ имплементация на SASS. Тя е разработена от Катлин, Арън Луинг и инженерния екип на Moovweb.[4][9]

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

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

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

[редактиране | редактиране на кода]
IDE Софтуер Уебсайт
Microsoft Visual Studio Mindscape www.mindscapehq.com
Microsoft Visual Studio SassyStudio visualstudiogallery.msdn.microsoft.com
Microsoft WebMatrix www.microsoft.com
Eclipse
IntelliJ IDEA www.jetbrains.com
RubyMine www.jetbrains.com
PhpStorm www.jetbrains.com
NetBeans plugins.netbeans.org Архив на оригинала от 2015-10-08 в Wayback Machine.
Emacs SCSS Mode github.com
Vim haml.zip www.vim.org

Вижте също

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

Източници

[редактиране | редактиране на кода]
  1. ↑ Sass: Syntactically Awesome Style Sheets // sass-lang.com. Архивиран от оригинала на 2013-09-01. Посетен на 2016-01-03.
  2. ↑ Natalie Weizenbaum's blog // Архивиран от оригинала на 2013-01-16. Посетен на 2016-01-03.
  3. ↑ Sass / Scss // Drupal.org. Архивиран от оригинала на 2016-03-10. Посетен на 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. Архивиран от оригинала на 2013-05-08. Посетен на 11 юли 2013.
  10. ↑ D. Le Nouaille. Sassc and Bourbon // 7 юни 2013. Посетен на 11 юли 2013.

Външни препратки

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

ВАЖНО: Този шаблон се отнася единствено до авторските права върху съдържанието на статията. Добавянето му не отменя изискването да се посочват конкретни източници на твърденията, които да бъдат благонадеждни.​

     Портал „Информатика“         Портал „Информатика“    
Взето от „https://bg.wikipedia.org/w/index.php?title=SASS&oldid=12246915“.