Característica #1: Variables
Varias clases CSS pueden contener la misma regla o reglas en un proyecto. Por ejemplo, tenemos 20 cajas en nuestra página web con diferentes colores de fondo:
.box-1 {
width: 100px;
height: 100px;
background: red;
}.box-2 {
width: 100px;
height: 100px;
background: yellow;
}....box-20 {
width: 100px;
height: 100px;
background: blue;
}
Más tarde, nuestro cliente cambia de opinión y quiere cajas más grandes. Así que necesito aumentar las propiedades width y height de cada clase una por una. Esto también podría ser 50 clases. En la vida real de la programación, esto puede ser frustrante. Como he mencionado anteriormente, este es un ejemplo de gran esfuerzo para pequeños cambios.
¿Cómo podemos hacerlo de manera más eficiente?
Sass proporciona una solución: las variables. Como en otros lenguajes de programación, podemos utilizar variables para almacenar valores y reutilizarlos posteriormente.
Definición de una variable:
$variable-name: value;
Volviendo al ejemplo anterior, si definimos variables para width & height :
$box-width: 100px;
$box-height: 100px;
más tarde, cuando se necesite un cambio, sólo tenemos que cambiar sus valores una vez:
$box-width: 200px; // changed from 100px to 200px
$box-height: 200px; // that's all!.box-1 {
width: $box-width; // using variables now instead of pixels
height: $box-height;
background: red;
}.box-2 {
width: $box-width;
height: $box-height;
background: yellow;
}....box-20 {
width: $box-width;
height: $box-height;
background: blue;
}
El propio CSS también soporta variables ahora, pero no funciona en IE & versiones antiguas de otros navegadores:
Característica #2: Anidamiento
El CSS estándar no soporta el anidamiento. No podemos escribir una clase dentro de otra clase. A medida que el proyecto se hace más grande, esto trae un problema de legibilidad y la estructura no se ve bien.
Por ejemplo, vamos a definir un menú de navegación con enlaces clicables en HTML a continuación:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
HTML soporta código anidado. Sin embargo, sin anidación, se ven así en CSS:
Tenemos que escribir nav para cada etiqueta, incluso para la pseudo-clase del ancla (hover) porque nav es la etiqueta padre de todas. Sass sin embargo, soporta el anidamiento:
Aquí podemos escribir un código mejor estructurado como en HTML. No necesitamos escribir navclase tras clase, lo que también evita la redundancia
Importante: No se recomienda anidar clases a más de 3 niveles.
Característica #3: Mixins
Aprendimos arriba cómo usar variables para las reglas CSS. Pero, ¿qué pasa si necesitamos utilizar un grupo de reglas juntas? Sass tiene una característica llamada mixins, que nos permite hacerlo.
¿Qué es un mixin?
Los mixins son funciones de Sass que agrupan declaraciones CSS. Podemos reutilizarlos más tarde como variables.
Podemos crear un mixin con el comando @ mixin, seguido de un nombre:
@mixin my-font {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
}
o podemos crear un mixin como una función y añadir parámetros también:
$font-color: red;@mixin my-font($font-color) {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
color: $font-color;
}
Después de crear el mixin, podemos usarlo en cualquier clase con el comando @ include. Así que podemos usar el mixin mi-font en lugar de 4 líneas de reglas de fuente cada vez. Este enfoque simplifica el código.
p {
@include my-font;
}
Usar mixins es una buena manera de evitar la redundancia de código.
Característica #4: Importaciones
Por último, podemos cortar nuestros enormes archivos CSS en piezas más pequeñas con la característica de importación de Sass. Es mucho más fácil leer &mantener archivos más pequeños en lugar de un gran archivo con líneas interminables.
En realidad, CSS también tiene ahora una característica de importación. Pero funciona de manera diferente. CSS envía una petición HTTP al servidor cada vez para importar un archivo. Sass lo hace sin una solicitud HTTP, que es un enfoque más rápido.
Todo lo que necesitas es, importar tu archivo Sass con el comando @ import a otro archivo Sass:
// Your main Sass file@import 'file';
@import 'anotherFile';.class {
// Your code
}
No tenemos que usar las extensiones .scss en la ruta del archivo, Sass lo entenderá.