Comment convertir l'ancien CSS en MOINS
Nous avons couvert la plupart des bases de LESS dans nos précédents articles. Si vous avez suivi notre série LESS, nous pensons qu’à ce stade, vous avez déjà une bonne idée de la façon d’utiliser le Variables, Mixins et Opération en moins.
Nous avons également mentionné comment convertir LESS en CSS standard, avec une application ou avec un compilateur. Mais, comment fait-on le contraire? convertir CSS en MOINS? Eh bien, cette astuce est pour vous.
Utiliser un outil
Avec la popularité croissante de Préprocesseur CSS, certains nouveaux outils et applications visant essentiellement à faciliter la vie des concepteurs de sites Web ou des développeurs, tels que cet outil: CSS2Less.
Cet outil nous permet de convertir des CSS classiques en MOINS. Alors, essayons. J'ai les règles CSS suivantes de mon ancien fichier à convertir.
nav hauteur: 40px; largeur: 100%; arrière-plan: # 000; border-bottom: 2px solid #fff; nav ul padding: 0; marge: 0 auto; nav li display: inline; float: gauche; nav a color: #fff; affichage: inline-block; largeur: 100px; text-shadow: 1px 1px 0px # 000; nav li a border-right: 1px solid #fff; taille de la boîte: boîte-frontière; nav li: dernier enfant a border-right: 0; nav a: survol, nav a: actif background-color: #fff;
Voici le résultat.
nav a: survol, nav a: actif background-color: #fff; nav hauteur: 40px; largeur: 100%; arrière-plan: # 000; border-bottom: 2px solid #fff; a color: #fff; affichage: inline-block; largeur: 100px; text-shadow: 1px 1px 0px # 000; ul padding: 0; marge: 0 auto; li: dernier-enfant a border-right: 0; li display: inline; float: gauche; un border-right: 1px solid #fff; taille de la boîte: boîte-frontière;
Comme nous pouvons le voir ci-dessus, notre ancien CSS est maintenant imbriqué comme dans LESS.
Limitation
Cependant, nous pouvons également constater certaines limites dans les résultats de la conversion. Dans l'ancienne CSS, nous avons plusieurs couleurs identiques, comme dans ces deux déclarations border-bottom: 2px solid #fff; et border-right: 1px solid #fff; nous avons les deux frontières en blanc. En moins nous pouvons réellement stocker cette valeur constante dans un Variable.
Il ne niche pas et ne sépare pas les pseudo-* avec un symbole et commercial (&), comme dans les règles suivantes li: dernier enfant et nav a: hover, nav a: actif. Ils restent comme ils sont, où nous pouvons réellement simplifier les règles de cette façon;
li &: premier-enfant a &: hover &: actif
Conclusion
En dépit des limitations qu’il a toujours, cet outil peut être très utile pour gagner du temps pour l’emboîtement des ensembles de règles CSS. Nous n'avons qu'à faire le reste manuellement; peut-être jusqu'à ce que les limites ci-dessus soient résolu.
