3 nouvelles fonctionnalités CSS moins que vous devriez savoir

Cela fait un moment depuis notre dernière discussion sur MOINS CSS. Aujourd'hui, LESS CSS a atteint la version 1.5, et il a évolué avec de nouvelles fonctionnalités qui le rendent plus puissant en tant que pré-processeur CSS.

Il y a eu un tas de nouveaux ajouts, et dans ce post, nous allons vous guider à travers 3 de mes nouvelles fonctionnalités préférées, Referencing External File, Extend, Merging Property, ce qui peut nous aider à écrire de meilleurs CSS. Nous allons jeter un coup d'oeil.

Importation de fichier

Tout d'abord, regardons comment LESS gère les fichiers externes avec la règle @import .

Certaines personnes peuvent diviser leur feuille de style en plusieurs fichiers, plutôt que de la mettre dans un seul pot. Ensuite, ils les importent avec le @import vers une autre feuille de style, afin que les Mixins (ainsi que les Variables ) de ces fichiers puissent être réutilisés dans cet autre fichier.

 @import "external.less"; 

Le problème est que LESS va compiler tous les Mixins à partir de ces fichiers externes, de sorte que nous aurions fini avec plusieurs règles de style qui définissent la même chose.

Jetez un oeil à l'exemple suivant: Nous avons deux fichiers LESS appelés style.less et external.less . Nous importons external.less dans style.less . Ensuite, nous avons .square mixin dans external.less pour définir le style des cases carrées. Dans le styleless, nous utilisons le mixin comme ça.

 @import "externe"; .box {.square; } 

Cela produira le résultat suivant en CSS. Les règles de style de .square mixin sont également générées - ce qui n'est pas bon.

 .square {largeur: 100px; hauteur: 100px; marge: 0 auto; couleur de fond: rouge; } .box {largeur: 100px; hauteur: 100px; marge: 0 auto; couleur de fond: rouge; } 

Dans la version 1.5, MOINS introduit (reference), qui peut être utilisé pour indiquer à LESS d'utiliser le fichier d'importation uniquement comme référence, et de ne pas afficher le contenu.

Mettez l'instruction (reference) cette façon:

 @import (référence) "externe"; 

Compilez la feuille de style LESS, et maintenant le .square n'est pas .square .

 .box {largeur: 100px; hauteur: 100px; marge: 0 auto; couleur de fond: rouge; } 

Étendre

La méthode d' extension est pure awesomeness. Techniquement, il regroupe des sélecteurs partageant les mêmes règles de style, ce qui se traduit par des CSS plus propres et mieux organisées . Lorsque nous construisons un site Web, à certains points, nous pourrions avoir des sélecteurs avec des règles de style similaires, comme ci-dessous:

 .box {largeur: 100px; hauteur: 100px; marge: 0 auto; bordure: 1px noir uni; couleur de fond: transparent; } .box2 {largeur: 100px; hauteur: 100px; marge: 0 auto; bordure: 1px noir uni; couleur de fond: rouge; } 

Il est redondant et ne suit pas les meilleures pratiques, qui suggèrent de regrouper les mêmes styles. Sass, dans ce cas, est connu avec sa directive @extend pour faire ce travail, dans LESS nous pouvons faire une chose similaire avec &:extend(), introduit dans la version 1.4.

Compte tenu de l'exemple ci-dessus, nous pouvons faire:

 @import (référence) "externe"; .box {&: extend (.square); couleur de fond: transparent; } .box2 {&: étendre (.square); couleur de fond: rouge; } 

Une fois compilé en CSS standard, le code ci-dessus produira:

 .square, .box, .box2 {largeur: 100px; hauteur: 100px; marge: 0 auto; bordure: 1px noir uni; } .box {background-color: transparent; } .box2 {background-color: rouge; } 

Fusionner une propriété

Une autre nouvelle fonctionnalité intéressante est la fusion de propriétés . Cette fonctionnalité s'applique à la propriété CSS qui accepte plusieurs valeurs, telles que la transformation, la transition et la boîte-ombre . Et comme son nom l'indique, il fusionnera les valeurs appartenant à la même propriété. Regardons cet exemple ci-dessous.

Comme vous le savez probablement déjà, la propriété CSS3 Box Shadow accepte plusieurs valeurs d'ombre. En utilisant cette propriété de fusion, vous pouvez facilement créer un effet d'ombre et le rendre plus gérable.

Ici nous créons deux mixins .inner-shadow et .outer-shadow - je suppose que les noms sont explicites.

 .inner-shadow {box-shadow +: encadré 10px 10px 5px #ccc; } .outer-shadow {box-shadow +: encadré 10px 10px 5px #ccc; } 

Notez que nous ajoutons un signe + à la fin du nom de la propriété. Ce signe + est requis pour que cette fonctionnalité fonctionne. Ensuite, nous pouvons utiliser ces mixins, comme suit:

 .box {.inner-shadow; .outer-shadow; } .box2 {.inner-shadow; } .box3 {.outer-shadow; } 

Ce code nous donnera le résultat suivant.

 .box {box-shadow: encadré 10px 10px 5px #ccc, 10px 10px 5px #ccc; } .box2 {box-shadow: encart 10px 10px 5px #ccc; } .box3 {box-shadow: 10px 10px 5px #ccc; } 

Pensée finale

Ces 3 nouvelles fonctionnalités - Référencer un fichier externe, étendre, fusionner une propriété - m'ont motivé à utiliser moins. Avec eux, nous pouvons écrire mieux, et plus facilement gérable CSS. Je suis impatient de nouvelles fonctionnalités plus cool que LESS offrira dans les prochaines versions.

6 façons d'accéder au menu des options de démarrage de Windows 10

Windows 10 offre beaucoup de fonctionnalités intéressantes, et les options de démarrage avancées pour résoudre les nombreux problèmes de Windows 10, est l'un d'entre eux. Vous pouvez réinitialiser votre PC, le restaurer à un état antérieur, démarrer sur un système d'exploitation différent, utiliser "Réparation au démarrage" pour résoudre les problèmes de démarrage et démarrer Windows 10 en mode sans échec pour résoudre les problèmes.Il existe plusieurs f

(Conseils techniques et de conception)

50 Freebies Dribbble pour les concepteurs Web

Vous cherchez des conceptions d'interface utilisateur pour l'inspiration ou des PSD UI gratuits pour votre prochain projet de design? Nous avons plongé dans Dribbble.com, et trié sur le volet certains des meilleurs PSDs (et gratuits) pour vous qui ont été créés par divers designers .Consultez la liste complète avant de faire votre choix. Maque

(Conseils techniques et de conception)