+34 966 87 37 50 info@digiworks.es
MailerLite Email Marketing for Small Business

sass

En este artículo vamos a hablar de uno de los preprocesadores CSS más utilizados del mercado, Sass o Syntactially Awesome Stylesheets.

 

¿Que és?

Sass es una extensión de CSS que nos permite usar mecanismos de lenguajes de programación orientado a objetos, es decir que nos permite usar variables, anidamientos, herencias y mucho más.

Es sin duda una facilidad para organizar y mantener código CSS.

Los archivos en Sass son de extensión .sass o .scss. Al guardar nuestro archivo .sass o .scss el intérprete de Sass traduce SassScript (el lenguaje de script en si mismo) en CSS, y de esta manera puede crear un archivo .css de salida.

 

 

 

 ¿Como instalarlo?

Sass puede usarse de 3 maneras, como una herramienta en línea de comando, como un módulo de Ruby o como un plugin para aplicaciones de edición de código.

Si no estas cómodo usando la línea de comando puedes descargar e instalar SCOUT, que permite trabajar con Sass para compilar a .css

Usar SCOUT es muy fácil, solo tienes que instalar, abrir y añadir un proyecto nuevo donde seleccionas la carpeta de entrada de donde vendrá el archivo .scss y la carpeta de salida donde se compilará el .css

Esos son los 2 únicos parámetros que harán falta para empezar, después le daremos al botón Play y veremos como cada vez que guardamos nuestro archivo .scss los cambios se verán reflejados en la ventana de SCOUT y nuestro archivo .css en la carpeta de salida se habrá actualizado.

scout-1-o     scout-2-o

 

Para más detalles sobre la instalación de Sass a través de la línea de comando visita la documentación, encontrarás paso a poso como instalarlo http://sass-lang.com/documentation/file.SASS_REFERENCE.html

 

Algunos ejemplos de la sintaxis

Los Anidamientos, unos de mis favoritos, nos permite ahorrar muchas líneas y repeticiones en el código.

En Sass escribiríamos:

/* Sintaxis SASS*/
#contenedor {
  background:#dceaf5;
  
  p, div {
      font-size: 12px;
      span, a {
         text-decoration: underline;
      }
  }
}

En CSS el equivalente sería:

/* Sintaxis CSS*/
#contenedor {
  background: #dceaf5;
}

#contenedor p, 
#contenedor div {
  font-size: 12px;
}

#contenedor p span, 
#contenedor p a, 
#contenedor div span,
#contenedor div a {
  text-decoration: underline;
}

¡¿Fantástico verdad?!

 

Otro ventaja muy práctica, las Propiedades anidadas.
En CSS hay propiedades con el mismo prefijo como puede ser font-family, font-size, font-weight…. con Sass podemos escribir:

#mi-parrafo{
  font: {
    family: Arial;
    size: 12px;
    weight: bold;   
  }
}

Lo que se compilará en CSS de esta manera:

#mi-parrafo {
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
}

 

Y cuantas veces hemos puesto el grito en el cielo al tener que cambiar por ejemplo el color principal de nuestro diseño, un valor que puede estar 20 veces en el css, Sass nos ayuda con esto al poder usar Variables.

$colorPrincipal : #dceaf5;

#contenedor {
  background: $colorPrincipal;
}

Bueno, con esto os podéis hacer una idea de lo poderoso que es Sass y lo altamente recomendado que és para desarrolladores. Aquí he puesto tan solo unos ejemplos básicos pero hay muchísimo más por ver, pásate por la documentación de Sass y échale un ojo a todo lo que tiene que ofrecer http://sass-lang.com/

banner-tienda-online

 

Imágenes | Scout

Digiworks | Cómo editar archivos de Oficce sin tenerlo instalado en el ordenador

Perdona por la interrupción

Te importaría dejarnos tu dirección email? Asi te enviamos de vez en cuando mas información sobre Digiworks, nuestros productos y compartimos los artículos de nuestro blog.

Muchas gracias!

politica privacidad

comunicacion comercial

Hecho! Muchas gracias por tu subscripción!

Share This