SASS

• Pre procesador de CSS

• Diferencia .sass y .scss

  • Sass: Se trata de Sass en su estado puro y original. Utiliza una sintaxis identada que deja de lado el uso de llaves ({ }) y el punto y coma (;) tras cada declaración.
  • Scss: En este tipo puedes utilizar prácticamente todas las características del lenguaje, pero se mantiene una sintaxis igual al CSS tradicional. Es decir, en este tipo de archivos será necesario utilizar llaves ({ }) y el punto y coma (;) tras cada declaración.

• Ventajas:

  • Selectores anidados (Nested selectors)
    .example {
background-color: red;
font-size: 3rem;
&__title {
font-weight: bold;
}
p {
color: red;
}
&--disabled {
color: grey;
}
}
  • Propiedades anidadas:
    .container {
flex: {
direction: column;
wrap: nowrap;
}
}
  • Variables:
    • Se declaran arriba del todo del fichero.
    • Ejs.: $dark-green: #2A7432; $small: 1rem; etc.
    • Se pueden establecer operaciones matemáticas con las variables (ej. $size-default * 3; ej. $small / 2;)
  • Listas: (variables de más de un valor): $border-default: 0.05rem solid black;
  • Maps:
    • Conjunto de variables dentro de una misma "familia"
    • $colors: (main: #267543, secondary: #2C9DD4);
    • Cómo se usan:
      .example { color: map-get($colors, main); }
  • Funciones nativas (hay varias, mirarlas en MDN):
    • lighten() : para aclarar un color seleccionado, ejs.: background-color: lighten(map-get($colors, main), 70%); color: lighten(green, 40%);
  • Partials
    • Ficheros que contienen código para importarlo en otros ficheros
    • Suelen definirse con guión bajo al principio (_example.scss)
    • Ejemplo: un fichero llamado _variables.scss que contenga todas las variables definidas y que luego se importe en el main.scss u otros ficheros que usen esas variables
  • Posibilidad de anidar (introducir) las media queries dentro de cada selector, para que quede más ordenado
  • @extend: para heredar estilos aplicados a otra clase y así no tener que repetir código o aplicar cada vez esa clase. Ejemplo:

    .example { @extend .previous-style; margin-bottom: 1rem; }

  • Mixins
    • Código reutilizable
    • Modo de uso:
      • Creación: @mixin nombre-del-mixin() { display: flex; justify-content: center; align-items: center; }
      • Importación: .clase-ejemplo { @include nombre-del-mixin(); margin-top: 2rem; }
    • Se pueden establecer argumentos y contenido dinámico
      • Ej.: media query con contenido dinámico en función del tamaño de pantalla establecido:

        Declaración: @mixin media-min-width($width) { @media (min-width: $width) { @content; } }

        Importación: @include media-min-width(40rem) { font-size: 125%; }