Css SASS-跨多个文件使用变量

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

// _master.scss 

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

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

---

在SCSS中有没有这样做的方法？

您可以这样做：

// Utilities
@import "utilities/variables";

// Base Rules
@import "base/normalize";
@import "base/global";

我有一个名为utilities的文件夹，里面有一个名为_variables.scss的文件

在该文件中，我声明了如下变量：

$black: #000;
$white: #fff;

然后我有一个style.scss文件，我在其中导入了所有其他scss文件，如下所示：

// Utilities
@import "utilities/variables";

// Base Rules
@import "base/normalize";
@import "base/global";

然后，在我导入的任何文件中，我都应该能够访问我声明的变量

---

只需确保在导入任何其他变量文件之前导入该变量文件。

此答案显示了我最终如何使用该文件以及遇到的其他陷阱

我制作了一个主SCSS文件。要导入此文件，其开头必须有下划线：

// assets/_master.scss 
$accent: #6D87A7;           
$error: #811702;

然后，在所有其他.SCSS文件的标题中，我导入主文件：

// When importing the master, you leave out the underscore, and it
// will look for a file with the underscore. This prevents the SCSS
// compiler from generating a CSS file from it.
@import "assets/master";

// Then do the rest of my CSS afterwards:
.text { color: $accent; }

重要的

---

在

\u master.scss

文件中，除了变量、函数声明和其他SASS功能外，不要包含任何内容。如果您包含实际的CSS，它将在您将主控导入的每个文件中复制此CSS。

创建index.scss，您可以在那里导入所有文件结构。我将向您粘贴我在企业项目中的索引，也许它将帮助其他人如何在css中构造文件：

@import 'base/_reset';

@import 'helpers/_variables';
@import 'helpers/_mixins';
@import 'helpers/_functions';
@import 'helpers/_helpers';
@import 'helpers/_placeholders';

@import 'base/_typography';

@import 'pages/_versions';
@import 'pages/_recording';
@import 'pages/_lists';
@import 'pages/_global';

@import 'forms/_buttons';
@import 'forms/_inputs';
@import 'forms/_validators';
@import 'forms/_fieldsets';

@import 'sections/_header';
@import 'sections/_navigation';
@import 'sections/_sidebar-a';
@import 'sections/_sidebar-b';
@import 'sections/_footer';

@import 'vendors/_ui-grid';

@import 'components/_modals';
@import 'components/_tooltip';
@import 'components/_tables';
@import 'components/_datepickers';

你可以通过大口喝/咕噜声/网页包等方式观看，比如：

gulpfile.js

//SASS任务

var gulp = require('gulp');
var sass = require('gulp-sass');
//var concat = require('gulp-concat');
var uglifycss = require('gulp-uglifycss');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('styles', function(){
    return gulp
            .src('sass/**/*.scss')
            .pipe(sourcemaps.init())
            .pipe(sass().on('error', sass.logError))
            .pipe(concat('styles.css'))
            .pipe(uglifycss({
                "maxLineLen": 80,
                "uglyComments": true
            }))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('./build/css/'));
});

gulp.task('watch', function () {
    gulp.watch('sass/**/*.scss', ['styles']);
});

gulp.task('default', ['watch']);

---

在一个全局sass文件中编写一些基于颜色的类怎么样，这样我们就不需要关心变量在哪里了。如下所示：

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

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

然后，我们可以在任何文件中使用

背景色
类。
我的观点是，我不需要在任何文件中导入
variable.scss
，只需使用它即可
 这个问题很久以前就被问到了，所以我想我应该发布一个更新的答案

您现在应该避免使用
@import
。摘自文件：

Sass将在未来几年内逐步淘汰它
最终将其从语言中完全删除。更喜欢@use规则
相反


您现在应该使用
@use
，如下所示：

\u variables.scss

$text-colour: #262626;

@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;
}

@use 'variables' as v;

body {
  // alias.$variable-name
  color: v.$text-colour;
}

\u otherFile.scss

$text-colour: #262626;

@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;
}

@use 'variables' as v;

body {
  // alias.$variable-name
  color: v.$text-colour;
}

还可以为命名空间创建别名：

\u otherFile.scss

$text-colour: #262626;

@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;
}

@use 'variables' as v;

body {
  // alias.$variable-name
  color: v.$text-colour;
}

EDIT正如@und3rdg在撰写本文时（2020年11月）指出的那样，
@use
目前仅适用于Dart Sass，而不适用于LibSass（现已弃用）或Ruby Sass。有关angular v10中的最新兼容性，请参见。我做了如下操作，首先创建了一个
master.scss
文件，并包含以下变量：

master.scss
文件：


$theme: blue;

$button_color: red;

$label_color: gray;

然后我将
master.scss
文件导入顶部的
style.scss
：

style.scss文件：

@use './master' as m;

确保导入顶部的
master.scss

m
是名称空间的别名

根据以下官方文件使用
@Use
而不是
@import
：


然后在
style.scss
文件中，您可以使用
master.scss
中定义的任何变量，如下所示：

someClass {

   backgroud-color: m.$theme;

   color: m.$button_color;

}

希望这会有帮助

快乐编码：）
我很确定这是不可能的，我不久前也尝试过同样的方法，但没有成功。@DrCord相反，这是SASS的一个核心功能：Sweet！我想我可能误读了这句话：“在嵌套上下文中导入的文件中不允许只允许在文档的基本级别使用的指令，如mixin或charset。”并且没有正确阅读“嵌套上下文”部分。完美。正是我的意思和需要。最后一个问题：导入的所有文件都应该以下划线开头吗？您在文件名下划线，但无法在@import声明上标记。这些文件被视为部分文件，名称必须以下划线开头，但在导入时将其忽略。这里有一篇非常好的文章详细说明了原因：请注意，您可以在模块内声明：
$black:#000！违约。
！默认值
thingie阻止变量在已经存在的情况下被重置。为什么我们必须在单个文件中转储所有变量？我们不能将它们拆分并放到需要它们的相应文件中吗？例如，模态对话框所需的变量我们不能将它们放在_modal.scss中吗？这个答案不再是跨多个文件重用变量的推荐方法。请参阅，非常感谢您对需要以下划线开头的文件的评论！我花了大约3个小时试图弄清楚为什么我错过了一堆基础样式。更改了我的基础设置文件的文件名，从下划线开始，嘿！但是现在当我再次更改文件名时，它仍然有效吗？什么。。。。？哦，好吧。。。叹息并接受它现在正在工作不要再更改它-它可能在工作时从您的SCSS文件中“工作”了一些生成的CSS。只需使用下划线。但除此之外，让它工作起来很棒@poshaughnessy它可能会工作，因为sass使用缓存，所以它可以被缓存。不是100%确定通过。sass相同？？正确您是@rinogo。您不应该在@import语句中省略下划线吗？sass'@import'以任何方式工作。您可以编写带下划线或不带下划线的URI。也可以使用或不使用“.scss”结尾。显然，这不是一个好主意，您可以有许多变量，而且更干净，只需导入即可保留索引，并且每个文件都是自己的建议。这应该是选择的答案，因为“导入”标记为已弃用，将在将来删除。这仅适用于性能远低于libsa的dart SAS