Sass () је стилски језик који је првобитно дизајнирао Хемптон Кејтлин и који је развио Натали Вајзенбаум. После иницијалне верзије Вајзенбаум и Крис Епстајн су наставили да надограђују Sass са SassScript-ом, једноставним скриптним језиком који се користи у Sass фајловима.
Sass је скриптни језик који се интерпретира у CSS. SassScript је скриптни језик за себе. Sass садржи две синтаксе. Оригинална синтакса, звана “увучена синтакса”, користи синтаксу сличну Haml-у. Она користи увлачење за одвајање блокова кода и нови ред знакова за додавање нових правила. Нова синтакса, SCSS, користи блокове за форматирање као скриптни језик CSS. Она користи заграде за одвајање блокова кода и знак тачка-зарез за одвајање линија унутар блока. Увучена синтакса и SCSS фајлови традиционално имају екстензије .sass и .scss.
CSS3 се састоји од селектора и псеудо-селетора који групишу правила која се односе на њих. Sass (у ширем контексту за обе синтаксе) проширује CSS тако што додаје механизме који су доступни у традиционалним програмски језицима, нарочито у објектно-оријентисаним језицима, али који нису доступни у самом CSS3 скриптном језику. Када се SassScript интерпретира, он креира блокове CSS правила за различите селекторе који су претходно дефинисани у Sass фајлу. Sass интерпретер преводи SassScript у CSS. Алтернативно, Sass може да посматра .sass или .scss фајлове и да их преведе и избаци .css фајл кад год се .sass или .scss фајл сачува.Sass - Syntactically Awesome Stylesheets Tutorial Sass је једноставно “синтаксни шећер” за CSS.
Званична имплементација Sass-а је софтвер отвореног кода и написана је у програмском језику Руби; међутим, постоје и друге имплементације укључујући имплементацију у PHP-у и имплементацију високих перформанси у C-у, звану libSass. Такође постоји Јава имплементација која се зове JSass. Додатно, Vaadin нуди Јава имплементацију Sass-а. Увучена синтакса је мета језик. SCSS је угњеждени мета језик, валидан CSS је валидан SCSS са истом семантиком. Sass подржава интеграцију са Firebug екстензијом за Мозилу Фајерфокс.
SassScript обезбеђује следеће механизме: променљиве, угњеждење, миксине и наслеђивање селектора.
Променљиве
Sass пружа могућност дефинисања променљивих. Променљиве почињу са знаком za долар ($). Вредност се променљивама додаје помоћу знака двотачка (:).
SassScript подржава четири типа података: Бројеве (укључујући и јединице мере) Стрингове (са наводницима или без њих) Боје (име или имена) Булову алгебру
Променљиве могу бити аргументи или резултати из једне од доступних функција.Module: Sass::Script::Functions Sass Functions За време превођења променљиве се убацују у излазни 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 дозвољава итерацију кроз варијабле помоћу , и петљи, што се може искористити да се на елементима са различитим класама и 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 подржава хијерархију објектног модела докумената (), он не дозвољава наслеђивање селектора. У 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. Тренутни развијач Sass-а, Крис Епстајн, је објаснио допринос Sass-а.
По Кејтлиновом мишљењу, libSass може "да се убаци у било шта и он ће имати Sass у себи... Могли бисте да га данас убаците директно у Фајерфокс и он ће се компајлирати. Написали смо наш парсер од нуле да бисмо били сигурни да је то могуће."
Циљеви libSass-а су: Перформансе – програмери су пријавили да јебрзина повећана 10 пута након имплементације Sass-а у Руби. Лакша интеграција – libSass олакшава интеграцију Sass-а у све више софтвера. Пре libSass-а, за бољу интеграцију Sass-a у програмски језик или софтвер било је потребно да се упакује комплетан Руби интерпретер. За разлику од тога, libSass је статички повезана библиотека без зависних модула и окружењем налик C програмском језику, што олакшава убацивање Sass-а директно у друге програмске језике и алате. На пример, libSass повезивање отвореног кода сада постоји за Node.js, Гоу и Руби. Компатибилност – циљ libSass имплементације је потпуна компатибилност са званичном Руби имплементацијом Sass-а; међутим, овај циљ још увек није у потпуности остварен.
IDE интеграција
Развојно окружење Софтвер веб-сајтAdobe Dreamweaver CC 2017https://blogs.adobe.com/creativecloud/getting-started-with-css-preprocessors-less-and-sass/ 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 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
Види још Less
Референце
Спољашње везе
Haml/Sass Гугл група pyScss Пајтон Scss библиотека и клијентски програм Sai mixins екстензија и CSS фрејмворк за ауторизацију за Less и Sass/Scss (Гит) Sass алати и ресурси
Категорија:Стилски језици (програмирање) Категорија:Руби (програмски језик) Категорија:Бесплатне рачунарске библиотеке Категорија:Софтвер са МИТ лиценцом