scss / sass中的嵌套代码

Question

我的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>

我的scss代码：

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

在Chrome版本38中，只有scss的前2行才会被识别。我使用了2个在线scss编译器代码（http://beautifytools.com/scss-compiler.php和https://www.sassmeister.com/），我收到了几行css代码。如果我用css生成的代码替换我的代码，将识别所有样式。我的问题是我的代码出了什么问题。

Answer 1

浏览器不了解sass / scss / less，它只能理解css。 Sass / scss只是一个CSS预处理器，它有助于减少CSS的重复并节省时间。 因此，无论何时使用sass / scss，都需要对其进行预编译，这将生成一些css代码，然后将这些css用于您的项目。

您可以使用“koala”，“liveroad”等软件编译scss文件以生成新的css文件。