CODEWITHSUNDEEP
cssstylus
wickywills
wickywills

Reputation: 4204

Stylus missing styles when compiled

If you take a look at the stylus snippet below, when bottom 0 is added, the height from the below doesn't get compiled into CSS. Remove bottom 0 and it works fine, unfortunately I need bottom 0 in this case:

Stylus

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

Resulting CSS

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

I have also recreated this behaviour in a Codepen. Am I missing something here? I have no errors in the console when compiling. I also notice that if you move bottom 0 to a different line, other styles get missed. Very odd.

Upvotes: 1

Views: 176

Answers (2)

idoric
idoric

Reputation: 179

You had some invisible charachters in your code. Codepen even showed th red "info" icon at bottom right to warn that there is "unexpected indent". Anyway here is the code that works:

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);

Upvotes: 0

Facundo Corradini
Facundo Corradini

Reputation: 3913

you had a couple of spaces instead of tab, I think before the height declaration. Or something like that. I have re-tabbed all the properties and now works as it should

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

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

Upvotes: 2

Related Questions