SCSS 数组品牌样式表

Question

我想使用 Scss 解决方案轻松修改具有多个品牌子网站的网站上的样式。我的目标是获取共享样式属性的元素（类、ID、标签）的数组，并且在调整品牌样式时只对这些数组进行编辑。

我想出了以下工作正常的解决方案，但是...不能以更智能的方式完成以下操作吗？即更少的“$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; 
                    }
                }
            }
        }
    } 
}

您还可以选择使用 mixin 将每个品牌拆分为单独的样式表

//  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);