Nested Code in SCSS/sass

Question

Mein 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> 

Mein SCSS Code:

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

In Chrome-Version 38 direkt mit der ersten Linie 2 von SCSS erkannt werden. Ich benutzte 2 online scss-Compiler-Code (http://beautifytools.com/scss-compiler.php und https://www.sassmeister.com/) und ich erhalte nur wenige Codezeilen. Wenn ich meinen Code durch CSS-generierten Code ersetzen werde, wird jeder Stil erkannt. Meine Frage ist, was in meinem Code falsch ist.

Answer 1

Browser versteht nicht sass/scss/less, kann es nur CSS verstehen. Sass/scss ist nur ein CSS-Preprozessor, der hilft, Wiederholungen mit CSS zu reduzieren und Zeit zu sparen. Also, wenn Sie Sass/Scss verwenden, müssen Sie es vorkompilieren, die einige Css-Code generieren und dann diese CSS in Ihr Projekt verwenden.

Sie können Software wie 'Koala', 'Liveroad' usw. verwenden, um Ihre scss-Datei zu kompilieren, um eine neue CSS-Datei zu erzeugen.