long - Código anidado en scss/sass

sass--watch

Question

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="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ódigo de compilador de scss en línea ( http://beautifytools.com/scss-compiler.php y https://www.sassmeister.com/ ) y recibí pocas líneas de código css. Si reemplazaré mi código con el código generado por css, se reconocerá todo el estilo. Mi pregunta es qué está mal en mi código.

Answer 1

Browsers no entiende sass / scss / less, solo puede entender css. Sass / scss es solo un preprocesador de CSS que ayuda a reducir la repetición con CSS y ahorra tiempo. Entonces, cada vez que esté usando sass / scss, necesita precompilarlo, lo que generará algún código css y luego usará esos css en su proyecto.

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