Sass (стилски језик)
Sass | |
---|---|
Sass лого | |
Оригинални назив | енгл. Sass |
Изговара се | Сас |
Појавио се | 28. новембар 2006.; пре 17 година (2006-11-28) |
Аутор(и) | Натали Вајзенбаум и Крис Епстајн |
Дизајнер(и) | Хемптон Кејтлин |
Актуелна верзија | 3.5.2 |
Датум актуелне верзије | 4. октобар 2017.; пре 6 година (2017-10-04) |
Систем типова | динамички |
Имплементације | Руби |
Утицаји | CSS, YAML, Haml |
Утицао на | LESS, Stylus, Tritium |
Оперативни системи | Више платформи |
Лиценца | МИТ Лиценца |
Веб-сајт | sass-lang |
Документација | sass-lang |
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 |
Види још
- Less
Референце
- ^ „Архивирана копија”. Архивирано из оригинала 01. 09. 2013. г. Приступљено 14. 05. 2015.
- ^ „Natalie Weizenbaum's blog”. Архивирано из оригинала 11. 10. 2007. г. Приступљено 14. 05. 2015.
- ^ Media Mark (3.2.12). „Sass - Syntactically Awesome Stylesheets”. Sass-lang.com. Приступљено 23. 02. 2014.
- ^ Sass - Syntactically Awesome Stylesheets Архивирано на сајту Wayback Machine (9. октобар 2013) Tutorial
- ^ „Sass / Scss”. Drupal.org. Архивирано из оригинала 10. 03. 2016. г. Приступљено 23. 02. 2014.
- ^ а б H. Catlin (15. 10. 2012). „Hampton's 6 Rules of Mobile Design”. HTML5 Developer Conference. Приступљено 11. 07. 2013.
- ^ „SassCompiler (Vaadin 7.0.7 API)”. Vaadin.com. 06. 06. 2013. Архивирано из оригинала 21. 04. 2014. г. Приступљено 23. 02. 2014.
- ^ Module: Sass::Script::Functions Sass Functions
- ^ а б M. Catlin (30. 04. 2012). „libsass”. Moovweb Blog. Архивирано из оригинала 08. 05. 2013. г. Приступљено 11. 07. 2013.
- ^ C. Eppstein (15. 04. 2012). „Tweet”. Приступљено 11. 07. 2013.
- ^ A. Stacoviak & A. Thorp (26. 06. 2013). „Sass, libsass, Haml and more with Hampton Catlin”. Архивирано из оригинала 06. 08. 2013. г. Приступљено 30. 07. 2013.
- ^ D. Le Nouaille (07. 06. 2013). „Sassc and Bourbon”. Приступљено 11. 07. 2013.
Спољашње везе
- Званични веб-сајт
- Haml/Sass Гугл група
- pyScss Пајтон Scss библиотека и клијентски програм
- Sai mixins екстензија и CSS фрејмворк за ауторизацију за Less и Sass/Scss (Гит)
- Sass алати и ресурси
- п
- р
- у
- Десктоп објављивање
- Веб развијање
- Кориснички интерфејс
- Падајући (CSS)
- DSSSL
- Прошириви (XSL)