Таблица стилей брендинга Scss

Question

Я хотел использовать решение Scss для простого изменения стилей на веб-сайте с несколькими фирменными дочерними сайтами. Моя цель состояла в том, чтобы получить массивы для элементов (классов, идентификаторов, тегов), которые имеют общие свойства стиля и имеют только те массивы, которые нужно редактировать при настройке фирменных стилей.

Я придумала следующее решение, которое прекрасно работает, однако ... Разве следующее не может быть сделано более умным способом? то есть меньше кусков "$ array ... + $ all .. + @each"? Надеюсь, вы понимаете, что я имею в виду, когда видите мой текущий синтаксис:

// All elements with background colors
$arrayElementsWithBackgroundColor: (
    '.example-1',
    '.example-2' // etc.
);

$allElementsWithBackgroundColor: ();

@each $item in $arrayElementsWithBackgroundColor {
    $allElementsWithBackgroundColor: append($allElementsWithBackgroundColor, unquote('#{$item}'), 'comma');
};

// All elements with background gradients
$arrayElementsWithBackgroundColorGradient: (
    '.example-3',
    '.example-4'  // etc.
);

$allElementsWithBackgroundColorGradient: ();

@each $item in $arrayElementsWithBackgroundColorGradient {
    $allElementsWithBackgroundColorGradient: append($allElementsWithBackgroundColorGradient, unquote('#{$item}'), 'comma');
};

// All elements with semi-transparent background colors
$arrayElementsWithBackgroundColorSemiTransparent: (
    '.example-5',
    '.example-6'  // etc.
);

$allElementsWithBackgroundColorSemiTransparent: ();

@each $item in $arrayElementsWithBackgroundColorSemiTransparent {
    $allElementsWithBackgroundColorSemiTransparent: append($allElementsWithBackgroundColorSemiTransparent, unquote('#{$item}'), 'comma');
};

// All elements with border colors
$arrayElementsWithBorderColor: (
    '.example-7',
    '.example-8'  // etc.
);

$allElementsWithBorderColor: ();

@each $item in $arrayElementsWithBorderColor {
    $allElementsWithBorderColor: append($allElementsWithBorderColor, unquote('#{$item}'), 'comma');
};

// All elements with text colors
$arrayElementsWithTextColor: (
    '.example-9',
    '.example-10'  // etc.
);

$allElementsWithTextColor: ();

@each $item in $arrayElementsWithTextColor {
    $allElementsWithTextColor: append($allElementsWithTextColor, unquote('#{$item}'), 'comma');
};

Эти куски - то, где я собираю свои массивы элементов, которые будут маркированы. После этого я использую такие как:

body {

    @at-root #{&}.brand-1 {
        #{$allElementsWithBackgroundColor} { background: $brand-1; }
        #{$allElementsWithBackgroundColorGradient} { background: $brand-1-gradient; }
        #{$allElementsWithBackgroundColorSemiTransparent} { background: rgba($brand-1,0.8); }
        #{$allElementsWithBorderColor} { border-color: $brand-1; }
        #{$allElementsWithTextColor} { color: $brand-1; }
    }

    @at-root #{&}.brand-2 {
        #{$allElementsWithBackgroundColor} { background: $$brand-2; }
        #{$allElementsWithBackgroundColorGradient} { background: $$brand-2-gradient; }
        #{$allElementsWithBackgroundColorSemiTransparent} { background: rgba($$brand-2,0.8); }
        #{$allElementsWithBorderColor} { border-color: $$brand-2; }
        #{$allElementsWithTextColor} { color: $$brand-2; }
    }

    @at-root #{&}.brand-3 {
        #{$allElementsWithBackgroundColor} { background: $brand-3; }
        #{$allElementsWithBackgroundColorGradient} { background: $brand-3-gradient; }
        #{$allElementsWithBackgroundColorSemiTransparent} { background: rgba($brand-3,0.8); }
        #{$allElementsWithBorderColor} { border-color: $brand-3; }
        #{$allElementsWithTextColor} { color: $brand-3; }
    }

    @at-root #{&}.brand-4 {
        #{$allElementsWithBackgroundColor} { background: $brand-4; }
        #{$allElementsWithBackgroundColorGradient} { background: $brand-4-gradient; }
        #{$allElementsWithBackgroundColorSemiTransparent} { background: rgba($brand-4-alt,0.8); }
        #{$allElementsWithBorderColor} { border-color: $brand-4; }
        #{$allElementsWithTextColor} { color: $brand-4; }
    }
}

Answer 1

Вы можете рассмотреть возможность использования карт, например:

//  _brands.scss 
$brand-1: red;
$brand-2: green;
$brand-3: orange;
$brand-4: blue;
$brand-1-gradient: linear-gradient(to top, red, red);
$brand-2-gradient: linear-gradient(to top, green, green);
$brand-3-gradient: linear-gradient(to top, orange, orange);
$brand-4-gradient: linear-gradient(to top, blue, blue);


$brands: (
    brand-1 : (
        //  note! you can add more properties to each style map  
        '.example-1, .example-2':  (background: $brand-1, color: magenta ),  
        '.example-3, .example-4':  (background: $brand-1-gradient ),
        '.example-5, .example-6':  (background: rgba($brand-1, 0.8) ),
        '.example-7, .example-8':  (border-color: $brand-1 ),
        '.example-9, .example-10': (color: $brand-1 )
    ),
    brand-2 : (
        '.example-1, .example-2':  (background: $brand-2 ),
        '.example-3, .example-4':  (background: $brand-2-gradient ),
        '.example-5, .example-6':  (background: rgba($brand-2, 0.8) ),
        '.example-7, .example-8':  (border-color: $brand-2 ),
        '.example-9, .example-10': (color: $brand-2 )
    ),
    brand-3 : (
        '.example-1, .example-2':  (background: $brand-3 ),
        '.example-3, .example-4':  (background: $brand-4-gradient ),
        '.example-5, .example-6':  (background: rgba($brand-3, 0.8) ),
        '.example-7, .example-8':  (border-color: $brand-3 ),
        '.example-9, .example-10': (color: $brand-3 )
    ),
    brand-4 : (
        '.example-1, .example-2':  (background: $brand-4 ),
        '.example-3, .example-4':  (background: $brand-4-gradient ),
        '.example-5, .example-6':  (background: rgba($brand-4, 0.8) ),
        '.example-7, .example-8':  (border-color: $brand-4 ),
        '.example-9, .example-10': (color: $brand-4 )
    )
);



//  brands.scss
@import '_brands.scss'
body {
    @each $brand, $selectors in $brands {
        @at-root #{&}.#{$brand} {
            @each $selector, $style in $selectors {            
                #{$selector}{ 
                    @each $property, $value in $style {
                        #{$property}: $value; 
                    }
                }
            }
        }
    } 
}

Вы также можете разделить каждый бренд на отдельные таблицы стилей, используя миксин

//  add to _brand.scss
@mixin brand($brand-name) {
    body {
        @at-root #{&}.#{$brand-name} {
            @each $selector, $style in map-get($brands, $brand-name) {            
                #{$selector}{ 
                    @each $property, $value in $style {
                        #{$property}: $value; 
                    }
                }
            }
        }
    } 
}  


//  brand1.scss
@import '_brands.scss'; 
@include brand(brand-1);

//  brand2.scss
@import '_brands.scss'; 
@include brand(brand-2);

//  brand3.scss
@import '_brands.scss'; 
@include brand(brand-3);

//  brand4.scss
@import '_brands.scss'; 
@include brand(brand-4);