Código anidado en scss / sass - css, sass

Mi código html:

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

Mi código scss:

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

En la versión 38 de Chrome solo se reconocen las primeras 2 líneas de scss. Utilicé 2 códigos de compilador de scss en línea (http://beautifytools.com/scss-compiler.php y https://www.sassmeister.com/) y recibo pocas líneas de código css. Si reemplazaré mi código con código generado por css, se reconocerá todo el estilo. Mi pregunta es qué está mal en mi código.

Respuestas

Los navegadores no entienden sass / scss / less,Solo puedo entender css. Sass / scss es solo un preprocesador CSS que ayuda a reducir la repetición con CSS y ahorra tiempo. Por lo tanto, siempre que esté utilizando sass / scss, debe precompilarlo, lo que generará algo de código CSS y luego utilizará esos CSS en su proyecto.

Puede usar algún software como "koala", "liveroad", etc. para compilar su archivo scss para generar un nuevo archivo css.