Actualmente disponemos de varios preprocesadores de Css y mucha gente tiene dudas cuando escuchan hablar de Sass vs Scss, ¿Cuáles son las diferencias entre de Sass o Scss? ¿es mejor Sass o Scss? ¿Elijo Sass o Scss?, diferentes dudas que vamos a resolver de manera sencilla es este pequeño artículo.
Para crear una web dos de los lenguajes que utilizamos son Html (Si aún no sabes Html empezar desde aquí) y Css, éste último como sabemos, es un lenguaje con el que podemos dar estilos a nuestras páginas y cambiarle su aspecto visual, hoy daremos un paso más allá y hablaremos de Sass.
Sass es un lenguaje de hojas de estilo compilado en CSS, un superset de CSS o por decirlo así una manera de dar “superpoderes” a nuestras hojas de estilo gracias a la cual nuestros desarrollos se volverán más mantenibles y escalables.
Sass nos permite usar variables , reglas anidadas , mixins , funciones y más,
Otra gran ventaja de Sass es que mantiene una sintaxis totalmente compatible con CSS, es decir, un archivo .css podría pasar ser un archivo de Sass solo con cambiarle la extensión.
Sass nos puede ayudar a mantener proyectos de gran tamaño y a compartir diseños entre éstos con mucha menor dificultad al poder hacer uso de las funcionalidades de las que nos provee.
Bien, ya se lo que es Sass, pero… ¿Qué diferencias entre Sass y Scss?
Sintaxis Sass vs Scss
La principal diferencia de ambos viene dada por su sintaxis.
Sintaxis Scss
La sintaxis de Scss a diferencia de la sintaxis de Sass usa archivos con extensión .scss, a pesar de esto nos provee de las mismas características.
Esta sintaxis suele ser la más utilizada ya que es muy parecida a la sintaxis de CSS, por lo que suele ser más fácil de usar para programadores que vienen de usar css tradicional.
Un ejemplo de sintaxis en Scss sería:
@mixin button-base() {
@include typography(button);
display: inline-flex;
position: relative;
height: $button-height;
border: none;
&:hover { cursor: pointer; }
}La sintaxis indentada (Sass)
Aquí es donde podemos ver una mayor diferencia, la sintaxis indentada es la sintaxis original de Sass y al contrario que los archivos Scss, utilizan la extensión .sass.
Esta sintaxis nos ofrece las mismas características que nos ofrece la sintaxis de Scss, la gran diferencia es que se dejan de usar las llaves { } para pasar a usar la indentación y se dejan de usar los punto y coma “ ; ” tras cada instrucción.
El mismo ejemplo anterior en .sass nos quedaría de la siguiente manera.
@mixin button-base()
@include typography(button)
display: inline-flex
position: relative
height: $button-height
border: none
&:hover
cursor: pointer
Conclusión
Como veis la utilización de uno u otro depende en gran medida de si necesitáis que vuestro código tenga una sintaxis más parecida a la propia de css o no, al fin y al cabo vamos a poder realizas las mismas funciones y si bien hay desarrolladores que prefieren usar la sintaxis Scss debido a las similitudes, también los hay que prefieren usar la sintaxis de Sass por proveer de un aspecto más limpio y fácil de leer. Ambas son totalmente correctas y utilizar una u otra va a depender casi totalmente de las decisiones personales del desarrollador o del equipo y de cómo se sienta más a gusto trabajando.
Comentarios