Zainstaluj Stylus w ArchLinux bez umierania podczas próby

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