Existen diferentes modos de programar los estilos de una página web, ninguno es mejor o peor que el otro, sencillamente son diferentes. Cada programador se siente cómodo con un formato y siempre encontramos un “pero” que el otro formato no tiene. Un ejemplo, el caso del CSS y del SASS.

Principales diferencias

Captura de pantalla 2017-03-06 a las 9.42.39

ASÍ FUNCIONA EL CSS

Es la manera básica/sencilla de dar estilos al contenido de nuestra página web, añadimos la información que queremos al site, a la cual después le atribuimos una serie de propiedades para darle una determinada forma, tamaño, color…

“p. ej: siempre tendremos que ir clase por clase y cambiar los valores uno a uno
(aunque se repita el mismo valor en diferentes clases)”

ASÍ FUNCIONA EL SASS

Tiene exactamente la misma función que el CSS, con la pequeña ventaja de tener las llamadas variables ($nombre), la anidación de selectores, la importación de archivos (@import), los mixins (+nombremixin), los extend (@extend) y los operadores a los cuales poco uso se le da.

Es un código más ordenado que el CSS por una única razón, nos permite compilar varios archivos en uno sólo, y aquí es donde viene el “pero”, pues debemos definir los valores de las variables ($nombre) que se pueden importar (@import) desde un archivo creado por nosotros. Lo mismo podemos hacer con los mixins (+nombremixin), que también hay que definirlos previamente y por último los extend (@extend), que son clases creadas también por nosotros y que más tarde las podemos aprovechar en otras clases, pero sólo añadiendo la propiedad que le falta, es como hacer un reciclaje de una clase.

Variables
Captura de pantalla 2017-03-06 a las 9.44.36
“p. ej: definimos una variable con un valor, esa variable la colocamos
a la clase que queremos definir, si hay varias clases con la misma
variable y la que queremos cambiar, solo tenemos que darle otro valor
a la variable y automáticamente se cambia en todas las clases”

Anidación de selectores

Captura de pantalla 2017-03-06 a las 9.45.36

“p. ej: aquí vemos cómo compila las propiedades del nav(derecha) en una sola vez

Mixins

Captura de pantalla 2017-03-06 a las 9.46.28

“p. ej: definimos un mixin con una variable a la cual ya hemos dado un valor previo,
cada vez que queramos cambiar el valor del mixin,
sólo 
tenemos que cambiar la variable”

Extend

Captura de pantalla 2017-03-06 a las 9.48.10

“p. ej: definimos una clase con unas propiedades, si esas propiedades que acabamos de
definir se repiten en otra clase, lo que hacemos es un @extend de la clase creada a
la nueva y de esa manera reciclamos las propiedades creadas”

En definitiva llegamos a una conclusión, únicamente son dos formas diferentes de programar a nivel de sintaxis para llegar hacer la misma función. Tanto una como la otra son totalmente lícitas, sólo que el SASS nos puede parecer más ágil, limpio y ordenado a la hora de programar, “pero” debemos crear y compilar archivos extras, en cambio el CSS es la manera básica y sencilla de programar, no tenemos que pensar en $variables, @imports o mixins, porque lo programamos todo en un sólo archivo.

Sasha RiberasSasha Riberas

Leave a Reply

Your email address will not be published. Required fields are marked *