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.
La collection ultime de tutoriels 3DS Max
Soit vous voulez produire une animation 3D cool ou un modèle, le logiciel de rendu d'animation 3D et de modélisation 3D le plus complet à cet effet est 3DS Max. Le logiciel dispose d'une gamme de fonctionnalités très utiles pour les artistes d'effets visuels, les animateurs 3D, les développeurs de jeux, etc.Cepen
Google I / O 2017: ce que Google est en train de planifier pour VR & AR
Après s'être concentré en grande partie sur les nombreuses fonctionnalités et services qui viendront dans l'écosystème de Google en 2017, Google a tenu un deuxième discours à I / O 2017 qui se concentre uniquement sur deux sujets: la réalité virtuelle et la réalité augmentée .Pour cette keynote d'I / O 2017, Google a développé les positions de Daydream et de Tango dans un proche avenir, et ces changements sont plutôt significatifs pour les aspirations VR / AR de l'entreprise. Sans plus tard
