Sass (jazyk šablony stylů) - Sass (stylesheet language)

Schéma distribuce softwaru známé jako „SaaS“ viz Software jako služba.
Sass
Sass Logo Color.svg
NavrhlHampton Catlin
VývojářNatalie Weizenbaum, Chris Eppstein
Poprvé se objevil28. listopadu 2006; Před 14 lety (2006-11-28)
Stabilní uvolnění
3.5.6 / 23. března 2018; Před 2 roky (2018-03-23)[1]
Psací disciplínaDynamický
OSCross-platform
LicenceLicence MIT
Přípony názvu souboru.sass, .scss
webová stránkasass-lang.com
Hlavní, důležitý implementace
Šipka, Rubín
Ovlivněno
CSS (odsazené i SCSS)

YAML a Haml (odsazená syntaxe)

Méně (SCSS)
Ovlivněno
Méně, Stylus, Tritium, Bootstrap (v4 +)

Sass (zkratka pro syntakticky úžasné styly) je preprocesor skriptovací jazyk to je interpretován nebo sestaven do Kaskádové styly (CSS). SassScript je samotný skriptovací jazyk.

Sass se skládá ze dvou syntaxe. Původní syntaxe, zvaná „odsazená syntaxe“, používá syntaxi podobnou Haml.[2] Využívá to odsazení oddělit bloky kódu a nový řádek znaky oddělit pravidla. Novější syntaxe „SCSS“ (Sassy CSS) používá formátování bloků jako u CSS. Používá složené závorky k označení bloků kódu a středníků k oddělení pravidel v rámci bloku. Odsazená syntaxe a soubory SCSS jsou tradičně dány rozšíření .sass a .scss.

CSS3 se skládá z řady selektorů a pseudo-selektorů, které seskupují pravidla, která se na ně vztahují. Sass (v širším kontextu obou syntaxí) rozšiřuje CSS tím, že poskytuje několik mechanismů dostupných v tradičnějších programovací jazyky, zejména objektově orientované jazyky, ale které nejsou k dispozici pro samotný CSS3. Když je SassScript interpretován, vytváří bloky pravidel CSS pro různé selektory definované souborem Sass. Tlumočník Sass překládá SassScript do CSS. Alternativně může Sass sledovat soubor .sass nebo .scss a přeložit jej do výstupního souboru .css, kdykoli se soubor .sass nebo .scss uloží.[3]

Odsazená syntaxe je metajazyk. SCSS je vnořený metajazyk, protože platný CSS je platný SCSS se stejným sémantika.

SassScript poskytuje následující mechanismy: proměnné, hnízdění, mixiny a volič dědictví.[2]

Dějiny

Sass původně navrhl Hampton Catlin a vyvinutý Natalie Weizenbaum.[4][5] Po jeho počátečních verzích Weizenbaum a Chris Eppstein pokračovali v rozšiřování Sass o SassScript, skriptovací jazyk používaný v souborech Sass.

Hlavní implementace

SassScript byl implementován ve více jazycích, pozoruhodné implementace jsou:

  • Originál open-source Rubín implementace vytvořená v roce 2006,[6] od té doby zastaralý kvůli nedostatku správců a do konce životnosti došel v březnu 2019.[7][8]
  • Oficiální open-source Šipka implementace.[6]
  • libSass, oficiální open-source C ++ implementace.
  • oficiální implementace JavaScriptu, publikovaná jako "sass" modul na npm.
  • JSass, neoficiální Jáva implementace.[9]
  • phamlp, neoficiální implementace SASS / SCSS v PHP.[6]
  • Vaadin má implementaci Java Sass.[10]
  • Firebug, a Firefox XUL ("dědictví") rozšíření pro vývoj webových aplikací.[11] Od té doby je zastaralé ve prospěch vývojářských nástrojů integrovaných do samotného Firefoxu. Přestalo to fungovat, protože Firefox 57 zrušil podporu pro rozšíření XUL.

Funkce

Proměnné

Sass umožňuje definovat proměnné. Proměnné začínají a znak dolaru ($). Variabilní úkol se provádí s dvojtečka (:).[11]

SassScript podporuje čtyři datové typy:[11]

  • Čísla (včetně jednotek)
  • Struny (s uvozovkami nebo bez)
  • Barvy (jméno nebo jména)
  • Booleovci

Proměnné mohou být argumenty nebo z jednoho z několika dostupných funkce.[12] Během překladu jsou hodnoty proměnných vloženy do výstupního dokumentu CSS.[2]

SCSSSassZkompilovaný CSS
$ primární barva: # 3bbfce;$ rozpětí: 16px;navigace po obsahu {  barva okraje: $primární barva;  barva: ztmavit($primární barva, 10%);}.okraj {  polstrování: $okraj / 2;  okraj: $okraj / 2;  barva okraje: $primární barva;}
$ primární barva: # 3bbfce$ rozpětí: 16pxnavigace po obsahu  barva okraje: $ primární barva  barva: ztmavit($ primární barva, 10%).okraj  polstrování: $ rozpětí/2  okraj:  $ rozpětí/2  barva okraje: $ primární barva
.navigace v obsahu {  barva okraje: # 3bbfce;  barva: # 2b9eab;}.okraj {  polstrování: 8px;  okraj: 8px;  barva okraje: # 3bbfce;}

Vnoření

CSS nepodporuje logické vnoření, ale samotné bloky kódu nejsou vnořené. Sass umožňuje vložení vnořeného kódu do sebe.[2]

SCSSSassZkompilovaný CSS
stůl.hl {  okraj: 2em 0;  td.ln {    zarovnání textu: že jo;  }}li {  písmo: {    rodina: patkové;    hmotnost: tučně;    velikost: 1.3em;  }}
stůl.hl   okraj: 2em 0  td.ln     zarovnání textu: že jo  li   písmo:     rodina: patkové    hmotnost: tučně    velikost: 1.3em
stůl.hl {  okraj: 2em 0;}stůl.hl td.ln {  zarovnání textu: že jo;}li {  rodina fontů: patkové;  váha písma: tučně;  velikost písma: 1.3em;}

Složitější typy hnízdění včetně jmenný prostor vnoření a nadřazené odkazy jsou popsány v dokumentaci Sass.[11]

SCSSSassZkompilovaný CSS
@mixin základna stolu {  th {    zarovnání textu: centrum;    váha písma: tučně;  }  td, th {    polstrování: 2px;  }}#data {  @zahrnout základna stolu;}
= základna stolu  th    zarovnání textu: centrum    váha písma: tučně  td, th    polstrování: 2px#data  + podstavec stolu
#data th {  zarovnání textu: centrum;  váha písma: tučně;}#data td, #data th {  polstrování: 2px;}

Smyčky

Sass umožňuje iteraci přes proměnné pomocí @pro, @každý a @zatímco, které lze použít k použití různých stylů na prvky s podobnými třídami nebo ID.

SassZkompilovaný CSS
$ squareCount: 4@pro $ i z 1 přes $ squareCount   #náměstí-#{$ i}    barva pozadí: Červené   šířka: 50px * $ i   výška: 120px / $ i
#čtverec-1 {  barva pozadí: Červené;  šířka: 50px;  výška: 120px;}#čtverec-2 {  barva pozadí: Červené;  šířka: 100px;  výška: 60px;}#čtverec-3 {  barva pozadí: Červené;  šířka: 150px;  výška: 40px;}

Argumenty

Mixiny také podporují argumenty.[2]

SassZkompilovaný CSS
= vlevo($ dist)   plovák: vlevo, odjet  levý okraj: $ dist#data   + vlevo(10px)
#data {  plovák: vlevo, odjet;  levý okraj: 10px;}

V kombinaci

SassZkompilovaný CSS
= základna stolu  th    zarovnání textu: centrum    váha písma: tučně  td, th     polstrování: 2px= vlevo($ dist)   plovák: vlevo, odjet  levý okraj: $ dist#data   + vlevo(10px)  + podstavec stolu
#data {  plovák: vlevo, odjet;  levý okraj: 10px;}#data th {  zarovnání textu: centrum;  váha písma: tučně;}#data td, #data th {  polstrování: 2px;}

Dědičnost selektoru

Zatímco CSS3 podporuje Model objektu dokumentu (DOM) hierarchie, neumožňuje dědičnost selektoru. V Sass je dědičnosti dosaženo vložením řádku do bloku kódu, který používá klíčové slovo @extend a odkazuje na jiný selektor. Atributy rozšířeného selektoru se aplikují na selektor volání.[2]

SassZkompilovaný CSS
.chyba  okraj: 1px # f00  Pozadí: #fdd.error.intruze   velikost písma: 1.3em  váha písma: tučně.badError   @rozšířit .chyba  šířka okraje: 3px
.chyba, .badError {  okraj: 1px # f00;  Pozadí: #fdd;}.chyba.narušení,.badError.narušení {  velikost písma: 1.3em;  váha písma: tučně;}.badError {  šířka okraje: 3px;}

Sass podporuje vícenásobné dědictví.[11]

libSass

Na konferenci pro vývojáře HTML5 v roce 2012 společnost Hampton Catlin, tvůrce společnosti Sass, oznámila verzi 1.0 libSass, což je open source implementace Sass v C ++ vyvinutá Catlinem, Aaronem Leungem a technickým týmem v Moovweb.[13][14] Současný správce Sass, Chris Eppstein, vyjádřil záměr přispět také.[15]

Podle Catlina může být libSass „pádem [do čehokoli] a bude v něm Sass ... Můžete jej dnes pustit přímo do Firefoxu a vytvořit si Firefox a tam se bude kompilovat. Napsali jsme vlastní parser od začátku do ujistěte se, že by to bylo možné. “[16]

Cíle designu libSass jsou:

  • Výkon - Vývojáři ohlásili 10krát vyšší zrychlení oproti implementaci Sass v Ruby.[17]
  • Snadnější integrace - libSass usnadňuje integraci Sass do více softwaru. Před libSass vyžadovala těsná integrace Sass do jazykového nebo softwarového produktu svazování celého tlumočníka Ruby. Naproti tomu libSass je staticky propojitelná knihovna s nulovými externími závislostmi a rozhraním podobným C, což usnadňuje zabalení Sass přímo do jiných programovacích jazyků a nástrojů. Například nyní existují vazby open source libSass pro Uzel, Jít, a Rubín.[14]
  • Kompatibilita - cílem libSass je plná kompatibilita s oficiální implementací Sass od Ruby. Tohoto cíle bylo dosaženo na libsass 3.3.[18]

Integrace IDE

IDE integrace Sass
IDESoftwarewebová stránka
Adobe Dreamweaver CC 2017https://blogs.adobe.com/creativecloud/getting-started-with-css-preprocessors-less-and-sass/
Zatmění
EmacsRežim SCSShttps://github.com/antonj/scss-mode/
JetBrains IntelliJ IDEA (edice Ultimate)https://www.jetbrains.com/idea/
JetBrains PhpStormhttp://www.jetbrains.com/phpstorm/
JetBrains RubyMinehttp://www.jetbrains.com/ruby/
Webový obchod JetBrainshttp://www.jetbrains.com/webstorm/
Microsoft Visual StudioMindscapehttp://www.mindscapehq.com/products/web-workbench
Microsoft Visual StudioSassyStudiohttp://visualstudiogallery.msdn.microsoft.com/85fa99a6-e4c6-4a1c-9f00-e6a8129b6f4d
Microsoft WebMatrixhttp://www.microsoft.com/web/
NetBeanshttp://plugins.netbeans.org/plugin/34929/scss-support
Vimhaml.ziphttp://www.vim.org/scripts/script.php?script_id=1433
Atomhttps://github.com/atom/language-sass
Kód Visual Studiohttps://code.visualstudio.com/Docs/languages/css
Sublimovathttps://github.com/P233/Syntax-highlighting-for-Sass
Upravit +https://www.editplus.com/others.html

Viz také

Reference

  1. ^ Nejnovější vydání
  2. ^ A b C d E F Mediální značka (3.2.12). „Sass - syntakticky úžasné styly“. Sass-lang.com. Citováno 2014-02-23.
  3. ^ Sass - syntakticky úžasné styly Tutorial
  4. ^ „Sass: Syntactically Awesome Style Sheets“. sass-lang.com. Archivovány od originál dne 01.09.2013.
  5. ^ „Blog Natalie Weizenbaumové“. Archivovány od originál dne 11.10.2007.
  6. ^ A b C „Sass / Scss“. Drupal.org. 21. 10. 2009. Citováno 2014-02-23.
  7. ^ Weizenbaum, Natalie. „Ruby Sass dosáhl konce svého života« Sass Blog “. sass.logdown.com. Citováno 2019-04-21.
  8. ^ "Sass: Ruby Sass". sass-lang.com. Citováno 2019-04-21.
  9. ^ „jsass - Java implementace kompilátoru Sass (a některé další vychytávky). - Google Project Hosting“. Citováno 2014-02-23.
  10. ^ „SassCompiler (Vaadin 7.0.7 API)“. Vaadin.com. 06.06.2013. Citováno 2014-02-23.
  11. ^ A b C d E Sass (syntakticky úžasné stylové tabulky) SASS_REFERENCE
  12. ^ Modul: Sass :: Script :: Functions Funkce Sass
  13. ^ H. Catlin (2012-10-15). „Hampton's 6 Rules of Mobile Design“. Konference vývojářů HTML5. Citováno 2013-07-11.
  14. ^ A b M. Catlin (2012-04-30). "libsass". Blog Moovweb. Archivovány od originál dne 8. 5. 2013. Citováno 2013-07-11.
  15. ^ C. Eppstein (15.04.2012). "Tweet". Citováno 2013-07-11.
  16. ^ A. Stacoviak & A. Thorp (26.06.2013). „Sass, libsass, Haml a další s Hamptonem Catlinem“. Citováno 2013-07-30.
  17. ^ D. Le Nouaille (06.06.2013). „Sassc a Bourbon“. Citováno 2013-07-11.
  18. ^ "Sass Compatibility". sass-compatibility.github.io. Citováno 2019-11-29.

externí odkazy