scss/sass 中的嵌套代码答案

【问题标题】：Nested code in scss/sassscss/sass 中的嵌套代码
【发布时间】：2017-05-31 18:43:44
【问题描述】：

我的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 生成的代码替换我的代码，所有样式都会被识别。我的问题是我的代码有什么问题。

【问题讨论】：

浏览器不支持 scss。您需要预先编译或使用浏览器内编译器。

标签： css sass

【解决方案1】：

浏览器不理解sass/scss/less，只能理解css。 Sass/scss 只是一个 CSS 预处理器，它有助于减少 CSS 的重复并节省时间。所以，当你使用 sass/scss 时，你需要预编译它，它会生成一些 css 代码，然后将这些 css 使用到你的项目中。

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

【讨论】：