@include root-bg($list);

Documentation – Woody ROOT Mixin

Features :

Ajoute une ou plusieurs couleurs de backgrounds à la racine d’une branche de sélecteurs (mixin root-bg).
Reconnaissance automatique des sélecteurs où le BG est applicable (par exemple : woody-component).
3 mixins : root, root-bg, root-bg-colors.

Mixin root

Exemple 1 :

.selecteur1 {
    .selecteur2 {
        @include root('.scrolled') {
            color: red;
        }
    }
}

Output css:

.scrolled .selecteur1 .selecteur2 {color:red;}

Exemple 2 :

.selecteur1 {
    .selecteur2 {
        @include root('.scrolled', true) {
            color: red;
        }
    }
}

Output css:

.selecteur1.scrolled .selecteur2 {color:red;}

Mixin root-bg

Exemple 1 :

$dark-list: black, darkgray;
.selecteur1 {
    .selecteur2 {
        @include root-bg($dark-list) {
            color: white;
        }
    }
}

Output css:

.bg-black .scrolled .selecteur1 .selecteur2, [class*="bg-"] .bg-black .scrolled .selecteur1 .selecteur2, .bg-darkgray .scrolled .selecteur1 .selecteur2, [class*="bg-"] .bg-darkgray .scrolled .selecteur1 .selecteur2 {color:white;}

Exemple 2 :

.selecteur1 {
    .selecteur2 {
        @include root-bg(primary) {
            color: white;
        }
    }
}

Output css:

.bg-primary .scrolled .selecteur1 .selecteur2, [class*="bg-"] .bg-primary .scrolled .selecteur1 .selecteur2 {color:white;}