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

时间:2019-04-09 14:24:09

标签: sass

我想在以后的模板中使用“默认” 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;

    }

}

2 个答案:

答案 0 :(得分:0)

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但是,我认为这不适用于您描述的用例。该选项确实存在,因此请选择适合您的选项。

答案 1 :(得分:0)

您需要 @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文件中。