Sass o no sass

Sass o no sass

13 abril, 2015 Diseño y Desarrollo web No hay comentarios

Para aquellos que aún estáis utilizando CSS y os preguntáis si vale la pena utilizar SASS, la respuesta es afirmativa. Los que no lo sepáis que es Sass, se define como una extensión de CSS que añade características muy potentes y elegantes a este lenguaje de estilos. Sass permite el uso de variables, reglas CSS anidadas, mixins, importación de hojas de estilos y muchas otras características, al tiempo que mantiene la compatibilidad con CSS.

Aquí tenéis un ejemplo de las diferencias de código al escribir en CSS y SASS. El resultado visualmente es el mismo, pero en el segundo ejemplo podemos ver que introducimos variables, que luego para un proyecto nos facilitará las cosas, como por ejemplo si queremos cambiar el color de la web, simplemente con cambiarlo en la variable, automáticamente cambiará en todas las clases que hayamos llamado la variable.

Código CSS:

.page {
    width: 1170px;
    background: #ffffff;
    color: #a8a8a8;
}
.page h1{
    font-size: 24px;
    font-weight: bold;
}

Códido SASS:

/* Variables */ 

$ancho_web: 1170px;
$blanco: #ffffff;
$gris: #a8a8a8;
$tam_h1: 24px;

.page {
    width: $ancho_web;
    background: $blanco;
    color: $gris;
    h1{
       font-size: $tam_h1;
       font-weight: bold;
      }
}

Una forma de ahorrar código es gracias a los mixtins que permiten definir estilos reutilizables en toda la hoja de estilos sin tener que recurrir a clases CSS no semánticas del tipo. Veamos el siguiente ejemplo.

Código SASS:

@mixin .titulo {
  font-size: 18px
  color: #ff0000;
  font-weight: bold;
}

/* CSS para el título, pero específico solo para el de la page */
.page{
    .titulo{
      @include .titulo;
      margin: 20px 10px;
    }
}

El resultado en CSS

.page .titulo{
  font-size: 18px
  color: #ff0000;
  font-weight: bold;
  margin: 20px 10px;
}

Otro ejemplo con un mixin con variable y por ejemplo ahorrarnos todas las líneas para cada navegador cada vez que utilizamos una propiedad:

Código SASS:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.caja { @include border-radius(5px); }

El resultado en CSS

.caja {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}

Viendo estos sencillos ejemplos podéis haceros una idea de las ventajas para maquetar una web. Partiendo de una guía de estilos creada por el diseñador, podéis escribir en la hoja del CSS la definición de todas las variables que se vayan a utilizar, para después utilizarlas en el proceso de maquetación de la web, sin tener que escribir las clases cada vez que la necesitéis, sino que con una simple llamada podremos resolverlo.

Agencia Diseño Web 360 Okisam - Marketing online Valencia

Deja un comentario

El email es obligatorio pero no será visible para el público.

¿podemos ayudarte en algo?

Contacta con nosotros

¿Crees que podemos ayudarte con tu próximo proyecto?





Valencia