Html SCSS高度属性将不会转换为CSS

我正在创建一个简单的网站，使用Ruby-SCSS到CSS，遇到了一个令人头痛的时刻。我的

文章

元素需要

高度：100%值以获得滚动条。我可以将它添加到
.css
或Chrome开发工具中，很好，瞧，它已经修复了

但问题是，每当我保存并将SCSS编译成CSS时，它都故意排除高度：100%，好像在嘲笑我。我不想每次编译我的SCS时都去CSS并添加回这一行——有人知道这个bug吗，或者有人提示我可以使用什么工具来找出它的来源吗

有关SCS：

.modalElement {
    position: relative;

    @mixin articleExpand {
        height: 100%;
        top: 0%;
        border-radius: 0;
        width: 100%;

        header {
            height: 20%;
            overflow: auto;
        } 

        .articleContent {
            height: 80%;
        }
    }
    ... (more unrelated SCSS)
}
...
&.articleExpanded {
    &.modalElementArticle article {
        @include articleExpand;
    } 
}

所生成的CSS有问题：

.modalElement.articleExpanded.modalElementArticle article {
  top: 0%;
  border-radius: 0;
  width: 100%;
}

（简化）HTML：


花
为什么我们爱花。。。
把混音带出课堂

.modalElement {
    position: relative;

    ... (more unrelated SCSS)
}

@mixin articleExpand {
    height: 100%;
    top: 0%;
    border-radius: 0;
    width: 100%;

    header {
        height: 20%;
        overflow: auto;
    } 

    .articleContent {
        height: 80%;
    }
}

...
&.articleExpanded {
    &.modalElementArticle article {
        @include articleExpand;
    } 
}

同时又恨又爱，这是如此简单。你知道为什么会这样吗？宽度和其他属性仍然在影响它，只是宽度而不是高度。我不能告诉你为什么。我刚刚签入了你的代码，但它无效。如果你有任何理由，请随意评论。
.modalElement {
    position: relative;

    ... (more unrelated SCSS)
}

@mixin articleExpand {
    height: 100%;
    top: 0%;
    border-radius: 0;
    width: 100%;

    header {
        height: 20%;
        overflow: auto;
    } 

    .articleContent {
        height: 80%;
    }
}

...
&.articleExpanded {
    &.modalElementArticle article {
        @include articleExpand;
    } 
}