Catégorie : LESS

Mixins et astuces LESS

[SASS][LESS] BEM, Block Element Modifier, astuces et bonnes pratiques

Ressources en ligne sur BEM, Block Element Modifier

Une liste de ressources qui m’ont aidé à comprendre la méthodologie BEM:

Example perso avec un store locator

Regarder notamment le principe d’imbrication de plusieurs BLOCKs et la présence de la classe helper .is-store--china (comment elle est utilisée dans le code LESS ensuite).

Code HTML

Code CSS (LESS)

Première explication sous forme de code commenté (pour comprendre)

…mais, ATTENTION: ce n’est pas comme ça que vous devez organiser votre code. Voir la section suivante.

Organisation du code LESS en composants/BLOCKs

Valable pour SASS/SCSS également.

L’organisation du code en parties représentant chacune un block/composant permet le respect du principe d’inception: pas plus de 3 niveaux d’imbrication (à l’exception de la déclaration de :pseudo-classes).

Autre exemple, avec du HTML cette fois:

Le h3 class="store__name" s’affichera:

  • en rouge si la classe store--is-boutique est présente sur l’élément parent
  • en gris si la classe store--is-retailer est présente sur l’élément parent

Les autres styles appliqués au h3 class="store__name" seront affectés aux deux.

Exploitation d’une classe helper .is-store--china

L’organisation du code en parties représentant chacune un block/composant est reprise. La classe helper s’intercale au besoin.

Pour <div class="store-locator">, toutes les bordures seront pink.

Pour <div class="store-locator is-store--china">, toutes les bordures seront red.

[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 :

[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 |