Question

我有两个不同的CSS类，它们都应该使用相同的子类，如下所示：

.front {
  display:flex;
  justify-content: center;
  align-items: center;

  .instructions {
    position:absolute;
    etc.
  }
 }

.back {
  padding: 5%;
  etc.;

  .instructions {
    position:absolute;
    etc.
  }
}

有没有办法以干燥的方式做到这一点？一种解决方案是让.instructions自己成为顶级选择器，但我想在这里保留层次结构的概念。谢谢！

Answer 1

而不是@mixin，对于这项工作看起来过于复杂，您可以使用@extend

这是Sass最有用的功能之一。使用@extend让您从一个选择器共享一组CSS属性到另一个选择器。的它帮助保持你的Sass非常干燥。

关于DRY的重点是我的，因为这就是你在问什么

类似的东西：

.instructions {
    position:absolute;
 }

.front {
  display:flex;
  justify-content: center;
  align-items: center;
  @extend .instructions

 }

.back {
  padding: 5%;
  @extend .instructions
}

编译成：

.instructions, .front, .back {
  position: absolute;
}

.front {
  display: flex;
  justify-content: center;
  align-items: center;
}

.back {
  padding: 5%;
}

您可以看到演示here

Answer 2

您是否尝试过使用mixin？

mixin允许您创建要在整个站点中重用的CSS声明组。 http://sass-lang.com/guide#topic-6

定义一个mixin

@mixin instructions {
    position:absolute;
    etc.
}

并使用

.front {
  display:flex;
  justify-content: center;
  align-items: center;

  .instructions {
    @include instructions;
  }
 }

.back {
  padding: 5%;
  etc.;

  .instructions {
    @include instructions;
  }
}

您也可以将.instructions移到mixin：

@mixin instructions {
    .instructions {
        position:absolute;
        etc.
    }
}
.front {
  display:flex;
  justify-content: center;
  align-items: center;
  @include instructions;
 }

.back {
  padding: 5%;
  etc.;
  @include instructions;
}

Answer 3

这个怎么样？

    .front {
      display:flex;
      justify-content: center;
      align-items: center;
     }

    .back {
      padding: 5%;
      etc.;
    }

    .back, .front {
      .instructions {
        position:absolute;
        etc.
      }
    }

如何在不重复自己的情况下共享CSS子类

3 个答案: