CSS变量高度无法正常工作

Question

当我在CSS中将高度设为变量$main-height时，我得到了一个奇怪的行为。

height: $main-height/2;

复选框检查结果

演示小提琴如下：

Hard coded height JSFiddle

Variable height JSFiddle

当我在CodePen中使用相同的代码时，它可以运行 - CodePen。

如何在jsFiddle和我的HTML中解决这个问题？

请注意，我没有LESS / SASS的经验。

Answer 1

感谢您的评论。根据评论，我将其添加为答案。

为什么HTML无效：此代码需要编译为CSS。

如何使它在JsFiddle中工作：在css框的顶部/右侧，选择“scss”作为语言。 （正如@MichaelCoker所说）

如何获得编译的CSS：在codepen中，在css面板的顶部/右箭头上，选择“查看编译的css”以获取编译的CSS（如@MichaelCoker所述）