Catégorie : LESS

Mixins et astuces LESS

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

16/06/2022 / admin

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

<div
    id="storeLocator"
    class="store-locator is-store--china">
        <div class="store-locator__map">
            <div id="mapControl" class="map-control">
                <input
                    type="text"
                    id="autocompleteField"
                    class="map-control--autocomplete__field"
                    placeholder="Enter a place">
                <button
                    id="geolocationButton"
                    class="map-control--geolocation__button">
                    <span>Me localiser</span>
                </button>
            </div>
            <div id="map" class="map">
                <?php // MUST remain empty; here comes the map ?>
            </div>
        </div>
        <div class="store-locator__result">
            <div class="result-filter"></div>
            <div class="result-list">
                <p>Result...</p>
            </div>
        </div>
    </div>
</div>

<div

id="storeLocator"

class="store-locator is-store--china">

<input

type="text"

id="autocompleteField"

class="map-control--autocomplete__field"

placeholder="Enter a place">

<button

id="geolocationButton"

class="map-control--geolocation__button">

<span>Me localiser</span>

</button>

</div>

<?php // MUST remain empty; here comes the map ?>

</div>

<p>Result...</p>

</div>

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.

.store-locator {} /* store-locator est un nouveau BLOCK */
.store-locator__map {} /* la map est un ELEMENT (une partie) du store locator comme la main est une partie de la personne */

    .map-control {} /* map-control est un nouveau BLOCK, enfant du BLOCK store-locator */
        .map-control--autocomplete {} /* est un MODIFIER (autocomplete est un type/genre) de map-control comme la femme est un type/genre de personne */
            .map-control--autocomplete__field {} /* field est ELEMENT (une partie) de autocomplete */
        .map-control--geolocation {} /* est un MODIFIER (geolocation est un autre type/genre) de map-control */
            .map-control--geolocation__button {} /* button est un ELEMENT (une partie) de geolocation */

    .map {} /* map est un nouveau BLOCK, enfant du BLOCK store-locator */

.store-locator__result {} /* les result sont un ELEMENT (une partie) du store locator comme la main est une partie de la personne */

    .result-filter {} /* result-filter est un nouveau BLOCK, enfant du BLOCK store-locator */

    .result-list {} /* result-list est un nouveau BLOCK, enfant du BLOCK store-locator (c'est une liste de boutiques ou de retailers mais, par principe d'abstraction, on ne le précise pas */

.store-locator {} /* store-locator est un nouveau BLOCK */

.store-locator__map {} /* la map est un ELEMENT (une partie) du store locator comme la main est une partie de la personne */

.map-control {} /* map-control est un nouveau BLOCK, enfant du BLOCK store-locator */

.map-control--autocomplete {} /* est un MODIFIER (autocomplete est un type/genre) de map-control comme la femme est un type/genre de personne */

.map-control--autocomplete__field {} /* field est ELEMENT (une partie) de autocomplete */

.map-control--geolocation {} /* est un MODIFIER (geolocation est un autre type/genre) de map-control */

.map-control--geolocation__button {} /* button est un ELEMENT (une partie) de geolocation */

.map {} /* map est un nouveau BLOCK, enfant du BLOCK store-locator */

.store-locator__result {} /* les result sont un ELEMENT (une partie) du store locator comme la main est une partie de la personne */

.result-filter {} /* result-filter est un nouveau BLOCK, enfant du BLOCK store-locator */

.result-list {} /* result-list est un nouveau BLOCK, enfant du BLOCK store-locator (c'est une liste de boutiques ou de retailers mais, par principe d'abstraction, on ne le précise pas */

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).

.store-locator {
    display: block;

    &__map {
        height: 100%;
    }

    &__result {}
}

.service-center {}

.boutique-selector {}

.map-control {
    max-width: 50%;

    &--autocomplete {

        &__field {}
    }

    &--geolocation {

        &__button {

            &:hover {}
        }
    }
}

.map {
    height: 100%;
}

.store-locator {

display: block;

&__map {

height: 100%;

}

&__result {}

}

.service-center {}

.boutique-selector {}

.map-control {

max-width: 50%;

&--autocomplete {

&__field {}

}

&--geolocation {

&__button {

&:hover {}

}

.map {

height: 100%;

}

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.

<a class="store store--is-retailer" href="#">
    <h3 class="store__name">Bartorelli 1882 Spa</h3>

1 2	<a class="store store--is-retailer" href="#"> <h3 class="store__name">Bartorelli 1882 Spa</h3>

.store {

    &--is-boutique & {
        &__name {
            color: #c40d2e;
        }
    }

    &--is-retailer & {
        &__name {
            color: #555555;
        }
    }

    &__name {
        font-weight: 700;
        font-size: 16px;
        text-transform: uppercase;
    }

.store {

&--is-boutique & {

&__name {

color: #c40d2e;

}

&--is-retailer & {

&__name {

color: #555555;

}

&__name {

font-weight: 700;

font-size: 16px;

text-transform: uppercase;

}

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.

.store-locator {
    border: 12px solid pink;
    &.is-store--china {
        border: 12px solid red;
    }
    &__map {
        border: 12px solid pink;
        .is-store--china & {
            border: 12px solid red;
        }
    }
}

.map-control {
    border: 12px solid pink;
    &--autocomplete {
        &__field {
            border: 6px solid pink !important;
        }
    }
    .is-store--china & {
        border: 12px solid red;
        &--autocomplete {
            &__field {
                border: 6px solid red !important;
            }
        }
    }
}

.store-locator {

border: 12px solid pink;

&.is-store--china {

border: 12px solid red;

}

&__map {

border: 12px solid pink;

.is-store--china & {

border: 12px solid red;

}

.map-control {

border: 12px solid pink;

&--autocomplete {

&__field {

border: 6px solid pink !important;

}

.is-store--china & {

border: 12px solid red;

&--autocomplete {

&__field {

border: 6px solid red !important;

}

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

12/06/2018 / admin

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

.Couleur {
  .facet-mark {
    &:before {
      display: inline-block;
      vertical-align: sub;
      content: "" !important;
      width: 18px;
      height: 18px;
      border: 1px solid #ededed;
    }
  }
  @facetColors: Beige #DEB887, 
                Blanc #ffffff, 
                Bleu #00b0f0, 
                Gris #777777, 
                Jaune #ffe209, 
                Marron #974706, 
                Multicolore linear-gradient(to right, #9400D3 0%,#4B0082 (100%/7)*2,#0000FF (100%/7)*3,#00FF00 (100%/7)*4,#FFFF00 (100%/7)*5, #FF7F00 (100%/7)*6,#FF0000 100%), 
                Noir #000000, 
                Orange #fb6e05, 
                Rose #ff338a, 
                Rouge #ff0000, 
                Vert #00b050, 
                Violet #800080;
  .for(@facetColors); .-each(@value) {
      @name:  extract(@value, 1);
      .@{name} {
        .facet-mark {
          &:before {
            background: extract(@value, 2);
          }
        }
      }
  }
}

.Couleur {

.facet-mark {

&:before {

display: inline-block;

vertical-align: sub;

content: "" !important;

width: 18px;

height: 18px;

border: 1px solid #ededed;

}

@facetColors: Beige #DEB887,

Blanc #ffffff,

Bleu #00b0f0,

Gris #777777,

Jaune #ffe209,

Marron #974706,

Multicolore linear-gradient(to right, #9400D3 0%,#4B0082 (100%/7)*2,#0000FF (100%/7)*3,#00FF00 (100%/7)*4,#FFFF00 (100%/7)*5, #FF7F00 (100%/7)*6,#FF0000 100%),

Noir #000000,

Orange #fb6e05,

Rose #ff338a,

Rouge #ff0000,

Vert #00b050,

Violet #800080;

.for(@facetColors); .-each(@value) {

@name: extract(@value, 1);

.@{name} {

.facet-mark {

&:before {

background: extract(@value, 2);

}

Rendu CSS :

.Couleur .facet-mark:before {
  display: inline-block;
  vertical-align: sub;
  content: "" !important;
  width: 18px;
  height: 18px;
  border: 1px solid #ededed;
}
.Couleur .Beige .facet-mark:before {
  background: #000;
}
.Couleur .Blanc .facet-mark:before {
  background: #fff;
}
.Couleur .Bleu .facet-mark:before {
  background: #00b0f0;
}
.Couleur .Gris .facet-mark:before {
  background: #777;
}
.Couleur .Jaune .facet-mark:before {
  background: #ffe209;
}
.Couleur .Marron .facet-mark:before {
  background: #974706;
}
.Couleur .Multicolore .facet-mark:before {
  background: #000;
}
.Couleur .Noir .facet-mark:before {
  background: #000;
}
.Couleur .Orange .facet-mark:before {
  background: #fb6e05;
}
.Couleur .Rose .facet-mark:before {
  background: #ff338a;
}
.Couleur .Rouge .facet-mark:before {
  background: red;
}
.Couleur .Vert .facet-mark:before {
  background: #00b050;
}
.Couleur .Violet .facet-mark:before {
  background: #000;
}

.Couleur .facet-mark:before {

display: inline-block;

vertical-align: sub;

content: "" !important;

width: 18px;

height: 18px;

border: 1px solid #ededed;

}

.Couleur .Beige .facet-mark:before {

background: #000;

}

.Couleur .Blanc .facet-mark:before {

background: #fff;

}

.Couleur .Bleu .facet-mark:before {

background: #00b0f0;

}

.Couleur .Gris .facet-mark:before {

background: #777;

}

.Couleur .Jaune .facet-mark:before {

background: #ffe209;

}

.Couleur .Marron .facet-mark:before {

background: #974706;

}

.Couleur .Multicolore .facet-mark:before {

background: #000;

}

.Couleur .Noir .facet-mark:before {

background: #000;

}

.Couleur .Orange .facet-mark:before {

background: #fb6e05;

}

.Couleur .Rose .facet-mark:before {

background: #ff338a;

}

.Couleur .Rouge .facet-mark:before {

background: red;

}

.Couleur .Vert .facet-mark:before {

background: #00b050;

}

.Couleur .Violet .facet-mark:before {

background: #000;

}

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

30/04/2018 / admin

.js-quick-view {
  ul.rollover-content.top.in li.rollover-item:first-child & {
    border: 4px solid red !important;
  }
}

.js-quick-view {

ul.rollover-content.top.in li.rollover-item:first-child & {

border: 4px solid red !important;

}

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

05/04/2017 / admin

…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.

@veil-color: mix(@brand-tertiary, @text-color, 40%, 60%);

.rating{
  background: fade(@veil-color,10%); 
}

@veil-color: mix(@brand-tertiary, @text-color, 40%, 60%);

.rating{

background: fade(@veil-color,10%);

}

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

31/05/2016 / admin

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

@asideWidth: 30px;

.post {
    width: calc(100% - @asideWidth);
}

@asideWidth: 30px;

.post {

width: calc(100% - @asideWidth);

}

Adapter son code comme suit :

@asideWidth: 30px;

.post {
    width: calc(~"100% - " @asideWidth);
}

@asideWidth: 30px;

.post {

width: calc(~"100% - " @asideWidth);

}

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

06/10/2015 / admin

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.

.museo-variant(@weight){
  @filename-root: MuseoSansRounded;
  font-family: '@{filename-root}@{weight}';
  font-weight: normal;
}

.museo-variant(@weight){

@filename-root: MuseoSansRounded;

font-family: '@{filename-root}@{weight}';

font-weight: normal;

}

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

27/02/2015 / admin

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

ul.mon-menu {
  .simple-inline-nav("|"; 6px);
}

ul.mon-menu {

.simple-inline-nav("|"; 6px);

}

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 :

ul.mon-menu {
  .simple-inline-nav("|"; 6px; add-first);
}

ul.mon-menu {

.simple-inline-nav("|"; 6px; add-first);

}

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 :

ul.mon-menu {
  .simple-inline-nav("|"; 6px; add-last);
}

ul.mon-menu {

.simple-inline-nav("|"; 6px; add-last);

}

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 :

ul.mon-menu {
  .simple-inline-nav("|"; 6px; add-both);
}

ul.mon-menu {

.simple-inline-nav("|"; 6px; add-both);

}

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

/*
  Simple Inline Nav mixin

  Usage :

  1. Getting a simple inline nav with a separator between each menu entries :
      .simple-inline-nav("|"; 6px);
      =>  entry 1 | entry 2 | entry 3
  2. Getting a simple inline nav with a separator between each entries and a separator before the first entry :
      .simple-inline-nav("|"; 6px; add-first);
      =>  | entry 1 | entry 2 | entry 3
  3. Getting a simple inline nav with a separator between each entries and a separator after the last entry :
      .simple-inline-nav("|"; 6px; add-last);
      =>  entry 1 | entry 2 | entry 3 |
  4. Getting a simple inline nav with a separator between each entries and separators before and after the first and the last entries :
      .simple-inline-nav("|"; 6px; add-both);
      =>  | entry 1 | entry 2 | entry 3 |
*/

.simple-inline-nav(@separator; @padding) {
  > li {
    display: inline-block;
    padding-right: @padding;

    &:after {
      content: @separator;
      margin-left: @padding;
    }
  }

  > li:last-child {
    padding-right: 0;

    &:after {
        content: "";
    }
  }
}

.simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-first) {
  .simple-inline-nav(@separator; @padding);
  > li:first-child {
    padding-left: @padding;

    &:before {
      content: @separator;
      margin-right: @padding;
    }
  }
}

.simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-last) {
  .simple-inline-nav(@separator; @padding);
  > li:last-child {
    padding-right: @padding;

    &:after {
      content: @separator;
      margin-left: @padding;
    }
  }
}

.simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-both) {
  .simple-inline-nav(@separator; @padding);
  > li:first-child {
    padding-left: @padding;

    &:before {
      content: @separator;
      margin-right: @padding;
    }
  }

  > li:last-child {
    padding-right: @padding;

    &:after {
      content: @separator;
      margin-left: @padding;
    }
  }
}

Simple Inline Nav mixin

Usage :

1. Getting a simple inline nav with a separator between each menu entries :

.simple-inline-nav("|"; 6px);

=> entry 1 | entry 2 | entry 3

2. Getting a simple inline nav with a separator between each entries and a separator before the first entry :

.simple-inline-nav("|"; 6px; add-first);

=> | entry 1 | entry 2 | entry 3

3. Getting a simple inline nav with a separator between each entries and a separator after the last entry :

.simple-inline-nav("|"; 6px; add-last);

=> entry 1 | entry 2 | entry 3 |

4. Getting a simple inline nav with a separator between each entries and separators before and after the first and the last entries :

.simple-inline-nav("|"; 6px; add-both);

=> | entry 1 | entry 2 | entry 3 |

.simple-inline-nav(@separator; @padding) {

> li {

display: inline-block;

padding-right: @padding;

&:after {

content: @separator;

margin-left: @padding;

}

> li:last-child {

padding-right: 0;

&:after {

content: "";

}

.simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-first) {

.simple-inline-nav(@separator; @padding);

> li:first-child {

padding-left: @padding;

&:before {

content: @separator;

margin-right: @padding;

}

.simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-last) {

.simple-inline-nav(@separator; @padding);

> li:last-child {

padding-right: @padding;

&:after {

content: @separator;

margin-left: @padding;

}

.simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-both) {

.simple-inline-nav(@separator; @padding);

> li:first-child {

padding-left: @padding;

&:before {

content: @separator;

margin-right: @padding;

}

> li:last-child {

padding-right: @padding;

&:after {

content: @separator;

margin-left: @padding;

}

Articles récents

Catégories

Archives

Méta

Catégorie : LESS

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

Ressources en ligne sur BEM, Block Element Modifier

Example perso avec un store locator

Code HTML

Code CSS (LESS)

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

Organisation du code LESS en composants/BLOCKs

Autre exemple, avec du HTML cette fois:

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

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

[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

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

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

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

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 :

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 :

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 :

Ressources en ligne sur BEM, Block Element Modifier

Example perso avec un store locator

Code HTML

Code CSS (LESS)

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

Organisation du code LESS en composants/BLOCKs

Autre exemple, avec du HTML cette fois:

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

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

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 :

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 :

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 :

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