SASS 变量不起作用答案

【问题标题】：SASS variables not workingSASS 变量不起作用
【发布时间】：2019-12-22 01:38:19
【问题描述】：

我是 SASS 新手，我只是按照 SASS 指南网站上给出的步骤安装 SASS，但它根本不起作用，也没有将我的 SASS 转换为 CSS，就像我为颜色取了一个变量但它确实不工作。我想我在这方面遗漏了一些主要部分，请任何人指导我，以便我可以进一步完成我的任务。

HTML：

<html>
    <head>
        <title>SASS1</title>
        <link rel="stylesheet" type="text/css" href="sass1.scss"/>
    </head>
    <body>
        <div class="container">
            <div class="sub_container">
                <div class="first_box">
                    <div class="inner_box"></div>
                    <div class="inner_box"></div>
                    <div class="inner_box"></div>
                    <div class="inner_box"></div>
                    <div class="inner_box"></div>
                </div>
                <div class="second_box">
                    <div class="inner_box"></div>
                    <div class="inner_box"></div>
                    <div class="inner_box"></div>
                    <div class="inner_box"></div>
                    <div class="inner_box"></div>
                </div>
            </div>
        </div>
    </body>
</html>

SASS：

$black_color : #000;
$voilet_color : #2A2E54;
.container
{
    width: 602px;
    height: 501px;
    border: 3px solid $black_color;
    background-color: $voilet_color;
    margin: auto;
    box-sizing: border-box;
}
.sub_container
{
    width: 442px;
    height: 321px;
    border: 10px solid #C1F1FD;
    position: relative;
    top: 76px;
    left: 76px;
    -webkit-box-shadow: 0 0 1px #000, inset 0 0 1px #000;
    -moz-box-shadow: 0 0 1px #000, inset 0 0 1px #000;
    box-shadow: 0 0 1px #000, inset 0 0 1px #000;
}
.first_box, .second_box
{
    width: 386px;
    height: 114px;
    border: 10px solid #FFF189;
    margin-top: 18px;
    margin-left: 18px;
}
.inner_box
{
    width: 30px;
    height: 56px;
    border: 10px solid #FFB286;
    display: inline-block;
    margin-left: 19px;
    margin-top: 18px;
}

【问题讨论】：

你是如何尝试将 sass 转换为 css 的？
有什么办法吗？我以为它会自动转换
不，它不会自动转换为 css。您可以在终端中使用以下命令：sass --watch style.scss:style.css
代替 style.scss 我需要写我的文件名？
是的，style.scss 必须替换为您相应的文件名。

标签： css sass

【解决方案1】：

在终端中，在样式表所在的文件夹中运行以下命令。每当.scss 文件发生变化时，它将检测到并更新.css 文件。这个css文件必须在html文件中引用。

sass --watch style.scss:style.css

【讨论】：

【解决方案2】：

首先，您需要使用sass 编译器（如http://koala-app.com/）将.scss 文件编译为.css。然后，您可以只访问 html 中的 .css 文件。

&lt;link rel="stylesheet" type="text/css" href="sass1.css"/&gt;

【讨论】：