Just started using sass, wondering why I didn't do this earlier. Started a new project just to try it out and see what all the fuzz was about.

Almost right away I ran into a problem though not one I was expecting. I have an unordered list on which I have used

li:empty {display: none;}

to hide empty list elements, I like to make room for more stuff before I need it. Problem is that for some reason it uses the styling for regular list elements instead, which is

li {display: inline-block;}

Now sure I can just remove the empty divs in this case but I still want to figure out what I've missed.

What makes it all even more curious is that when I reproduced the code in codepen it worked flawlessly. Here is the codepen.

Any insight would be appreciated. It's getting late so it just might be tired eyes.