Share
Vous connaissez très bien l'exercice. Vous voulez donner des coins arrondis à votre section de site Web avec CSS3? Ensuite, vous n'aurez besoin que de trois préfixes de fournisseur: webkit, moz et le formulaire recommandé par le W3C. N'est-ce pas une énorme perte de temps - sans parler de l'espace à l'écran? Et si, au lieu de cela, nous pourrions utiliser un classe fichier? Eh bien, nous pouvons! Je vais vous montrer comment aujourd'hui.
Si nous utilisons un outil comme LESS ou SASS, nous pouvons créer notre propre classe fichiers assez facilement. Vous ne savez pas de quoi je parle? Eh bien, d’abord, passez en revue ce conseil. Il vous apprendra exactement comment vous lancer avec Less.
Ensuite, nous devons créer un fichier de classes de base qui sera utilisé dans chaque projet. N'hésitez pas à stocker ce fichier où vous le souhaitez, cependant, dans la vidéo ci-dessus, j'utilise notre application très populaire (et exclusive) Structurer..
Nous ferons le premier ensemble, mais veillez à consulter le screencast pour plus de détails..
.border-radius (@radius: 3px) -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;
En ce qui concerne les conventions de dénomination, j’ai trouvé qu’il était plus judicieux d’utiliser le nom officiellement recommandé pour le nom de votre classe - dans ce cas, "rayon de la frontière."Pour déclarer des variables avec Less, nous les précédons d’un @ symbole. Dans ce cas, nous définissons une valeur par défaut de 3px, cependant, si nous devons remplacer cette valeur dans notre projet, c’est un jeu d'enfant!
#someElement .border-radius (10px);
À ce stade, il suffit de rincer et de répéter pour chaque propriété nécessitant plusieurs préfixes de fournisseur. Voici une poignée pour vous aider à démarrer:
.box-shadow (@x: 2px, @y: 2px, @blur: 5px, @spread: 0, @color: rgba (0,0,0, .6)) -webkit-box-shadow: @x @ y @blur @spread @ color; -moz-box-shadow: @x @y @blur @spread @color; box-shadow: @x @y @blur @spread @ color;
.transition (@ what: all, @length: 1s, @easing: aisance à l'entrée) -webkit-transition: @ what @length @easing; -moz-transition: @ what @length @easing; -o-transition: @ what @length @easing; transition: @ what @length @easing;
.box (@orient: horizontal, @pack: center, @align: center) display: -webkit-box; affichage: -moz-box; affichage: boîte; -webkit-box-orient: @orient; -moz-box-orient: @orient; box-orient: @orient; -webkit-box-pack: @pack; -moz-box-pack: @pack; boîte-pack: @pack; -webkit-box-align: @align; -moz-box-align: @align; box-align: @align;
.flex (@val: 1) -webkit-box-flex: @val; -moz-box-flex: @val; box-flex: @val;
J'aimerais entendre vos pensées à ce sujet. Si vous aimez l'idée, chargeons cette feuille de style.
Accentsconagua