Sintaxis SASS y sintaxis SCSS

Este artículo explica la sintaxis SASS y la sintaxis SCSS.

Explicaremos en detalle las diferencias entre las sintaxis SASS y SCSS, y proporcionaremos ejemplos concretos para profundizar tu comprensión.

YouTube Video

Sintaxis SASS y sintaxis SCSS

SASS es un lenguaje de hojas de estilo diseñado para ampliar las capacidades de CSS. SASS tiene dos sintaxis. Estas son la sintaxis SASS y la sintaxis SCSS.

Descripción general de SASS y SCSS

Sintaxis SASS

La sintaxis de SASS se escribe de la siguiente manera:.

 1$primary-color: #3498db
 2$secondary-color: #2ecc71
 3
 4body
 5    font-family: Arial, sans-serif
 6    color: $primary-color
 7
 8h1
 9    font-size: 2rem
10    color: $secondary-color
11
12    &:hover
13        text-decoration: underline

• Una sintaxis basada en la indentación que no utiliza llaves {} ni puntos y coma ;.
• Está diseñada para escribir código conciso y fácil de leer.
• La extensión del archivo es .sass.

Sintaxis SCSS

La sintaxis de SCSS se escribe de la siguiente manera:.

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4body {
 5    font-family: Arial, sans-serif;
 6    color: $primary-color;
 7}
 8
 9h1 {
10    font-size: 2rem;
11    color: $secondary-color;
12
13    &:hover {
14        text-decoration: underline;
15    }
16}

• Una sintaxis similar a CSS, utilizando llaves {} y puntos y coma ;.
• Altamente compatible con código CSS existente, permitiendo convertir CSS directamente en un archivo SCSS.
• La extensión del archivo es .scss.

Principales diferencias entre SASS y SCSS

Criterios de selección

Cuál usar depende de las necesidades del proyecto y del equipo.

• Cuándo elegir la sintaxis SASS

  • La sintaxis SASS te permite escribir código conciso y limpio.
  • Si todo el equipo está familiarizado con la sintaxis SASS, es una opción adecuada.

• Cuándo elegir la sintaxis SCSS

  • Si la compatibilidad con CSS es importante y muchos miembros del equipo están familiarizados con CSS, la sintaxis SCSS es más apropiada.

Ventajas de SASS y SCSS

Las siguientes son ventajas comunes tanto de la sintaxis SASS como de SCSS:.

1. Uso de variables

1$font-stack: Helvetica, sans-serif;
2$primary-color: #333;
3
4body {
5    font: 100% $font-stack;
6    color: $primary-color;
7}

• Al utilizar variables, puedes definir un estilo en un solo lugar y reutilizarlo en múltiples ubicaciones. Los cambios de diseño se pueden aplicar de manera global simplemente cambiando los valores de las variables, lo que mejora la mantenibilidad.

2. Mixins

1@mixin border-radius($radius) {
2    -webkit-border-radius: $radius;
3    -moz-border-radius: $radius;
4    border-radius: $radius;
5}
6
7button {
8    @include border-radius(10px);
9}

• Los mixins te permiten agrupar estilos o código con prefijos de proveedor que se utilizan repetidamente en varios lugares y aplicarlos de forma flexible utilizando argumentos. Esto reduce la duplicación de código y mejora la mantenibilidad.

3. Reglas anidadas

 1nav {
 2    ul {
 3        margin: 0;
 4        padding: 0;
 5        list-style: none;
 6    }
 7
 8    li { display: inline-block; }
 9    a { text-decoration: none; }
10}

• Al utilizar el anidamiento, puedes escribir estilos jerárquicamente siguiendo la estructura HTML, lo que facilita agrupar reglas relacionadas. Esto mejora tanto la legibilidad del código como la mantenibilidad.

4. Herencia

 1%button-style {
 2    display: inline-block;
 3    padding: 10px 20px;
 4    font-size: 16px;
 5}
 6
 7.btn-primary {
 8    @extend %button-style;
 9    background-color: blue;
10    color: white;
11}
12
13.btn-secondary {
14    @extend %button-style;
15    background-color: gray;
16    color: black;
17}

• Al utilizar la herencia, puedes agrupar y reutilizar estilos comunes. Esto reduce la duplicación de código y mantiene un diseño consistente.

Conclusión

La elección entre SASS y SCSS depende de la preferencia del desarrollador y los requisitos del proyecto.

La sintaxis SASS enfatiza la simplicidad, mientras que la sintaxis SCSS enfatiza la compatibilidad con CSS. Ambas sintaxis son potentes y pueden mejorar en gran medida la productividad con CSS.

Elegir la opción más adecuada para tu proyecto permite una gestión eficiente de las hojas de estilo.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video