CODEWITHSUNDEEP
csssass
alexeevyci
alexeevyci

Reputation: 281

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.

Upvotes: 0

Views: 131

Answers (1)

Pawan Kumar
Pawan Kumar

Reputation: 1374

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.

Upvotes: 1

Related Questions