Ihla je predspracovateľ kódu CSS, čo nám umožňuje pracovať jednoduchšie v našom textovom editore a potom vysvetlím dôvody môjho tvrdenia.
Toto je zoznam štýlov, ako ho poznáme:
body {font: 12px Helvetica, Arial, sans-serif; } a.button {-webkit-border-radius: 5px; -moz-border-radius: 5px; polomer okraja: 5px; }
A toto by bola rovnaká šablóna štýlov vytvorená pomocou Stylus:
telo písma 12px Helvetica, Arial, bezpätkové a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Kde sú kľúče? Kam zmizli bodkočiarky, hrubé črevo? Zabudnutý, Ihla robí to za nás.
Ak začínate s CSS y HTML neodporúča sa používať Ihla pre jednoduchú skutočnosť, že môžete zabudnúť na to, ako veci skutočne fungujú, ale ak už na tomto svete máte čas a chcete si ušetriť kód a pracovať .. pokračujte.
Programátori Pytón nájde v Ihla niečo veľmi podobné tomu, na čo sú prispôsobené, pretože na to, aby ste vykonali mágiu, musíte iba správne odsadiť.
inštalácia
pre Ihla prácu, ktorú musíme nainštalovať Node.js ktorá je v pobočke Community, tak pokračujeme v tom:
$ sudo pacman -S nodejs
A neskôr si nainštalujeme Stylus. Tradičným spôsobom by bolo:
$ npm install -g stylus
Inštaluje sa dobre, ale nefunguje mi to, takže je oveľa jednoduchšie inštalovať z AUR:
$ yaourt -S nodejs-stylus
Ako používať dotykové pero
Dobre, už sme nainštalovali Node.js a máme nainštalované Ihla.. Ako to používame? Je to jednoduché. Povedzme, že máme adresár s nasledujúcimi súbormi:
- dir - index.html - style.css
Musíme vytvoriť súbor štýl.styl, na ktorej budeme pracovať. V tomto súbore môžeme mať niečo ako:
farba pozadia tela #ffff veľkosť písma 12px a. farba tlačidla červená výplň 10px
Ak uložíme alebo urobíme akékoľvek zmeny, nič sa nestane, pretože náš súbor „nekompilovávame“. Aby sme to skompilovali, otvoríme terminál v našom adresári (kde je súbor štýl.styl) a vykonáme:
stylus -c style.styl
Ale zakaždým, keď súbor uložíme štýl.styl museli by sme vykonať kód, ale našťastie to nie je potrebné, pretože ak vykonáme ten istý príkaz, ale pridaním parametra -w (hodinky) sa stane toto:
stylus -c -w style.styl sledovanie /usr/lib/node_modules/stylus/lib/functions/index.styl kompilovaný style.css sledovanie style.styl kompilovaný style.css kompilovaný style.css
Inými slovami, súbor sa automaticky zostaví .. Bol by výsledok?
body {background-color: #fff; font-size: 12px} a.button {color: # f00; padding: 10px}
Ako vidíte, náš kód nás nielen vytvára CSS, ale eliminuje zbytočné medzery, takže náš štýlový list váži menej
Nielen to, Ihla Umožňuje nám prenášať súbory CSS do ich formátu a spôsoby, ako môžeme používať ich syntax, sú veľmi rozmanité. A toto je iba ukážka. Ak vás to zaujíma, odporúčam vám vedieť o nich niečo viac Ihla