Stylus, Compilar en hojas de estilos

Aprende con que herramientas se compila para generar una Hoja de Estilo optimizada
Parte 3 de 5

En este tutorial vamos a  aprender como se compila un archivo STYLUS  y se genera la hoja de estilo CSS.

¡Empecemos!

Archivo Stylus

Creamos un archivo cualquiera pero debe ser con extensión .styl. En mi caso creare uno que se llamará style.styl, no olvidemos crear un archivo html donde enlazamos la hoja de estilo, en mi caso lo llamaré index.html.

Tip: Para generar el html en Sublime Text, podemos escribir html:5 y presionamos TAB. Esto nos generará todo el cuerpo de HTML5, como vemos a continuación:

Generando HTML con EMMET

Generando HTML con EMMET

La estructura del proyecto es:

Estructura Archivos

Generar Hoja de Estilos

Hay dos formas, usando la consola de comandos CMD o usando una aplicación.

Consola de Comandos CMD

1º. Cuando estemos en la carpeta de nuestro proyecto –mi carpeta es stylus- por consola, escribimos lo siguiente:

Compilando Stylus

Se genera en la carpeta donde esta el stylus, el archivo css con el mismo nombre.

 

2º. Ahora, deseamos que compile en una carpeta diferente. Para ello nos situamos en la carpeta raíz del proyecto y copiamos lo siguiente:

Exporta a nueva carpeta

Nueva -> Es la carpeta de destino.
Css/style.styl -> es la carpeta actual donde se encuentra el archivo style.styl

 

3º. Como la idea es escribir nuestro código y que la consola compile automáticamente cada vez que nosotros guardamos, debemos escribir lo siguiente:

Compila automáticamente

 Si quieren ver que otros comandos pueden usar con la consola, pueden ingresar a http://learnboost.github.io/stylus/docs/executable.html

Aplicaciones para Compilar

Conozco dos aplicaciones que nos ahorran el proceso de compilar usando la consola. Son las siguientes:

Personalmente uso es Prepro App, por eso explicaré cómo funciona. En la web, hay dos versiones, una free que es limitada y la de pago. Descargamos la free e instalamos en nuestro equipo.

1º. Después de abrirlo, esta será la interfaz que veremos

Interfaz Prepross

2º. En el botón de la esquina inferior izquierda “+ ADD NEW PROJECT”, damos clic en él y seleccionamos la carpeta de nuestro proyecto.

3º. Automáticamente detecta nuestro archivo STYLUS en mi caso es style.styl

Archivo Stylus

Se nos muestra el nombre del archivo STYLUS, en la línea de abajo nos indica en que carpeta esta y en la otra el archivo de destino.

Por defecto, es el mismo nombre del archivo STYLUS pero con extensión .css. Si deseamos modificarlo, podemos dar clic en esa línea, nos despliega una ventana emergente donde podemos seleccionar la carpeta de destino y el nombre del archivo .css (style.css)

 4º. Para compilar, seleccionamos el archivo y se despliegan un menú lateral derecho, donde seleccionamos todas las opciones:

Opciones de Compilado

  • Auto Compile: Cada vez que guardamos el archivo, él se compila automáticamente, para ello debemos tener siempre abierto el PrePros
  • Compress CSS: Comprime y optimiza tu archivo .css
  • Use Nib: Procesa todas las variables, funciones y características propias del stylus

Finalmente damos clic en “Compile” y listo, hemos generado nuestro archivo css.

En el siguiente tutorial, trabajaremos ya con la sintaxis de stylus

Cuarta Parte: Stylus, Primeros pasos escribiendo CSS

 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