Sass (стилски језик)

Sass
Sass лого
Оригинални називенгл. Sass
Изговара сеСас
Појавио се28. новембар 2006.; пре 18 година (2006-11-28)
Аутор(и)Натали Вајзенбаум и Крис Епстајн
Дизајнер(и)Хемптон Кејтлин
Актуелна верзија3.5.2
Датум актуелне верзије4. октобар 2017.; пре 7 година (2017-10-04)
Систем типовадинамички
ИмплементацијеРуби
УтицајиCSS, YAML, Haml
Утицао наLESS, Stylus, Tritium
Оперативни системиВише платформи
ЛиценцаМИТ Лиценца
Веб-сајтsass-lang.com
Документацијаsass-lang.com/documentation/file.SASS_REFERENCE.html

Sass (енгл. Syntactically Awesome Stylesheets) је стилски језик који је првобитно дизајнирао Хемптон Кејтлин и који је развио Натали Вајзенбаум.[1][2] После иницијалне верзије Вајзенбаум и Крис Епстајн су наставили да надограђују Sass са SassScript-ом, једноставним скриптним језиком који се користи у Sass фајловима.

Sass је скриптни језик који се интерпретира у CSS. SassScript је скриптни језик за себе. Sass садржи две синтаксе. Оригинална синтакса, звана “увучена синтакса”, користи синтаксу сличну Haml-у.[3] Она користи увлачење за одвајање блокова кода и нови ред знакова за додавање нових правила. Нова синтакса, SCSS, користи блокове за форматирање као скриптни језик CSS. Она користи заграде за одвајање блокова кода и знак тачка-зарез за одвајање линија унутар блока. Увучена синтакса и SCSS фајлови традиционално имају екстензије .sass и .scss.

CSS3 се састоји од селектора и псеудо-селетора који групишу правила која се односе на њих. Sass (у ширем контексту за обе синтаксе) проширује CSS тако што додаје механизме који су доступни у традиционалним програмски језицима, нарочито у објектно-оријентисаним језицима, али који нису доступни у самом CSS3 скриптном језику. Када се SassScript интерпретира, он креира блокове CSS правила за различите селекторе који су претходно дефинисани у Sass фајлу. Sass интерпретер преводи SassScript у CSS. Алтернативно, Sass може да посматра .sass или .scss фајлове и да их преведе и избаци .css фајл кад год се .sass или .scss фајл сачува.[4] Sass је једноставно “синтаксни шећер” за CSS.

Званична имплементација Sass-а је софтвер отвореног кода и написана је у програмском језику Руби; међутим, постоје и друге имплементације укључујући имплементацију у PHP-у и имплементацију високих перформанси у C-у, звану libSass.[5][6] Такође постоји Јава имплементација која се зове JSass. Додатно, Vaadin нуди Јава имплементацију Sass-а.[7] Увучена синтакса је мета језик. SCSS је угњеждени мета језик, валидан CSS је валидан SCSS са истом семантиком. Sass подржава интеграцију са Firebug екстензијом за Мозилу Фајерфокс.

SassScript обезбеђује следеће механизме: променљиве, угњеждење, миксине и наслеђивање селектора.

Променљиве

Sass пружа могућност дефинисања променљивих. Променљиве почињу са знаком za долар ($). Вредност се променљивама додаје помоћу знака двотачка (:).

SassScript подржава четири типа података:

  • Бројеве (укључујући и јединице мере)
  • Стрингове (са наводницима или без њих)
  • Боје (име или имена)
  • Булову алгебру

Променљиве могу бити аргументи или резултати из једне од доступних функција.[8] За време превођења променљиве се убацују у излазни CSS документ.

У SCSS стилу: 

$primary-color: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $primary-color;
  color: darken($primary-color, 10%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $primary-color;
}

Или у Sass стилу: 

$primary-color: #3bbfce
$margin: 16px

.content-navigation
  border-color: $primary-color
  color: darken($primary-color, 10%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $primary-color

Се преводи као: 

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Угњеждење

CSS не подржава логичко угњеждење, али сами блокови кода нису угњеждени. Sass омогуђава да блокови кода буду уметнути један у други.

У Sass стилу 

table.hl 
  margin: 2em 0
  td.ln 
    text-align: right
  
li 
  font: 
    family: serif
    weight: bold
    size: 1.3em

или SCSS стилу 

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

Компликованији типови угњеждења, као што су угњеждење именских простора и надређених референци су објашњени у Sass документацији.

Миксини

CSS не подржава миксине. Сваки промењени код се мора мењати на свакој локацији. Миксин је део кода који садржи било који валидан Sass код. Кад год се миксин позове, правила која су написана у миксину се преводе на место где је миксин позван. Миксини омогућавају лако и једноставно одржавање кода.

У SCSS стилу 

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}
#data {
  @include table-base;
}

Или у Sass стилу 

=table-base
  th
    text-align: center
    font-weight: bold
  td, th
    padding: 2px
#data
  +table-base

Се преводи у: 

#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

Петље

Sass дозвољава итерацију кроз варијабле помоћу @for, @each и @while петљи, што се може искористити да се на елементима са различитим класама и 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;
}

Аргументи

Миксини такође подржавају аргументе. 

=left($dist) 
  float: left
  margin-left: $dist
#data 
  +left(10px)

Се преводи у: 

#data {
  float: left;
  margin-left: 10px;
}

У комбинацији

=table-base
  th
    text-align: center
    font-weight: bold
  td, th 
    padding: 2px

=left($dist) 
  float: left
  margin-left: $dist
#data 
  +left(10px)
  +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

На HTML5 Developer конференцији 2012. године, Хемптон Кејтлин, творац Sass-а, је представио верзију 1.0 libSass-а, C++ имплементације Sass-а коју су направили Кејтлин, Арон Лионг и остали инжењери тима у Moovweb.[6][9] Тренутни развијач Sass-а, Крис Епстајн, је објаснио допринос Sass-а.[10]

По Кејтлиновом мишљењу, libSass може "да се убаци у било шта и он ће имати Sass у себи... Могли бисте да га данас убаците директно у Фајерфокс и он ће се компајлирати. Написали смо наш парсер од нуле да бисмо били сигурни да је то могуће."[11]

Циљеви libSass-а су:

  • Перформансе – програмери су пријавили да јебрзина повећана 10 пута након имплементације Sass-а у Руби.[12]
  • Лакша интеграција – libSass олакшава интеграцију Sass-а у све више софтвера. Пре libSass-а, за бољу интеграцију Sass-a у програмски језик или софтвер било је потребно да се упакује комплетан Руби интерпретер. За разлику од тога, libSass је статички повезана библиотека без зависних модула и окружењем налик C програмском језику, што олакшава убацивање Sass-а директно у друге програмске језике и алате. На пример, libSass повезивање отвореног кода сада постоји за Node.js, Гоу и Руби.[9]
  • Компатибилност – циљ libSass имплементације је потпуна компатибилност са званичном Руби имплементацијом Sass-а; међутим, овај циљ још увек није у потпуности остварен.

IDE интеграција

Развојно окружење Софтвер веб-сајт
Adobe Dreamweaver CC 2017 https://blogs.adobe.com/creativecloud/getting-started-with-css-preprocessors-less-and-sass/ Архивирано на сајту Wayback Machine (14. новембар 2016)
Eclipse
Emacs SCSS Mode https://github.com/antonj/scss-mode/
JetBrains IntelliJ IDEA (Ultimate Edition) https://www.jetbrains.com/idea/
JetBrains PhpStorm http://www.jetbrains.com/phpstorm/
JetBrains RubyMine http://www.jetbrains.com/ruby/
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 https://web.archive.org/web/20150512042040/http://www.microsoft.com/web/
NetBeans http://plugins.netbeans.org/plugin/34929/scss-support Архивирано на сајту Wayback Machine (8. октобар 2015)
Vim haml.zip http://www.vim.org/scripts/script.php?script_id=1433
Atom https://github.com/atom/language-sass
Visual Studio Code https://code.visualstudio.com/Docs/languages/css

Види још

Референце

  1. ^ „Архивирана копија”. Архивирано из оригинала 01. 09. 2013. г. Приступљено 14. 05. 2015. 
  2. ^ „Natalie Weizenbaum's blog”. Архивирано из оригинала 11. 10. 2007. г. Приступљено 14. 05. 2015. 
  3. ^ Media Mark (3.2.12). „Sass - Syntactically Awesome Stylesheets”. Sass-lang.com. Приступљено 23. 02. 2014. 
  4. ^ Sass - Syntactically Awesome Stylesheets Архивирано на сајту Wayback Machine (9. октобар 2013) Tutorial
  5. ^ „Sass / Scss”. Drupal.org. Архивирано из оригинала 10. 03. 2016. г. Приступљено 23. 02. 2014. 
  6. ^ а б H. Catlin (15. 10. 2012). „Hampton's 6 Rules of Mobile Design”. HTML5 Developer Conference. Приступљено 11. 07. 2013. 
  7. ^ „SassCompiler (Vaadin 7.0.7 API)”. Vaadin.com. 06. 06. 2013. Архивирано из оригинала 21. 04. 2014. г. Приступљено 23. 02. 2014. 
  8. ^ Module: Sass::Script::Functions Sass Functions
  9. ^ а б M. Catlin (30. 04. 2012). „libsass”. Moovweb Blog. Архивирано из оригинала 08. 05. 2013. г. Приступљено 11. 07. 2013. 
  10. ^ C. Eppstein (15. 04. 2012). „Tweet”. Приступљено 11. 07. 2013. 
  11. ^ A. Stacoviak & A. Thorp (26. 06. 2013). „Sass, libsass, Haml and more with Hampton Catlin”. Архивирано из оригинала 06. 08. 2013. г. Приступљено 30. 07. 2013. 
  12. ^ D. Le Nouaille (07. 06. 2013). „Sassc and Bourbon”. Приступљено 11. 07. 2013. 

Спољашње везе

Strategi Solo vs Squad di Free Fire: Cara Menang Mudah!