Comunidad de diseño web y desarrollo en internet

Cómo instalar SublimeText, Stylus y Emmet

En este tutorial vamos a aprender a instalar SublimeText y Stylus. Para los que no los conocen, SublimeText es uno de los mejores editores de código que existen y Stylus es un excelente pre-procesador de código CSS, dos herramientas muy robustas para todo Frontend.

Lo primero que debemos hacer es instalar node.js, ya que Stylus necesita de él para poder funcionar.

Instalar Node.js en Windows


Ingresamos a nodejs.org, damos al botón “Install” e instalamos el archivo descargado (el típico siguiente, siguiente, finish).

Instalar Stylus en Windows


Ahora sigue instalar stylus, abrimos la terminal de windows (cmd) y escribimos:

Código :

npm –g install stylus


  • npm: llamamos a la paquetería de node.js
  • -g: decimos que lo instalaremos en global para todo el pc
  • Install: tengo que explicar para qué sirve?
  • Stylus: tengo que explicar para qué sirve?


Good! Si todo salió bien, ya tenemos Stylus en nuestra PC.

Instalar SublimeText2 en Windows


Para tener la mejor experiencia creando nuestro código CSS, instalaremos uno de los mejores (sino el mejor) editores de textos que existen, “SublimeText”.

En este caso instalaremos SublimeText2 (que es el que uso), vamos a www.sublimetext.com/2 y descargamos la versión para nuestro S.O. (next -> next-> finish).

Instalar paquetes en SublimeText

Ahora que tenemos instalado Stylus y SublimeText, vamos a instalar dos paqueterías que nos harán la vida más fácil y seremos mejores personas (ya parezco @freddier).

Emmet y Stylus Snippets

EMMET es una excelente herramienta de autocompletado de código que nos ahorrará muchísimo tiempo al codear (y hablo en serio) y la paquetería Stylus Snippets que nos mostrará una mejor vista de la sintaxis de Stylus.

Antes de instalar estas dos paqueterías, debemos de instalar el control de paqueterías de SublimeText2, para poder agregar paqueterías a SublimeText.

Instalar el Control de Paqueterías de SublimeText2


Ir a sublime.wbond.net/installation#st2 y copiamos este código:

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')


Abrimos SublimeText y vamos a:

Código :

View ->Show Console 


y pegamos el código que hemos copiado (el que está arriba).

Listo, ya quedó. Ahora sólo cierren y vuelvan a abrir el editor para que se guarden los cambios.

Instalar EMMET


La instalación de EMMET es muy sencilla, solo debemos de presionar:

Código :

Ctrl + Shift + p


y escribimos:

Código :

package control


Nos cargará una lista de opciones, elegimos:

Código :

Package Control: Install Package


Se nos abrirá otro cuadro como el anterior y escribimos “EMMET” y seleccionamos la primera opción “Emmet Css Snippets” y presionamos Enter.

Instalar Stylus Snippets para SublimeText


Realizamos los mismos pasos que en el caso de EMMET:

Código :

Ctrl + Shift +p -> package control -> Package Control: Install Package -> Stylus-Snippets


Perfecto! Ahora sí, ya tenemos las librerías para hacer nuestra experiencia con Stylus mucho más placentera.

Ejecutar Stylus


Bien, ahora que ya tenemos todos los requisitos previos, pasaremos a ejecutar stylus, para ello creamos 2 archivos:

Código :

//La extensión tiene que ser .styl porque es la extensión de stylus
style.styl

//Archivo para visualizar en el navegador los cambios
 index.html


Abrimos la terminal de Windows y nos movemos al directorio en donde está nuestro archivo style.styl, supongamos que hemos instalado xampp así que lo tendremos en C:\xampp\htdocs:

Código :

cp C:\xampp\htdocs


Ahora ejecutamos stylus:

Código :

stylus –w –c style.styl


  • stylus: Indicamos que ejecutaremos stylus
  • –w: Indicamos que cuando guardemos cambios se compile a CSS
  • –c: (minúscula) Indicamos que se compile de forma comprimida o minificada
  • style.styl: El archivo stylus que se compilará


Presionamos enter y se creará un archivo style.css que es el resultado de la compilación. Por último abrimos nuestro index.html y escribimos:

Código :

html:5


Presionamos “tab” y sublimeText nos creará las etiquetas básicas de html5 (esto por tener EMMET), y enlazamos nuestro archivo style.css

Código :

<link rel="stylesheet" href="style.css" />


Y listo, ya tenemos Stylus, SublimeText2 y Emmet listos para usarlos :D

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate