未重写SASS变量
这让我快发疯了。 我有一堆SCSS文件和一个变量文件。 我将它们包括在我的核心.scss中,如下所示:未重写SASS变量,sass,Sass,这让我快发疯了。 我有一堆SCSS文件和一个变量文件。 我将它们包括在我的核心.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-fa
@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: 'Gill Sans';
$green: '#000000';
@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;
现在我正在创建另一个样式表,我是这样做的:
@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: 'Gill Sans';
$green: '#000000';
@import "../global/variables";
@import "../components";
@import "../layout";
*:focus {
outline: none !important;
}
但是字体和颜色都没有改变。
有人知道为什么吗?这是因为您将更新的变量设置在通用变量之前。所以你的变量实际上被覆盖了,但不是在你想要的方向上 你需要这样做才能实现你的目标:
@import "../global/variables";
$font-family: 'Gill Sans';
$green: '#000000';
@import "../components";
@import "../layout";
*:focus {
outline: none !important;
}
或者更好,为自定义变量创建另一个文件