Woody Root based Mixins

@include root-state() {}

La mixin root-state est basée sur la configuration de la variable de type MAP « $selectors-states ». Cette variable permet de déclarer des états en fonction des sélecteurs attribués.

Toute l’utilité de cette variable prend son sens lorsque nous ne souhaitons pas sortir de notre hiérarchie pour attribuer un état. De la même manière qu’une media query, cette mixin permet la simplification de l’écriture et la compréhension du code SCSS.

Paramètre 1 : $state
Type : Chaine de caractères (requis)
Description : Clé de la variable Map « $selectors-states »

Paramètre 2 : $stickySelector
Type : Booléen (optionnel, false par défaut)
Description : Lorsqu’il est sur true, les sélecteurs ajoutés restent au même niveau que le premier sélecteur : « body.selector ».

©Capture D’écran 2022 02 17 À 08.59.34

Exemple

.woody-component-headnavs {
    @include root-state(transparent) {
        position: absolute;
    }
    @include root-state(mini) {
        position: fixed;
    }
    #main-menu {
        @include root-state(mini) {
            background: $white;
        }
    }
}

SERA IDENTIQUE À :

.woodypage-front_page .woody-component-headnavs {position: absolute;}
.is-scrolled, .menu-is-open .woody-component-headnavs {position: fixed;}
.is-scrolled, .menu-is-open .woody-component-headnavs #main-menu {background: $white;}

@include at-state() {}

La mixin at-state est basée sur la configuration de la variable de type MAP « $selectors-states ». Cette variable permet de déclarer des états en fonction des sélecteurs attribués.

Contrairement à « root-state », « at-state » ne remonte pas les niveaux de hiérarchie de sélecteurs, et démarre depuis le dernier sélecteur (&).

Paramètre 1 : $state
Type : Chaine de caractères (requis)
Description : Clé de la variable Map « $selectors-states »

Paramètre 2 : $stickySelector
Type : Booléen (optionnel, false par défaut)
Description : Lorsqu’il est sur true, les sélecteurs suivants restent au même niveau : « body.selector ».

©Capture D’écran 2022 02 17 À 09.22.46

Exemple

@include at-state(transparent) {
    padding-top: 0 !important;
}

SERA IDENTIQUE À :

.woodypage-front_page {padding-top: 0 !important;}

@include root-add() {}

La mixin root-add permet de remonter la sélection hiérarchique jusqu’au sélecteur souhaité afin d’y insérer de nouveaux sélecteurs, sans pour autant quitter le niveau dans lequel on se situe.

Son utilisation est opportune lorsqu’un sélecteur comporte plusieurs états : Dans le cas d’une tab active, ou d’un hover à un niveau plus haut.

Paramètre 1 : $selector
Type : Chaine de caractères (requis)
Description : Sélecteur parent

Paramètre 2 : $add
Type : Chaine de caractères (requis)
Description : Sélecteur à ajouter.

©Capture D’écran 2022 02 17 À 09.41.44

Exemple

.card.overlayedCard {
    .card-link {
        .card-section {
            .card-title {
                padding-left: 0;
                @include root-add('.card-link', ':hover') {
                    padding-left: 25px;
                }
            }
        }
    }
}

SERA IDENTIQUE À :

.card.overlayedCard .card-link .card-section .card-title {padding-left: 0;}
.card.overlayedCard .card-link:hover .card-section .card-title {padding-left: 0;}