Catégorie : LESS

Mixins et astuces LESS

[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

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