Make CSS Styles with Stylus

Stylus Logo

Stylus es un leguaje dinámico para la generación de CSS, se utiliza como un módulo a través de nodejs. Es muy sencillo de utilizar y permite escribir código legible y reutilizable. Necesitas tener previamente instalado nodejs.

Para instalarlo escribes el siguiente comando en cosola:

npm install stylus

Ahora generas un archivo llamado style.styl y guardalo donde quieras con el siguiente contenido:

.divclose
	width 100px
	height 100px

Y ahora en la consola vas a ejecutar el comando:

stylus -c stylus.styl

La opción  “-c”  indica que la salida va a ser en formato comprimido, el resultado de esto te va a generar un archivo con el siguiente código CSS:

.divclose{width:100px;height:100px;}

La ventaja de este mecanismo es que revisa la sintaxis de tus estilos por lo cual aseguras que vas a tener el código generado correctamente y optimizado para colocarlo en tu sitio web.

Pero ahora vamos a la parte interesante:

Instalar NIB:

npm install nib

NIB es una libreria para stylus que te permite generar código css cross-browser.

Modifica el archivo style.styl con lo siguiente:

@import 'nib'

.divclose
    width 100px
    height 100px
    background linear-gradient(top, white, black)

Y ejecutas:

stylus -u nib style.styl

El resultado va ser esto:

.divclose {
  width: 100px;
  height: 100px;
  background: -webkit-linear-gradient(top, #fff, #000);
  background: -moz-linear-gradient(top, #fff, #000);
  background: -o-linear-gradient(top, #fff, #000);
  background: -ms-linear-gradient(top, #fff, #000);
  background: linear-gradient(to bottom, #fff, #000);
}

Te genera los prefijos para los diferentes navegadores por lo cual ya no tenemos que escribir los estilos independientes para cada uno. La diferencia con Prfexisfree o CSSprefixer es que el archvio es procesado antes y no como los otros que lo hacen con javascript y consumen procesamiento del cliente.

Esto puede ahorrar mucho tiempo al generar el código, pero podemos automatizarlo un poco más, si ejecutas el siguiente comando el archivo va ser monitoreado por un proceso que aldetectar las modificaciones en el mismo automáticamente va a generar el archivo css:

stylus -c -u nib -w style.styl

Así ya no tienes que escribir el comando cada vez que realizas un cambio. Además stylus tiene la capacidad de manejar variables por ejemplo:

@import 'nib'

def_bg_color= #FFFFAA

.divclose
    width 100px
    height 100px
    background linear-gradient(top, white, black)
    color def_bg_color

El resultado va ser esto:

.divclose {
  width: 100px;
  height: 100px;
  background: -webkit-linear-gradient(top, #fff, #000);
  background: -moz-linear-gradient(top, #fff, #000);
  background: -o-linear-gradient(top, #fff, #000);
  background: -ms-linear-gradient(top, #fff, #000);
  background: linear-gradient(to bottom, #fff, #000);
  color: #ffa;
}

Esto puede facilitar el manejo de los colores y valores entre los diferentes estilos.

Hay prefijos “especiales” ( ¬¬ si te hablo a tí Internet Explorer!!) que se pueden manejar mediante la librería canvas:

npm install canvas

Nota: Para instalar canvas seguramente vas a tener que descargar cosas adicionales para que funcione, los pasos dependen de tu sistema:

Una vez que lo tienes instalado puedes modificar el archivo con lo siguiente:

@import 'nib'

def_bg_color= #FFFFAA

.divclose
    width 100px
    height 100px
    background linear-gradient(top, white, black)
    color def_bg_color
    filter unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='#4DA1F8',endColorstr='#307DCD');")

Y te va a generar algo como esto:

.divclose {
  width: 100px;
  height: 100px;
  background: -webkit-linear-gradient(top, #fff, #000);
  background: -moz-linear-gradient(top, #fff, #000);
  background: -o-linear-gradient(top, #fff, #000);
  background: -ms-linear-gradient(top, #fff, #000);
  background: linear-gradient(to bottom, #fff, #000);
  color: #ffa;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4DA1F8',endColorstr='#307DCD');
}

El resultado del módulo de canvas a simple vista no es tan bueno como los demás, aunque su principal función es para manejar imágenes  pero es una buena alternativa para mantener el soporte de los estilos de internet explorer en versiónes antiguas (8,9).

Referencias

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s