Se plonger dans le Préprocesseur CSS

Nous avons vu précédemment comment imbriquer notre code avec SCSS, nous allons désormais voir quelques petites astuces pour gagner du temps dans notre développement.

imaginons un code css comme ci-dessous:

    
.wrapper {
  background: #407FC7;
  color: #5D6063;
}
​
.header {
  background: #FFFFFF;
  color: #407FC7;
}
​
.footer {
  background: #5D6063;
}

On voit que plusieurs éléments sont redondants, de plus s'il me prend l'envie de modifier le code couleur du site et la police, il faudrait changer plusieurs lignes dans mon code.

Transformons désormais ce code en SCSS pour comprendre l'utilité des variables ici.

$primaryColor:#407FC7;
$secondaryColor:#5D6063;
$primaryFont:"Century";
​
.wrapper {
  background: $primaryColor;
  color: $secondaryColor;
  font-family: $primaryFont;
}
​
.header {
  background: $secondaryColor;
  color: $primaryColor;
  font-family: $primaryFont;
}
​
.footer {
  background: $secondaryColor;
  font-family: $primaryFont;
}

​Désormais en changeant les valeurs de mes variables je peux facilement changer l'intégralité de ma charte graphique. Je vous vois déjà imaginer des fichiers immenses, c'est là qu'arrive l'import de fichier dans SCSS.​

Imaginons que vous souhaitiez avoir un fichier app.css principal contenant l'intégralité de votre code, mais que pour des raisons d'organisations vous souhaitiez découper ce fichier en plusieurs petits fichiers lors de votre développement.​

Il vous est complètement possible de faire ça avec SCSS, pour cela il faudra simplement préfixer le fichier par un underscore ( _ ).​

Vous aurez donc par exemple:​

// _variables.scss

$primaryColor:#407FC7;
$secondaryColor:#5D6063;
$primaryFont:"Century";
​

// _footer.scss
​
.footer {
  background: $secondaryColor;
  font-family: $primaryFont;
}
​

// _header.scss
​
.header {
  background: $secondaryColor;
  color: $primaryColor;
  font-family: $primaryFont;
}

Et vous pourrez ensuite récupérer tout cela à l'intérieur de votre fichier app.scss:​

@import "variables";
@import "header";
@import "footer";
​

SCSS offre vraiment de nouvelles possibilités et nous fait gagner énormément de temps. Imaginons désormais que nous souhaitions avoir un code du type:​

.label-1 {
  padding-left: 10px;
}
​
.label-2 {
  padding-left: 20px;
}
​
.label-3 {
  padding-left: 30px;
}
​
.label-4 {
  padding-left: 40px;
}

Avec la boucle @for il est désormais possible de générer dynamiquement ces différentes classes CSS:​

@for $i from 1 through 4 {
  .label-#{$i} {
    padding-left: $i * 10;
  }
}

Avec ces nouveaux supers pouvoirs tu vas pouvoir coder encore plus vite et plus efficacement !​

À très vite.