sass - 如何引用先前定义的样式

Question

我是 sass 的新手，我在 .sass 文件中定义了 h1、h2、h3，我想做如下的事情：

h1 {
   font-size: 25px;
}

.section {
   h1 { font-size: h1.font-size - 5px; }
}

我知道语法不正确，但我认为你明白了要点。真的很感激。

Answer 1

您必须将值存储在变量中：

$h1-font-size: 25px;

h1 {
   font-size: $h1-font-size;

   .section & {
       font-size: $h1-font-size - 5;
   }
}

这将产生以下 CSS：

h1 { font-size: 25px; }
.section h1 { font-size: 20px; }