Nested code in scss/sass

问题:

My html code:

<div class="row header_div">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 logo_grid">
        <img src="img/logo.png" class="focus" >
    </div>
</div>

My scss code:

div.header_div {
    background-color: green;
    div.logo_grid {
        border: 2px solid blue;
        img {
            width: 50%;
            padding: 10px
        }
    }
}

In Chrome version 38 just first 2 line from scss are recognized. I used 2 online scss compiler code (http://beautifytools.com/scss-compiler.php and https://www.sassmeister.com/) and i receive few line of css code. If i will replace my code with css generated code, all style will be recognized. My question is what is wrong in my code.

回答1:

Browsers does not understand sass/scss/less, it can only understand css. Sass/scss is just a CSS pre-processor which helps to reduce repetition with CSS and saves time. So, whenever you are using sass/scss, you need to pre-compile it which will generate some css code and then use those css into your project.

You can use some software like 'koala', 'liveroad', etc to compile your scss file to generate a new css file.