Stylus, combinado con Sublime Text

Stylus una gran herramienta para trabajar con CSS junto con Sublime Text
Parte 2 de 5

Vamos a explicar como instalar Stylus en Sublime Text y como se configura

Sublime Text

Es un editor de texto muy común, me gusta mucho por lo fácil que es trabajar con él y lo liviano para abrir, rápidamente daré algunas características que tiene:

  • Minimapa
  • Multi Selección
  • Multi Cursor
  • Multi Layout
  • Soporte nativo para infinidad de lenguajes
  • Syntax Highlight configurable
  • Búsqueda Dinámica
  • Auto completado y marcado de llaves
  • Soporte de Snippets y Plugins
  • Acceso rápido a linea o archivo
  • Paleta de Comandos

Instalación Sublime Text

1º.  Descargamos el Sublime Text 2, lo podemos hacer ingresando a http://www.sublimetext.com y lo instalamos en nuestro equipo

Instalar Sublime Text

 

2º. Después de instalarlo, debemos instalar el Package Control. Este plugin es para que nos permite instalar librerias al Sublime Text.

Ingresamos a esta página https://sublime.wbond.net/installation#st2

Tenemos dos códigos de instalación, uno de Sublime 3 y Sublime 2, copiamos la del Sublime Text 2.

Código Instalar Sublime Text

3º.   Abrimos el Sublime Text, en el menú View> Show Console. En la consola pegamos el código y le damos enter.

Instalar Package Control

 

4º. Cuando termine, cerramos Sublime y lo volvemos a abrir. Vamos a Preference > Package Control, en la consola escribimos Install Package.

Instalar Stylus

Instalación Sintaxis de Stylus

5º. En el siguiente cuadro escribimos stylus mientras se despliega como una vista rápida y finalmente damos Enter. Con esto se instala la sintaxis de stylus en nuestro Sublime Text.

Adicional: Instalando EMMET

Este es una libreria adicional que se le instala al Sublime Text para ahorrar tiempo cuando escribimos código HTML solo con escribir una pocas letras.

Por ejemplo, si escribimos “html:5” (sin comillas) y oprimimos la tecla TAB te genera las etiquetas todo el contenido del HTML5, el header y el body.

La instalación es muy fácil, repetimos el paso anterior: debemos  presionar Ctrl + Shift + p y escribir “package control” y seleccionar “Install Package”. Nuevamente, sale el cuadro donde escribimos EMMET. Presionamos enter y reiniciamos Sublime Text.

Instalando EMMET

Probamos si funciona el EMMET. Abrimos el Sublime Text, abrimos un nuevo documento y escogemos la sintaxis que vamos a trabajar: View > Sintax > HTML

Luego escribimos “html:5” y sin darle ningún espacio oprimimos la Tecla TAB. Esto genera lo siguiente:

Generando HTML con EMMET

Comparto con ustedes una listado de todo lo que se puede hacer con esta librería.  http://docs.emmet.io/cheat-sheet/

 

Aquí finaliza toda la instalación de Stylus. En el siguiente tutorial, explicare cómo compilar los archivos en hojas de estilos

Tercera Parte: Stylus, Compilar en hojas de estilos

 No olviden seguirme en twitter @juksoto y hasta la próxima.

 

Etiquetas:, , , , ,

"Trackback" Enlace desde tu web.

Deja tu comentario

¿Necesitas asesoría en algún proyecto o trabajo?

Muestrános tu trabajo

¿Quieres aportar tus conocimientos a la comunidad?

¡Haz parte de Cubemedia!
Ayudamos a demás profesionales

¿Te ha servido algun artículo?
Ayudános a que llegue a más personas.
Compartir en