Agulla és un pre-processador de codi CSS, El qual ens permet a nosaltres treballar de forma més simple en el nostre editor de text ia continuació els explico les raons de la meva afirmació.
Aquest és un full d'estils (style sheet) tal com la coneixem:
body {font: 12px Helvetica, Arial, sans-serif; } A.button {-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
I aquesta seria el mateix full d'estils creada amb stylus:
body font 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
On són les claus? On van ser els punts i comes, els dos punts? A l'oblit, Agulla fa això per nosaltres.
Si estàs començant amb CSS y HTML no és recomanable fer servir Agulla pel simple fet que pots oblidar com és que funcionen les coses realment, però si ja tens temps en aquest món i vols estalviar-codi i treball .. endavant.
Els programadors de Pitó trobaran a Agulla una cosa molt similar al que estan adaptats, ja que només es necessita indentar correctament perquè es faci la màgia.
Instal·lador
Perquè Agulla funcioni hem d'instal·lar NODE.JS el qual es troba a la branca Community, de manera que procedim a fer-ho:
$ sudo pacman -S nodejs
I posteriorment instal·lem Stylus. La forma tradicional seria:
$ npm install -g stylus
S'instal·la bé, però a mi no em funciona, pel que resulta molt més fàcil instal·lar des AUR:
$ yaourt -S nodejs-stylus
Utilització Stylus
Ok, ja tenim instal·lat NODE.JS i tenim instal·lat Agulla.. Com el fem servir? És simple. Diguem que tenim un directori amb els següents fitxers:
- dir - index.html - style.css
El que hem de fer és crear el fitxer style.styl, Que és en el que treballarem. En aquest fitxer podem tenir alguna cosa com:
body background-color #ffff font-size 12px a.button color xarxa padding 10px
Si guardem o fem algun canvi no passa res, ja que no estem «compilant» nostre fitxer. Per compilar el que fem és obrir un terminal en el nostre directori (on es troba el fitxer style.styl) I executem:
stylus -c style.styl
Però cada vegada que guardem el fitxer style.styl caldria executar el codi, però per sort no cal, ja que si executem el mateix comandament, però afegint el paràmetre -w (Watch) succeeix el següent:
stylus -c -w style.styl watching /usr/lib/node_modules/stylus/lib/functions/index.styl compiled style.css watching style.styl compiled style.css compiled style.css
O sigui, automàticament es compila el fitxer .. El resultat seria?
body {background-color: #fff; font-size: 12px} a.button {color: # F00; padding: 10px}
Com poden veure no només ens crea el nostre codi CSS, Sinó que elimina els espais innecessaris perquè el nostre full d'estils pesi menys 😀
No només això, Agulla ens permet passar fitxers en CSS al seu format i la forma en què podem utilitzar la seva forma de la sintaxi és molt variada. I això és només un avançament. Així que els animo si els interessa, conèixer una mica més a Agulla
És amb:
$ Sudo NPM install -g stylus
Però Per què? Si només vull fer-lo servir en la meva sessió .. però bé, si el problema és aquest .. 🙂
Al principi està bé, però Stylus s'usa amb diferents connectors a mesura que avances, per exemple NIB o Stylus acte prefixer.
Crec jo que quan ho instal·les amb Yaourt no queda guardat a / usr / local / lib / node_modules i si tractessis d'importar i utilitzar alguna de les llibreries, et joderías xD
Passa que com et vaig dir en el fòrum, Stylus es basa en utilitzar llibreries de forma transparent des de la terminal, és l'essència d'aquest preprocessador, fa coses com:
stylus -o jeet -o rupture -o TYPOGRAPHIC -o NIB -w style.styl
Per dir alguna cosa (pots tenir un àlies o una funció o utilitzar Gulp o grunt, o el que sigui: 3). L'interessant d'això és que no et embasura el css de pla a l'compilar, sinó que el farcida «dinàmicament» a mesura que dins del teu codi vas trucant les funcions i mixins de les respectives llibreries.
En efecte et posarà codi plànol que estigui declarat (resets, clearfixes, etc.) però no et va a fer fumar-te ara les funcions span () de jeet si no les flames i això és amor pur x3
És tot un món i per això et dic, instal·lant-d'aquesta manera no s'en què fitxers caigui i no crec que puguis fer servir tan simple les extensions perquè quan fas servir la línia d'ordres, el -use flag va cercar dins de la carpeta de instal·lació d'stylus, amb node és node_modules i queda on vaig dir a dalt, amb Yaourt, NPI xD
interessant!
Suggereixo que facin un tutorial Actualitzat de com utilitzar un nombre SIP per trucar des de l'ordinador a mòbils ... gratis