VW字体大小不在正常状态下显示

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

任何人都知道发生了什么？这让我烦恼。

提前致谢！