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.

Les bases de REST et du développement de l'API RESTful

Les bases de REST et du développement de l'API RESTful

Les développeurs Web parlent souvent des principes REST et de l'architecture des données RESTful, car c'est un aspect crucial du développement moderne, mais parfois cela peut être incroyablement déroutant. REST n'est pas une technologie en soi, mais plutôt une méthode de création d'API avec certains principes organisationnels . Ces pr

(Conseils techniques et de conception)

45 astuces Photoshop astucieux que vous devez savoir

45 astuces Photoshop astucieux que vous devez savoir

Sans aucun doute, Photoshop est l'un des logiciels d'édition d'image les plus préférés et les plus populaires pour les graphistes, les peintres numériques et les photographes. Avec chaque révision, Adobe ajoute plus de puissance au programme.Dans cet article, nous allons examiner 45 conseils et astuces que vous pouvez utiliser dans Photoshop; le genre de trucs que vous auriez aimé connaître plus tôt. Certain

(Conseils techniques et de conception)