CategoryLESS

Mixins et astuces LESS

[LESS] Un mixin pour boucler dans un tableau contenant des valeurs allant par pairs

Attention: le plugin for.less utilisé dans l’exemple ci-dessous est déprécié selon un commenatire laissé dans le code source de l’auteur. Il faut désormais utiliser List/Array manipulation for Less.

Source: Loop over an array of name value pairs in LESS et mixin sous Git.

CSS color codes & names (tableaux de correspondances Nom de couleur > Code hexadécimal).

Mixin LESS (ne pas oublier d’inclure le mixin for.less) :

Rendu CSS :

[SASS][LESS] Remonter le DOM en CSS en utilisant l’esperluette

[CSS] Ne pas hériter de l’opacité d’un parent avec les Color Operation Functions de LESS ou SASS

…et notamment la fonction fade.

Source SASS: Mixins for semi-transparent colors.

Source LESS (notre exemple ci-dessous) : la doc de LESS à propos des Color Operation Functions, I do not want to inherit the child opacity from the parent in CSS et Modify alpha opacity of LESS variable.

[LESS] Propriété CSS Calc : petite subtilité de déclaration

La propriété CSS calc ne fonctionne pas lorsqu’on la déclare comme en CSS :

Adapter son code comme suit :

[LESS][Mixin] Concatener des chaînes de caractères

Source : Concatenate strings in LESS.

Dans mon exemple, je charge différentes variations de la même police (MuseoSansRounded300,500,700 et 900) et je souhaite créer un mixin dont l’argument me permettra de choisir quelle variante je souhaite utiliser pour une classe CSS donnée.

[LESS][Mixin] Une navigation simple en mode « inline » avec les guards

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée :

Résultat : entrée 1 | entrée 2 | entrée 3

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et un séparateur supplémentaire devant la première entrée :

Résultat : | entrée 1 | entrée 2 | entrée 3

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et un séparateur supplémentaire derrière la dernière entrée :

Résultat : entrée 1 | entrée 2 | entrée 3 |

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et deux séparateurs supplémentaires placés respectivement devant et derrière la première et la dernière entrée :

Résultat : | entrée 1 | entrée 2 | entrée 3 |

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑