A Stylus egy CSS kód előfeldolgozó , amely lehetővé teszi számunkra, hogy könnyebben dolgozzunk a szövegszerkesztőnkben, és az alábbiakban kifejtem az állításom okait.
Ez egy stíluslap, amilyennek ismerjük:
body {font: 12px Helvetica, Arial, sans-serif; } a.button {-webkit-border-radius: 5px; -moz-határ-sugár: 5px; határ-sugár: 5px; }
És ez ugyanaz a stíluslap lenne, amit a Stylus-szal hoztak létre:
törzs betűtípus 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Hol vannak a billentyűk? Hová tűntek a pontosvesszők és kettőspontok? Az Oblivion. A Stylus ezt elvégzi helyettünk.
Ha most ismerkedsz a CSS-sel és HTML-lel, a Stylus használata nem ajánlott, mert elfelejtheted, hogyan is működnek a dolgok valójában. De ha már egy ideje ezen a területen dolgozol, és szeretnél némi kódot és energiát megspórolni magadnak... hajrá.
A Python programozók a Stylusban valami nagyon hasonlót találnak majd , mint amihez hozzászoktak, mivel csak helyesen kell behúzni a betűket ahhoz, hogy a varázslat megtörténjen.
Telepítés
Ahhoz, hogy a Stylus működjön, telepítenünk kell a Node.js-t, amely a Community ágban található, ezért tegyük ezt meg:
$ sudo pacman -S nodejs
És később telepítjük a Stylust. A hagyományos módszer a következő lenne:
$ npm install -g stylus
Remekül települ, de nekem nem működik, így sokkal könnyebb telepíteni az AUR-ból:
$ yaourt -S nodejs-stylus
A Stylus használata
Rendben, telepítve van a Node.js és a Stylus . Hogyan használjuk őket? Egyszerű. Tegyük fel, hogy van egy könyvtárunk a következő fájlokkal:
- dir - index.html - style.css
Amit tennünk kell, az a style.styl fájl létrehozása , amellyel dolgozni fogunk. Ebben a fájlban lehet valami ilyesmi:
body background-color #ffff font-size 12px a. gomb színe piros betét 10px
Ha mentünk vagy bármilyen módosítást végzünk, semmi sem történik, mert nem a fájlunkat "fordítjuk". A fordításhoz nyissunk meg egy terminált a könyvtárunkban (ahol a style.styl fájl található ), és futtassuk a következőt:
stylus -c style.styl
De minden alkalommal, amikor mentjük a style.styl fájlt , le kellene futtatnunk a kódot, de szerencsére erre nincs szükség, mert ha ugyanazt a parancsot futtatjuk, de hozzáadjuk a -w (watch) paramétert, akkor a következő történik:
stylus -c -w style.styl nézés /usr/lib/node_modules/stylus/lib/functions/index.styl összeállított style.css style.styl fordított style.css összeállított style.css
Más szavakkal, a fájl automatikusan lefordításra kerül.
body {background-color: #fff; font-size: 12px} a.button {color: # f00; padding: 10px}
Amint láthatod, ez nemcsak a CSS kódunkat hozza létre , hanem eltávolítja a felesleges szóközöket is, így a stíluslapunk könnyebb lesz.
Ráadásul a Stylus lehetővé teszi számunkra, hogy CSS fájlokat konvertáljunk a formátumára, és a szintaxisának felhasználási módjai hihetetlenül változatosak. És ez csak egy ízelítő. Tehát, ha érdekel, arra biztatlak, hogy tudj meg többet a Stylusról.