Question

如果您查看下面的手写笔代码段，添加bottom 0时，下面的高度不会被编译到CSS中。移除bottom 0并且工作正常，遗憾的是我在这种情况下需要bottom 0：

手写笔

&__text-mask
        span
            display block
            position absolute
            z-index 10
            left 0
            right 0
            height 18px
            bottom 0
            background rgba(255,0,0,.5)

产生的CSS

.bioink-carousel__text-mask span {
    display: block;
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    background: rgba(255,0,0,0.5);

我还在Codepen中重新创建了此行为。我在这里错过了什么吗？编译时我在控制台中没有错误。我还注意到，如果将bottom 0移动到另一行，则会错过其他样式。很奇怪。

Answer 1

你有两个空格而不是标签，我想在高度宣言之前。或类似的东西。我重新标记了所有属性，现在可以正常工作

/* just so SO allows me to link to codepen... */

https://codepen.io/anon/pen/jzNejb

Answer 2

你的代码中有一些看不见的字符。 Codepen甚至在右下角显示红色的“信息”图标，警告有“意外缩进”。无论如何这里是有效的代码：

https://codepen.io/ivandoric/pen/dmbgBK

&__text-mask
    span
       display: block;
       position: absolute;
       z-index: 10;
       left: 0;
       right: 0;
       height: 18px;
       bottom: 0;
       background: rgba(255,0,0,.5);

手写笔在编译时缺少样式

2 个答案: