我想保留一个中心.scss文件,该文件存储项目的所有sass变量定义.
// _master.scss
$accent: #6D87A7;
$error: #811702;
$warning: #F9E055;
$valid: #038144;
// etc...
该项目将有大量的CSS文件,由于其性质.重要的是,我要在一个位置声明所有项目范围的样式变量.
在SCSS中有什么方法可以做到这一点吗?
我想保留一个中心.scss文件,该文件存储项目的所有sass变量定义.
// _master.scss
$accent: #6D87A7;
$error: #811702;
$warning: #F9E055;
$valid: #038144;
// etc...
该项目将有大量的CSS文件,由于其性质.重要的是,我要在一个位置声明所有项目范围的样式变量.
在SCSS中有什么方法可以做到这一点吗?
这个问题很久以前就被问过了,所以我想我应该发布一个最新的答案.
您现在应该使用avoid使用@import
.摘自文档:
Sass将在future 几年内逐步淘汰它,并且 最终将其从语言中完全删除.更喜欢@use规则 取而代之的是.
A full list of reasons can be found here个
您现在应该使用@use
,如下所示:
_variables.scss个
$text-colour: #262626;
_otherFile.scss
@use 'variables'; // Path to _variables.scss Notice how we don't include the underscore or file extension
body {
// namespace.$variable-name
// namespace is just the last component of its URL without a file extension
color: variables.$text-colour;
}
您还可以为命名空间创建别名:
_otherFile.scss
@use 'variables' as v;
body {
// alias.$variable-name
color: v.$text-colour;
}
EDIT正如@und3rdg在 compose 本文时(2020年11月)指出的那样,@use
目前仅适用于Dart Sass和not LIBSAS(现已弃用)或Ruby Sass.有关最新的兼容性,请参见https://sass-lang.com/documentation/at-rules/use