CSS 可变高度无法正常工作

Question

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

height: $main-height/2;

复选框检查结果

下面列出了演示 fiddle :

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 所述)