Question

这让我很生气。我有一大堆SCSS文件和一个变量文件。我将它们包含在我的 core.scss 中：

@import url(https://fonts.googleapis.com/css?family=Roboto:900,700,500,300);

@import "global/variables";
@import "components";
@import "layout";

*:focus {
    outline: none !important;
}

在我的变量样式表中，我有这个：

$font-family: 'Roboto', sans-serif;

$primary: #000000;
$secondary: #E67F22;
$tertiary: #F1C40F;

$green: #27AE61;
$blue: #297FB8;
$silver: #B2BABB;
$white-sky: #F5F7F8;
$grey: #F0F2F2;
$clouds: #E5E8E8;
$midnight-blue: #2D3E50;
$wet-asphalt: #34495E;
$concrete: #7E8C8D;

现在我正在创建另一个样式表，我这样做了：

$font-family: 'Gill Sans';
$green: '#000000';

@import "../global/variables";
@import "../components";
@import "../layout";

*:focus {
    outline: none !important;
}

但字体或颜色都没有改变。有谁知道为什么？

Answer 1

这是因为您要在通用变量之前设置更新的变量。所以你的变量实际上是被覆盖的，但不是你想要的方向。

您需要这样做才能实现目标：

@import "../global/variables";

$font-family: 'Gill Sans';
$green: '#000000';

@import "../components";
@import "../layout";


*:focus {
    outline: none !important;
}

或者更好的是，为自定义变量设置另一个文件。

SASS变量未被覆盖

1 个答案: