我想保留一个中心.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

Css相关问答推荐

为什么盒影没有显示在我的Angular组件中?

更改MAT-FORM-FIELD的CSS,使其在有Angular 的HTML中显示为普通文本框

如何在Angular material 选项卡中设置自定义圆角下划线的样式

臭虫?嵌套的css供应商前缀中断Chrome css解析

如何在点击时停止动画并将其返回到第一帧?

如何为图像堆叠效果下方的图层实现与磨砂玻璃类似的视觉效果

Django:Tailwind 样式不适用于具有小部件属性的模板变量

为什么删除 AnimatePresence framer.div 时会出现轻微卡顿?

混合网格自动布局与固定的行列位置

如何在 VS Code 中获得 JavaFX CSS 属性的自动完成功能?

为什么左浮动上的清除:左也会影响右浮动,以及如何避免它

来自 A 队和 B 队的类污染了同一个全局命名空间

普通流,流布局,块和内联布局有什么区别?

将 CSS 注入 Shadow 根.然而风格正在受到影响

flex-start 和基线有什么区别?

隐藏在AngularJs中的可见性?

溢出的文本可以居中吗?

CSS3 box-shadow:inset 可以只做一侧或两侧吗?喜欢边界顶部?

CSS图像最大宽度设置为原始图像大小?

是否可以在 CSS 中定义常量?