Cómo ordenar código CSS con el preprocesador Sass

CSS / Sass

En este post explicaré cómo podemos ordenar código CSS con el preprocesador Sass. Para ello anidaremos propiedades, usaremos la interpolación y selectores posición para conseguir unas reglas mucho más sencillas y ordenadas. Si es la primera vez que escuchas hablar de Sass te recomiendo este post y compruebes que es bastante sencillo usarlo y las posibilidades que ofrece 🙂

Anidar propiedades

En un post anterior sobre Sass mostré que podíamos anidar distintas reglas. En este caso mostraré como anidar propiedades. Un caso bastante claro es que el caso de las tipografías. La propiedad font tiene propiedades derivadas como font-family, font-size y font-weight. En Sass podemos anidar las propiedades en un nombre.

Sass
1
2
3
4
5
6
7
body{
     font: {
          family: 'Helvetica';
          size: 18px;
          weight: bold;
     }
}

Sería equivalente a

1
2
3
4
5
body {
  font-family: 'Helvetica';
  font-size: 18px;
  font-weight: bold;
}

Otro ejemplo sería con la propiedad transition. Esta propiedad tiene transition-property, transition-duration,  transition-timing-function, transition-delay.

Sass
1
2
3
4
5
6
7
8
9
10
11
12
a{
     transition:{
          property: color;
          duration: .7s;
          timing-function: ease-in-out;
          delay: .8s;
     }
}
 
a:hover{
     color:green;
}

Si es la primera vez que escuchas de transiciones, te recomiendo este post que explica en qué consisten y cómo se emplean.

Interpolación

La interpolación en Sass nos permite crear selectores o propiedades de manera dinámica. Esto se suele emplear mucho en bucles, que es un tema que explicaré en otro post. Por tanto, veremos un caso sencillo donde queremos almacenar el valor que usaremos como nombre de clase. Para realizar una interpolación es preciso emplear «#{nombreVariable}».

Sass
1
2
3
4
5
6
$nombre-clase: este-es-un-nombre-muy-largo;
 
.container .#{$nombre-clase} {
     width:100%;
     display:inline-block;
}

Resultado:

1
2
3
4
.container .este-es-un-nombre-muy-largo {
  width: 100%;
  display: inline-block;
}

Selector de marcador de posicion

También conocidos como placeholder selectors, son un tipo especial de selectores que funcionan igual que los selectores ID o de clase pero, su prefijo es un «%.» Lo que  almacene este selector, no se compila en el css final. Estos selectores se usan para ampliar ciertos sets de estilos.

Sass
1
2
3
4
5
6
7
8
9
%textoError{
 
     Color:red;
     Font-weight:bold;
}
 
.alert-error{
     @extend %textoError;
}

Lo que resultaría en CSS:

CSS
1
2
3
4
.alert-error {
     Color: red;
     Font-weight: bold;
}

Y hasta aquí cómo ordenar código CSS con Sass. Espero que os haya gustado, a seguir picando 🙂