时间戳

首页 > 解决方案 > 在 sass 中正确记录 h1...h6

css - 在 sass 中正确记录 h1...h6

问题描述

我目前正在学习 sass，我想将我的 css 重写为 sass 进行学习。我想知道如何在 sass 中保存 h1 ... h6。我做得好吗？

这是 sass 中的正确记录吗？ 

h1 {
  font-family: "Aleo", sans-serif;
  font-weight: 700;
  margin: 0 0 20px 0;
  line-height: 1.5;
  color:#000; 
}

h2 {
  @extend h1;
  font-size: 44px;
}

h3 {
  @extend h1;
  font-size: 22px;
}

h4 {
  @extend h1;
  font-size: 20px;
  color:#9b9578; 
  font-weight: 400;
  text-transform: uppercase;
}

h5 {
  @extend h1;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
}

谢谢大家的建议！

标签： csssass

解决方案

您可以使用“mixin”和“include”事件。 

  <!-- Set your wants -->
    @mixin anything{
      font-family: "Aleo", sans-serif;
      font-weight: 700;
      margin: 0 0 20px 0;
      line-height: 1.5;
      color:#000; 
    }

<!-- and assign to your tag. -->
  h2{
      @include anything;
      font-size: 44px;
    }

我认为这是您寻找的正确方法。

推荐阅读