Es una nueva comunidad sobre el reciente estándar de la web Html5, donde puedes encontrar tutoriales, tips, consejos, información, noticias y demás en un solo lugar.


Apoya la comunidad con $1 USD, queremos mejorar y compartir más conocimiento.

Aprende a crear CSS hermoso con Stylus – No. 2


  Publicado hace |  Etiquetas: , , , , ,

Hola de nuevo a todos, en el artículo anterior les hablé sobre Aprende a crear CSS hermoso con Stylus – No. 1, pues ahora comenzaremos a dar nuestros primeros pasos en éste, ayudándonos de uno de los mejores editores de texto SublimeText2.

Lo primero que debemos hacer (después de haber instalado Stylus) es instalar SublimeText2, para esto vamos a su página oficial y lo descargamos:

http://www.sublimetext.com/2

Luego de instalarlo necesitamos instalar el Pacage Control que nos ayudará cuando querramos instalar librerías a SublimeText2,  para ello debemos abrir SublimeText2abrir la consola de comandos (View -> Show Console) y ejecutar el siguiente código:

import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

Este código lo pueden ver en este enlace: https://sublime.wbond.net/installation#st2

Posteriormente dar clic en el botón enter, reinicia Sublime (cerrar y abrir)  y listo, esta instalado.

También debemos instalar EMMET, una excelente librería para ahorrar tiempo al momento de codear ya que escribiremos códigos html completos con un par de teclas, por ejemplo, si escribimos “html” (sin comillas) te genera las etiquetas <html> </html>. La instalación es muy fácil solamente debemos de presionar Ctrl + Shift + p y escribir “package control” y seleccionar “Install Package”.

Install Package - Sublime Text2

Luego de esto se abrirá otro menú donde tenemos que escribir “emmet” y presionar enter:

Emmet

Por último vamos a instalar la librería de stylus, haciendo lo mismo que con Emmet, solamente que cambiamos el nombre por Stylus (Ctrl + Shift + p -> package control -> Install Package -> Stylus)

Listo! Con eso ya tenemos todas las librerías necesarias para poder aprovechar al máximo Stylus.

Corriendo Stylus

Para poder usar Stylus es necesario tener instalado node.js (está explicado en el post anterior).

Lo primero que debemos hacer es crear un archivo llamado estilo.styl (puede ser cualquier nombre, la extensión debe ser .styl) y también nuestro index.html

TIP: En nuestro html en sublimetext escribamos “html:5” (sin comillas) y presionamos tab con eso nos generá el código html5.

Lo siguiente es ejecutar stylus, abrimos cmd y primero nos vamos al directorio donde estamos, por ejemplo si estamos en “C:\xampp” escribimos:

cd C:\xampp

Luego cuando estemos en ese directorio, escribimos:

stylus -c -w estilo.styl

Y presionamos enter, automáticamente se creará un archivo estilo.css en nuestra carpeta.

Ejecutando stylus

Ahora solo nos queda enlazar a nuestro html el .css y abrir en sublimetext el estilo.styl, cuando lo abramos debemos ir a View -> Syntax -> Stylus y hacer clic (si ya hay un check entonces quiere decir que ya está activo, no hagan clic o lo desactivarán).

Por último solo les queda ejecutar el código en stylus como si estuvieran en css:

body {

background: red

}

Hasta acá todo bien, pero ustedes se preguntarán para que necesito hacer todo este laberinto si lo puedo escribir directamente en el css…. pues he aquí la respuesta:

– Cuando escribimos en el css lo escribimos de manera ordenada para humanos, dejando espacios y tabulando para tener una buena estructura, esto al final tiene un peso extra por todos los espacios en blanco y tabulaciones, stylus quitará todos los espacios y hará una sola línea de código para optimizar al máximo el css.

– Pero eso no es todo, con stylus podremos codear de una manera muy sencilla y sin complicaciones, primero no necesitamos poner las llaves y puntos, basta con colocar así:

body

background red

Así ahorramos tiempo, pero debemos de tener cuidado con esto, ya que stylus se guía de las tabulaciones, entonces todo lo que le asignaremos a una etiqueta o clase deberá estar dentro (tabular) de la etiqueta o clase, como en el ejemplo anterior. Si no lo hacemos stylus no compilará y nos generará error.

– Otra gran cosa es que si queremos agregar una sub clase B a la clase A lo podemos hacer tabulando también:

.clasea

background: red

.claseb

background: blue

– Así de simple y si queremos agregar una clase antes de clase b pues la metemos allí, siempre teniendo en cuenta las tabulaciones, en el ejemplo anterior clase B es así “.clasea .claseb”, pero si no lo hubiéramos tabulado después de clase A y lo hubiésemos puesto al mismo nivel, entonces clase B quedaría así “.claseb”.

Estas son algunas de las cosas que hace de Stylus el mejor preprocesador. Les dejo una última captura con más código en stylus:

stylus-codigo

También les dejo este archivo estilo.styl para que lo examinen bien y vean más a detalle como funciona stylus:

Descargar archivo stylus: estilo

Es todo por ahora, ya vendré en estos días a darle más tips, tutoriales y hablarles más de stylus.

comments powered by Disqus