SASS多個類共享相同的和不同的CSS

Question

我有3個HTML元素

<div id="top-bg-animate-0"></div>   
<div id="top-bg-animate-1"></div> 
<div id="top-bg-animate-2"></div> 

都具有相同的CSS

#top-bg-animate-0, 
#top-bg-animate-1, 
#top-bg-animate-2 { 
    position:absolute; 
    top:0; left:0; 
    width:100%; 
    bottom:-50%; 
    display:block; 
    background-size:cover; 
    background-position:top left; 
    background-repeat:no-repeat; 
    opacity:0; 
} 

和獨特的CSS太

#top-bg-animate-0 { 
    background-image:url(../images/level3.png); 
    transform:translateY(-20%); 
    -webkit-transform:translateY(-20%); 
    transition:opacity 1s, visibility 1s, transform 10s; 
    -webkit-transition:opacity 1s, visibility 1s, transform 10s; 
} 
    #top-bg-animate-1{ 
    background-image:url(../images/level2.png); 
    transform:translateY(-30%); 
    -webkit-transform:translateY(-30%); 
    transition:opacity 1s, visibility 1s, transform 9s; 
    -webkit-transition:opacity 1s, visibility 1s, transform 9s; 
} 
    #top-bg-animate-2 { 
    background-image:url(../images/level1.png); 
    transform:translateY(-30%); 
    -webkit-transform:translateY(-30%); 
    transition:opacity 1s, visibility 1s, transform 6s; 
    -webkit-transition:opacity 1s, visibility 1s, transform 6s; 
} 

我想寫這個在SAAS的方式也許mixins將幫助我，但我也不知道如何築巢像class1,class2,class3我卡住了幫我！

Answer 1

你可以使用這個mixin，它接受一個帶有它們樣式的類的映射（列表），以及它們所有的樣式。

// a mixin that accepts a $defs parameter. 
@mixin bg-animations($defs) { 

    // for simplicity, a sass map is basically an array. 
    // check the typeof to be map. 
    @if type-of($defs) == "map" { 
    // if the map $defs has a key "common" 
    @if map-has-key($defs, common) { 
     // save common in a variable called $common 
     $common: map-get($defs, common); 
     // "map-remove" removes keys and returns a new array. 
     // redefine $defs as itself without common. 
     $defs: map-remove($defs, common); 
     // "map-keys" returns a list of keys 
     // "#{}" is string interpolation, to spit all keys as classes. 
     #{map-keys($defs)} { 
     // loop over each element in $common map 
     @each $key, $value in $common { 
      // key : value. string interpolation is needed for key 
      // so it gets evaluated as style name 
      #{$key}: $value; 
     } 
     } 
    } 
    //now whether there is a common or not, its been removed from $defs 
    // loop over $defs which contains all class names and styles 
    @each $className, $styles in $defs { 
     // set className 
     #{$className} { 
     // loop over every style for this specific className 
     @each $key, $value in $styles { 
      #{$key}: $value; 
     } 
     } 
    } 
    } 
} 

，你可以使用它像這樣：

// a map with all the classes and their styles. 
// common is a preserved optional keyword for the bg-animations mixin, which puts styles for all the classes. 
$defs: (
    #top-bg-animate-0: (
    transition: (opacity 1s, visibility 1s, transform 10s), 
    background-image:url(../images/level3.png), 
    transform:translateY(-20%) 
), 
    #top-bg-animate-1: (
    transition: (opacity 1s, visibility 1s, transform 9s), 
    background-image:url(../images/level2.png), 
    transform:translateY(-30%) 
), 
    #top-bg-animate-2: (
    transition: (opacity 1s, visibility 1s, transform 6s), 
    background-image:url(../images/level3.png), 
    transform:translateY(-30%) 
), 
    common: (
    position:absolute, 
    top:0, 
    left:0, 
    width:100%, 
    bottom:-50%, 
    display:block, 
    background-size:cover, 
    background-position: top left, 
    background-repeat:no-repeat, 
    opacity:0 
) 
); 
// call bg-animations and pass the map to it. 
@include bg-animations($defs);