Trabajando estilos con SASS

June 18, 2021

Para los que han trabajado con CSS saben que es difícil trabajar y mantener estilos a medida que nuestras aplicaciones y sitios web van creciendo. Con la popularidad de los dispositivos móviles, se ha hecho un poco más complicado trabajar de una manera que sea fácil mantener nuestras hojas de estilo.

SASS nace como una solución a este problema y "extiende CSS proveyendo de varios mecanismos que están presentes en los lenguajes de programación tradicionales, particularmente lenguajes orientados a objetos, pero que aún no está disponible para CSS3."

Me enfocaré en usos específicos para los cuales yo uso esta herramienta. Existen muchas otras bondades que nos ofrece este lenguaje que iremos explorando en otras entradas:

Definición de variables

En nuestros códigos css, vamos a encontrar una infinidad de colores, tamaños, anchos y alturas, las cuales pueden compartir patrones en común. Entonces, ¿Por qué no definir nuestras propias variables?

Un uso común para esto sería definir los colores que vamos a usar en el sitio: [prism:scss] $green-color: #069b3f; $blue-color: #062e96; $gray-color: #898989; [/prism:scss] Estas variables las puedo llamar en otras variables para separar la función de los colores, de los colores en sí. [prism:scss] $font--color: $gray-color; $title--color: $blue-color; $submit-button--bg: $green-color; [/prism:scss] Ahora utilizaré las variables en una declaración por medio de una clase: [prism:scss] .bloque{ color:$font--color; }

.title{ color:$title--color; }

.button{ background:$submit-button--bg; } [/prism:scss] Así, por ejemplo, si deseo que todos los elementos que tienen una clase 'title' de mi sitio tengan de fondo un color verde, solo me basta con cambiar el color con la variable en su definición. Si yo deseo cambiar la tonalidad del color verde, solo tengo que cambiar dicha variable.

Las variables también nos sirven para tamaños y anchos. Sass nos permite hacer operaciones en las cuales podemos usar patrones para nuestros height y width , pero esto lo comentaré en un siguiente post o en una actualización.

Extend

Cuando empezamos a escribir hojas de estilos nos damos cuenta que existe mucho código repetitivo, muchas clases que tienen todo o parte en común. Entonces así como en P.O.O. podemos usar la herencia u otros mecanismos, en Sass podemos hacer lo mismo.

Esta sería nuestra declaración de clase “padre” [prism:css] .padre{ width:200px; height:100px; color:#ccc; } [/prism:css] Y ahora “hijo1” e “hijo2” [prism:scss] .hijo1{ @extend .padre; }

.hijo2{ @extend .padre; font-weight:bold; } [/prism:scss] El “hijo1” es una copia total de los atributos de la clase “padre”. Sin embargo, a la clase “hijo2”, hay agregarle uno o más atributos. El resultado final en css sería:

Código resultante: [prism:css] .padre, .hijo1, .hijo2 { width:200px; height:100px; color:#ccc; } .hijo2{ font-weight:bold; } [/prism:css]

Como podemos ver, la cantidad de código es menor a la que usaríamos en la manera tradicional.

Diferencia entre declarar la clase “padre” de la forma ( .padre ) y ( %padre )

Esta última es conocida como placeholder. En el primer caso, se están compartiendo atributos entre las clases “padre”,“hijo1” e “hijo2” . En el segundo caso, estamos reutilizando código y usando la clase “padre” solo como contenedor. El código resultante css no tendrá definida la clase “padre”. [prism:scss] %padre{ width:200px; height:100px; color:#ccc; } .hijo1{ @extend .padre; } .hijo2{ @extend .padre; } [/prism:scss] Código resultante: La clase “padre” no aparecerá en nuestro código resultante. [prism:css] .hijo1, .hijo2 { width:200px; height:100px; color:#ccc; } [/prism:css]

Mixin

Si tenemos elementos que comparten una estructura similar (como un botón) pero que tienen pequeñas variaciones, podemos usar los mixins. Los mixins se diferencian de %extend porque permiten pasarle argumentos. Los argumentos se declaran como una lista de variables dentro de un paréntesis. A cada una de estas variables se le asigna un valor cada vez que se usa el mixin.

Ejemplo: Tengo diferentes botones que van a tener un font-size, un background y un color, pero éstos campos pueden ser distintos para cada uno de los botones.

Entonces defino mi estructura: [prism:scss] @mixin _button($background, $color, $font-size){ background: $background; color: $color; display: block; font-size: $font-size; } [/prism:scss] Ahora creamos nuestros dos botones: uno azul y uno verde. [prism:scss] .button-verde{ @include _button($green-color, #fff, 12px); } .button-azul{ @include _button($blue-color, #fff, 12px); } [/prism:scss] Sass es una herramienta muy potente y útil como para no usarla en nuestros proyectos por el nivel de abstracción y reutilización de código que podemos lograr. Nuestros códigos pueden ser reutilizados y optimizados en otros proyectos y ahorrarnos tiempo; también nos permitirá modificar y añadir nuevos atributos de apariencia a nuestro estilo con mayor facilidad.

En el futuro estaré ampliando más funciones de SASS.