Rysik jest preprocesorem kodu CSS, co pozwala nam na prostszą pracę w naszym edytorze tekstu, a następnie wyjaśniam powody mojego oświadczenia.
To jest arkusz stylów, jaki znamy:
body {font: 12px Helvetica, Arial, sans-serif; } a.button {-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
Byłby to ten sam arkusz stylów utworzony w programie Rysik:
czcionka body 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Gdzie są klucze? Gdzie podziały się średniki, okrężnica? Zapomniany, Rysik robi to dla nas.
Jeśli zaczynasz od CSS y HTML nie zaleca się używania Rysik z prostego faktu, że możesz zapomnieć, jak to naprawdę działa, ale jeśli masz już czas na tym świecie i chcesz zaoszczędzić kod i pracować ... śmiało.
Programiści Python znajdą w Rysik coś bardzo podobnego do tego, do czego są przystosowane, ponieważ potrzebujesz tylko prawidłowego wcięcia, aby magia została wykonana.
instalacja
dla Rysik praca, którą musimy zainstalować node.js który znajduje się w gałęzi Community, więc przystępujemy do tego:
$ sudo pacman -S nodejs
A później instalujemy Stylus. Tradycyjnym sposobem byłoby:
$ npm install -g stylus
Instaluje się dobrze, ale nie działa dla mnie, więc znacznie łatwiej jest zainstalować z AUR:
$ yaourt -S nodejs-stylus
Jak używać rysika
Ok, już zainstalowaliśmy node.js i zainstalowaliśmy Rysik.. Jak tego używamy? To jest proste. Powiedzmy, że mamy katalog z następującymi plikami:
- dir - index.html - style.css
Musimy tylko utworzyć plik styl.styl, nad którym będziemy pracować. W tym pliku możemy mieć coś takiego:
body background-color #ffff font-size 12px a. kolor przycisku czerwony dopełnienie 10px
Jeśli zapiszemy lub wprowadzimy jakiekolwiek zmiany, nic się nie dzieje, ponieważ nie „kompilujemy” naszego pliku. Aby go skompilować, otwieramy terminal w naszym katalogu (gdzie plik styl.styl) i wykonujemy:
stylus -c style.styl
Ale za każdym razem, gdy zapisujemy plik styl.styl musielibyśmy wykonać kod, ale na szczęście nie jest to konieczne, ponieważ jeśli wykonamy to samo polecenie, ale dodamy parametr -w (patrz) dzieje się co następuje:
stylus -c -w style.styl obserwowanie /usr/lib/node_modules/stylus/lib/functions/index.styl skompilowane style.css obserwowanie style.styl skompilowane style.css skompilowane style.css
Innymi słowy, plik jest automatycznie kompilowany. Czy wynik byłby?
body {background-color: #fff; font-size: 12px} a.button {color: # f00; padding: 10px}
Jak widać, nie tylko nasz kod nas tworzy CSS, ale eliminuje niepotrzebne spacje, dzięki czemu nasz arkusz stylów waży mniej
Nie tylko to, Rysik Pozwala nam przekazywać pliki CSS do ich formatu, a sposób, w jaki możemy używać ich składni, jest bardzo zróżnicowany. A to tylko podgląd. Dlatego zachęcam, jeśli jesteście zainteresowani, aby dowiedzieć się czegoś więcej Rysik