如何包括具有给定参数的Sass文件

Question

我想在以后的模板中使用“默认” sass代码，但是找不到变量。我正在寻找一种将变量传递到布局文件的方法。我知道@import不支持参数，但是找不到其他解决方案。有关更多信息，请参见下面的代码。

green.scss

$primary-color: #6ddba4;
$secondary-color: #6ddba4;
$tertiary-color: #6ddba4;

@import 'layout/layout.scss';

layout.scss

.home_icon {

    border: 1px solid $primary-color !important;
    color: $primary-color !important;

    &:hover {

        background-color: $secondary-color !important;
        color: #fff !important;
        border-color: #fff !important;

    }

}

Answer 1

SASS将查看您的所有.scss文件（和部分文件），并将它们一起编译为输出.css文件。因此，您不能使用JavaScript直接操作SASS变量，因为在运行JavaScript时它们根本不存在。

要解决此问题并实现所需的功能，您将需要由SASS生成多个样式表，然后可以将其替换为JavaScript。

它可能看起来像这样：

green.scss

$primary-color: green;
$secondary-color: blue;
$tertiary-color: red;

@import "./layout";

red.scss

$primary-color: red;
$secondary-color: blue;
$tertiary-color: orange;

@import "./layout";

_layout.scss

.home_icon {
    border: 1px solid $primary-color !important;
    color: $primary-color !important;
    &:hover {
        background-color: $secondary-color !important;
        color: #fff !important;
        border-color: #fff !important;
    }
}

// Add as much as you want here and reference your variables

这将生成一个green.css文件和一个red.css文件，然后可以根据需要在HTML中进行交换。

我还将以上所有内容都粘贴到了working pen中，以便可以更好地对其进行可视化并查看输出CSS。

---

作为补充，you can also assign CSS to variables which JavaScript can manipulate但是，我认为这不适用于您描述的用例。该选项确实存在，因此请选择适合您的选项。

Answer 2

您需要 @import'green'到layout.scss文件

green.scss

$primary-color: #6ddba4;
$secondary-color: #6ddba4;
$tertiary-color: #6ddba4;

layout.scss

@import 'green'
    .home_icon {
    border: 1px solid $primary-color !important;
    color: $primary-color !important;
     &:hover {
        background-color: $secondary-color !important;
        color: #fff !important;
        border-color: #fff !important;
        }
    }

这样做，您可以将green.scss中存在的所有变量都访问到layout.scss文件中。