Aujourd’hui, n’importe quel développeur web doit connaître le css3. Le problème c’est long de bien programmer en css. Ce n’est pas difficile, mais il faut tout écrire.
Heureusement des programmeurs sont à notre rescousse pour ne plus avoir à programmer en css pur. Ils ont créé de nouveaux langages avec des préprocesseurs qui écrivent du css parfait. Ce qui est presque impossible à faire et, en plus, qui prend peu de temps à écrire.
Jetons au coup d’œil aux avantages de scots, car c’est le langage que je connais.
Scss est un dérivé de sass, mais cela ressemble plus au css traditionnel.
Raison 1: Le nesting
En css, il y a un principe de spécificité, plus c’est spécifique, plus la règle va avoir de l’importance et plus il sera difficile à la changer. Dans Scss, il y a la possible de faire du «nesting» ce qui est super efficace, logique et précis. Au lieu d’écrire:
Nav{règle}
Nav ul{règle}
Nav ul li{règle}
On va écrire
Nav{
Règle
ul{
Règle
li{
Règle
}
}
}
donc en escalier et on sauve beaucoup de temps à l’écriture
Raison 2 : Les mixins
Dans css il faut souvent écrire des choses à répétition. Par exemple les coins ronds, et, en plus, il faut ( dans les meilleures pratiques) ajouter les vendeurs: –webkit-, -moz-, et quelquefois –o- et –ms-.
Donc cela donne :
.rectangle{
-webkit-border-radius : 20px;
-moz-border-radius :20px;
border-radius :20px;
}
Dans Sccs on peut créer un mixin
borderradius($radius :20px){
-webkit-border-radius : $radius;
-moz-border-radius : $radius;
border-radius : $radius;
}
et l’inscrire où c’est nécessaire dans notre nos règles Scss
.rectangle{
@include borderradius();
}
Les mixins s’ils ne sont pas utilisés ne s’écrivent pas dans le css final. Donc, il faut pas avoir peur de créer un fichier que l’on va utilisé à répétition dans tous nos projets.
Raison 3: Les variable
Votre client n’aime plus le bleu, il veut du vert. Avec une variable c’est facile de changer.
$primary-color : #0000ff; //le bleu devient vert $primary-color : #00ff00;
De plus, si c’est bien fait, tout le site peut changer les couleurs avec vos couleurs choisies en 3 secondes. Et, il y a des variables pour tout ce que vous désirez ou presque vous les créées avec le $ devant.
Raison 4: Les fonctions intégrées
On peut facilement inclure :
background-color :darken (#ff00ff, 10%)
pour rendre une couleur plus foncer ou plus pâle (avec lighten) il y a une multitude de fonctions déjà intégrer.
Raison 5: Tout le reste
Il y aurait aussi les fonctions for if each, les placeholder, les options de calculation, les media querie et les différents types de rendu css.
Il faut juste savoir que pour utiliser les préprocesseurs css comme Sass ou Scss il faut connaître le css… Il faut savoir marcher avant de courir. On ne peut pas utiliser ces engins sans savoir le css même si c’est plus simple. Le css restes la base et les langages utilise cette base.
Vous voulez plus d’infos sur les préprocesseurs css contactez-moi.
Laisser un commentaire