OmbuShop Crea Tu Tienda Online

SASS output styles

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Veremos para qué sirven y qué implican cada una de las opciones de output que provee la tecnología SASS: nested, compact, expanded y compressed.

Como sabemos, SASS es un preprocesador de código CSS; nos permite trabajar con un lenguaje que —si bien es parecido a CSS— agrega funcionalidades que el código de presentación estándar no provee. A la hora de realizar la compilación, SASS tiene cuatro posibilidades en cuanto a la forma en que compila el código CSS final. Si se está utilizando algún pre-procesador con interfaz gráfica de usuario, la elección suele ser sencilla. Caso contrario, se puede especificar desde el archivo config.rb con el parámetro output_style o desde la línea de comandos. Utilizaremos el siguiente código SASS como base:

.button { display: inline-block; padding: .2em .4em; background: #ddd; &:hover { background: #eee; } &:active { background: #bbb; } } .header { background: #6f0; padding: 20px; h1 { font-size: 2em; } } See the Pen wevKl by Lucas Mourelle (@lucasmourelle) on CodePen. 0

A continuación las diferencias entre las cuatro opciones:

:expanded

Tal vez sea la mejor opción para el entorno de desarrollo. El código CSS se encuentra prolijo, limpio y de fácil lectura, para poder revisar y leer el código generado. Como si un humano lo hubiera tipeado.

.button { display: inline-block; padding: .2em .4em; background: #ddd; } .button:hover { background: #eee; } .button:active { background: #bbb; } .header { background: #6f0; padding: 20px; } .header h1 { font-size: 2em; } See the Pen KlGkC by Lucas Mourelle (@lucasmourelle) on CodePen. 0

A esta opción podemos sumarle la posibilidad de incluir los line-comments, comentarios que indicarán a qué línea del archivo SASS corresponde cada selector. No es la mejor opción para producción, aunque tiene su utilidad en desarrollo.

:nested

Para los amantes de las opciones de nesting de SASS, esta opción de output de código permite continuar viendo las relaciones de nesting en el código CSS generado por el pre-procesador. En lo personal, no lo encuentro muy útil, pero sin duda tendrá sus adeptos.

.button { display: inline-block; padding: .2em .4em; background: #ddd; } .button:hover { background: #eee; } .button:active { background: #bbb; } .header { background: #6f0; padding: 20px; } .header h1 { font-size: 2em; } See the Pen esaqz by Lucas Mourelle (@lucasmourelle) on CodePen. 0

Esta opción es muy parecida a la expanded, salvo que mantiene el indentado del nesting de SASS.

:compact

Deja un selector por cada línea de código, ni más ni menos. Se trata de código compacto y liviano, pero todavía con alguna posibilidad de lectura e interpretación por parte de un ser humano.

.button { display: inline-block; padding: .2em .4em; background: #ddd; } .button:hover { background: #eee; } .button:active { background: #bbb; } .header { background: #6f0; padding: 20px; } .header h1 { font-size: 2em; } See the Pen HLyEd by Lucas Mourelle (@lucasmourelle) on CodePen. 0

Un buen balance entre optimización de peso y legibilidad.

:compressed

Por último, la opción comprimida es lo que llamaríamos normalmente código minificado. El código se vuelve incómodo y poco práctico para la lectura, pero el archivo es muy liviano. Desaparecen todos los caracteres de los cuales se puede prescindir.

.button{display:inline-block;padding:.2em .4em;background:#ddd}.button:hover{background:#eee}.button:active{background:#bbb}.header{background:#6f0;padding:20px}.header h1{font-size:2em} See the Pen yamDn by Lucas Mourelle (@lucasmourelle) on CodePen. 0

Esta última, sin dudas, es la idea para el entorno de producción. Tenemos, entonces, cuatro posibilidades para el código CSS compilado por el pre-procesador. Algunas están orientadas al trabajo en desarrollo, y otras para el deploy en producción. Esperamos que sigan aprendiendo desarrollo web front-end y realizando maravillosas tiendas con OmbuShop!

Tags: ,