hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


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.

Tastemakers: un regard sur 10 designers de vie influents

Tastemakers: un regard sur 10 designers de vie influents

Un tastemaker est quelqu'un qui a le pouvoir de dicter le cours de l'opinion au sein d'une industrie . La communauté du design ne manque pas de gens qui, grâce au respect qu'ils ont gagné avec leur travail et leur statut de vétéran, peuvent écrire un article de blog unique qui peut influencer des milliers de designers.Cette

(Conseils techniques et de conception)

La navigation privée - Qu'est-ce que c'est et ce qu'il n'est pas

La navigation privée - Qu'est-ce que c'est et ce qu'il n'est pas

Tous les navigateurs vous offrent un moyen d'effectuer une navigation soi-disant privée, et les descriptions sont également dans la même veine. Chrome nommé l'option Mode Incognito, Firefox et Safari appellent la navigation privée, tandis que IE l'appelle InPrivate .Les descriptions vous donnent l'impression que si vous ne voulez pas que votre navigation soit enregistrée, vous devriez passer à ce mode et vous devriez être en sécurité. Cependan

(Conseils techniques et de conception)