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