Rysik (język arkusza stylów)
 | |
| Zaprojektowany przez | TJ Holowaychuk |
|---|---|
| Deweloper | LearnBoost (29 marca 2011 2015 ) (26 marca |
| Po raz pierwszy pojawiły się | 2010 |
| Wersja stabilna | 0,54,8 / 16 lipca 2020 r
|
| Dyscyplina pisania | dynamiczny |
| system operacyjny | Międzyplatformowe |
| Licencja | Licencja MIT |
| Rozszerzenia nazw plików | .styl |
| Strona internetowa | Rysik ( Github ) |
| Pod wpływem | |
| CSS , Sass , LESS | |
Stylus to dynamiczny język preprocesora arkuszy stylów , który jest kompilowany w kaskadowe arkusze stylów (CSS). Jego projekt jest inspirowany Sass i LESS . Jest uważana za czwartą najczęściej używaną składnię preprocesora CSS. Został stworzony przez TJ Holowaychuka, byłego programistę dla Node.js i twórcę języka Luna. Jest napisany w JADE i Node.js.
Selektory
W przeciwieństwie do CSS, który używa nawiasów klamrowych do otwierania i zamykania bloków deklaracji, używane jest wcięcie. Dodatkowo średniki (;) są opcjonalnie pomijane. Stąd następujący CSS:
ciało { kolor : biały ; }
można skrócić do:
kolor nadwozia : biały
Ponadto dwukropki (:) i przecinki (,) są również opcjonalne; oznacza to, że powyższe można zapisać jako,
kolor nadwozia biały
Zmienne
Stylus umożliwia definiowanie zmiennych, jednak w przeciwieństwie do LESS i Sass nie używa symboli do definiowania zmiennych. Dodatkowo przypisanie zmiennej odbywa się automatycznie poprzez oddzielenie właściwości i słów kluczowych. W ten sposób zmienne są podobne do zmiennych w Pythonie .
wiadomość = „Witaj, świecie!” div :: przed zawartością wiadomości kolor # ffffff
Kompilator Stylus przetłumaczyłby powyższy dokument na:
div :: before { content : 'Witaj, świecie!' ; kolor : #ffffff ; }
Mieszanki i funkcje
Zarówno domieszki, jak i funkcje są definiowane w ten sam sposób, ale są stosowane na różne sposoby.
Na przykład, jeśli chcesz zdefiniować właściwość CSS border radius bez konieczności używania różnych przedrostków dostawcy , możesz utworzyć:
border-radius ( n ) -webkit-border-radius n -moz-border-radius n border-radius n
następnie, aby uwzględnić to jako miks, odwołujesz się do niego jako:
dział . promień obramowania prostokąta ( 10px )
to skompilowałoby się do:
dział . prostokąt { -webkit- border-radius : 10 px ; -moz- promień-graniczny : 10 px ; promień obramowania : 10 px ; }
Interpolacja
Aby uwzględnić zmienne w argumentach i identyfikatorach, zmienne należy otoczyć nawiasami klamrowymi. Na przykład,
-webkit- { 'obramowanie' + '-promień' }
ocenia na
-webkit-border-radius