css - 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文件。