hideout-lastation.com
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.
CSS Picnic: bibliothèque CSS légère pour démarrer vos projets Web
Certains développeurs préfèrent des bibliothèques d'interface utilisateur détaillées, telles que Bootstrap, pour ses styles riches en fonctionnalités. Mais, il y a beaucoup de petites bibliothèques de CSS faites pour l' esthétique et la personnalisation subtiles de conception .Si vous cherchez une petite bibliothèque CSS élégante, je recommande Picnic CSS . C'est
Leçons d'auto-organisation que vous pouvez apprendre des étudiants allemands
Je vis en Allemagne depuis cinq ans et j'ai interagi avec des gens de presque tous les horizons de la vie. Quand je suis venu ici pour un programme de maîtrise, mon exposition la plus étendue a été avec des étudiants allemands.Ce groupe intéressant de personnes qui se mouchent bruyamment en classe et qui montrent leur gratitude au professeur en frappant sur le bureau à la fin de la conférence, possèdent aussi des compétences d'auto-organisation bien ancrées dans leur personnalité .Venant d
