Aujourd\u2019hui, n\u2019importe quel d\u00e9veloppeur web doit conna\u00eetre le css3. Le probl\u00e8me c\u2019est long de bien programmer en css. Ce n\u2019est pas difficile, mais il faut\u00a0tout \u00e9crire.<\/p>\n
<\/p>\n
Heureusement des programmeurs sont \u00e0 notre rescousse pour ne plus avoir \u00e0\u00a0 programmer en css pur. Ils ont cr\u00e9\u00e9 de nouveaux langages avec des pr\u00e9processeurs qui \u00e9crivent du css parfait. Ce qui est presque impossible \u00e0 faire et, en plus, qui prend peu de temps \u00e0 \u00e9crire.<\/p>\n
Jetons au coup d\u2019\u0153il aux avantages de scots, car c\u2019est le langage que je connais.<\/p>\n
Scss<\/strong> est un d\u00e9riv\u00e9 de sass<\/a>, mais cela ressemble plus au css traditionnel.<\/p>\n En css, il y a un principe de sp\u00e9cificit\u00e9, plus c\u2019est sp\u00e9cifique, plus la r\u00e8gle va avoir de l\u2019importance et plus il sera difficile \u00e0 la changer. Dans Scss<\/strong>, il y a la possible de faire du \u00abnesting<\/em>\u00bb ce qui est super efficace, logique et pr\u00e9cis. Au lieu d\u2019\u00e9crire:<\/p>\n On va \u00e9crire<\/p>\n <\/p>\n donc en escalier et on sauve beaucoup de temps \u00e0 l\u2019\u00e9criture<\/p>\n Dans css il faut souvent \u00e9crire des choses \u00e0 r\u00e9p\u00e9tition. Par exemple les coins ronds, et, en plus, il faut ( dans les meilleures pratiques) ajouter les vendeurs: \u2013webkit-, -moz-<\/em>, et quelquefois \u2013o- et \u2013ms-.<\/em><\/p>\n Donc cela donne\u00a0:<\/p>\n Dans\u00a0Sccs<\/strong> on peut cr\u00e9er un mixin<\/em><\/p>\n et l\u2019inscrire o\u00f9 c\u2019est n\u00e9cessaire dans notre nos r\u00e8gles Scss<\/strong><\/p>\n Les mixins<\/em> s\u2019ils ne sont pas utilis\u00e9s ne s\u2019\u00e9crivent pas dans le css final. Donc, il faut pas avoir peur de\u00a0cr\u00e9er un fichier que l\u2019on va utilis\u00e9 \u00e0 r\u00e9p\u00e9tition dans tous nos projets.<\/p>\n Votre client n\u2019aime plus le bleu, il veut du vert. Avec une variable c\u2019est facile de changer.<\/p>\n De plus, si c\u2019est bien fait, tout le site peut changer les\u00a0couleurs avec vos couleurs choisies en 3 secondes. Et,\u00a0il y a des variables pour tout ce que vous d\u00e9sirez ou presque vous les cr\u00e9\u00e9es avec le $ devant.<\/p>\n On peut facilement inclure\u00a0:<\/p>\n pour rendre une couleur plus foncer ou plus p\u00e2le (avec lighten<\/em>) il y a une multitude de fonctions d\u00e9j\u00e0 int\u00e9grer.<\/a><\/p>\n Il y aurait aussi les fonctions for if each<\/em>, les placeholder<\/em>, les options de calculation, les media querie<\/em> et les diff\u00e9rents types de rendu css.<\/p>\nRaison 1: \u00a0Le nesting<\/em><\/h2>\n
Nav{r\u00e8gle}\r\nNav ul{r\u00e8gle}\r\nNav ul li{r\u00e8gle}<\/pre>\nNav{\r\n R\u00e8gle\r\n ul{\r\n R\u00e8gle\r\n li{\r\n R\u00e8gle\r\n }\r\n }\r\n}<\/pre>\nRaison 2\u00a0: Les mixins<\/em><\/h2>\n
.rectangle{\r\n -webkit-border-radius\u00a0: 20px;\r\n -moz-border-radius\u00a0:20px;\r\n border-radius\u00a0:20px;\r\n}\r\n<\/pre>\nborderradius($radius\u00a0:20px){\r\n -webkit-border-radius\u00a0: $radius;\r\n -moz-border-radius\u00a0: $radius;\r\n border-radius\u00a0: $radius;\r\n}<\/pre>\n.rectangle{\r\n @include borderradius();\r\n}<\/pre>\nRaison 3: Les variable<\/h2>\n
$primary-color\u00a0: #0000ff; \r\n\/\/le bleu devient vert \r\n$primary-color\u00a0: #00ff00;<\/pre>\n
Raison 4:\u00a0Les fonctions int\u00e9gr\u00e9es<\/h2>\n
background-color\u00a0:darken (#ff00ff, 10%)<\/pre>\n
Raison 5: Tout le reste<\/h2>\n