SASS -跨多个文件使用变量

我想保留一个中心的.scss文件，用于存储项目的所有SASS变量定义。

// _master.scss 

$accent: #6D87A7;           
$error: #811702;
$warning: #F9E055;
$valid: #038144;
// etc...

该项目将有大量的CSS文件，由于其性质。在一个位置声明所有项目范围的样式变量是很重要的。

在SCSS中有办法做到这一点吗?

当前回答

在angular v10中，我做了类似的事情，首先创建一个master。SCSS文件，包括以下变量:

的主人。scss文件:


$theme: blue;

$button_color: red;

$label_color: gray;

然后我导入了母版。SCSS文件在我的风格。顶部为SCSS:

风格。scss文件:

@use './master' as m;

确保您导入了master。SCSS在顶部。

M是命名空间的别名;

根据下面的官方文档，使用@use代替@import:

https://sass-lang.com/documentation/at-rules/import

然后是你的风格。SCSS文件可以使用master中定义的任何变量。SCSS如下:

someClass {

   backgroud-color: m.$theme;

   color: m.$button_color;

}

希望它能有所帮助……

快乐编码:)

2020-07-17 17:45:02

其他回答

如前所述，在新版本的SASS中不鼓励使用@import。在你的文件顶部使用@use "path to SASS partial file"代替

您需要将部分SASS文件导入(使用@use)到每个使用它的SASS文件中——而不仅仅是您的主文件。

假设我们有一个名为_variables的SASS文件。在一个叫做partials的文件夹中，我们想在header.scss中使用它。在header中。SCSS你写:

@use "partials/variables" as *

现在可以使用_variables中定义的所有变量。Scss *带$variable(没有前缀)。或者，也可以使用名称空间(如前面提到的Christian)

@use "partials/variables" as v

引用_variables中的变量。用v.$变量。

*注意，SASS编译器忽略下划线，因此不会为每个部分SASS文件生成单独的CSS文件。相反，您可以使用@use将它们全部导入到主SASS文件中。

2022-01-31 14:35:49

这个问题很久以前就有人问过了，所以我想我应该更新一下答案。

现在应该避免使用@import。摘自以下文件:

萨斯会在未来几年内逐步淘汰它，而且最终将其从语言中完全移除。更喜欢@use规则代替。

完整的原因可以在这里找到

你现在应该使用@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;
}

编辑正如@und3rdg在撰写本文时(2020年11月)指出的那样，@use目前仅适用于Dart Sass，而不适用于LibSass(现已弃用)或Ruby Sass。最新的兼容性请参见https://sass-lang.com/documentation/at-rules/use

2020-04-29 11:02:51

我用vite找到了vue3的解决方案。如果你正在使用dart-sass，你可以通过使用@forward和@use来绕过sass模块的全局限制。

_master.scss

$accent: #6D87A7;           
$error: #811702;
$warning: #F9E055;
$valid: #038144;
// etc...

_global.scss

@forward '_master.scss';
// etc...

然后在vite.config.js下配置css选项为

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use "./<path-to-file>/_globals.scss" as *;
        `,
      },
    },
  },
// etc...
});

正如在sass文档中提到的，当导入没有命名空间的模块时

不过，我们建议只对自己编写的样式表这样做;否则，他们可能会引入新成员，导致名称冲突!

然后，您可以在任何其他样式表或组件中使用其他@use模块，如下所示

// component file needing a function module

@use 'functions.scss';

2022-06-18 17:40:03

在全局sass文件中编写一些基于颜色的类如何，这样我们就不需要关心变量在哪里了。就像下面这样:

// base.scss 
@import "./_variables.scss";

.background-color{
    background: $bg-color;
}

然后，我们可以在任何文件中使用background-color类。我的观点是，我不需要导入变量。在任何文件中使用SCSS即可。

2018-12-21 04:21:43