css - 大众字体大小在正常状态下不显示

Question

我在玩 codepen 时遇到了这种奇怪的现象。

我将各种字体大小设置为 vw 值，但它产生了一些奇怪的行为：

只有当我的元素处于悬停状态时，字体大小才会正确显示，如果不是，则会呈现为 0px。

这是我的 SCSS ：

$title:2vw;
$subtitle:1.5vw;
$text:1vw;

和

p {
color:$red;
font-size:$text;
}

h1 {
color:$black;
font-size:$title;
}

h2 {
color: lighten($black, 20%);
font-size:$subtitle;
}

这些元素在我的 html 中没有设置类，除了是 div 的子元素，其样式如下：

@mixin div {
   border:$border;
   border-radius:$border-radius;
   background-color:$green;
   color:$black;
   padding:$padding;
   margin:$margin;
   &:hover {
     background-color:$black;
     color:$green;
     h1 {
     color:$green;
   }
   p {
     color:$green;
   }
  }
 }

这是笔页面的链接： http: //codepen.io/rlacorne/pen/tgrbn

有谁知道发生了什么？这让我很烦。

提前致谢！