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; }