Question

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

// _master.scss 

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

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

有没有办法在SCSS中执行此操作？

Answer 1

你可以这样做：

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

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

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

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

// Utilities
@import "utilities/variables";

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

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

只需确保在您想要使用它的任何其他文件之前导入变量文件。

Answer 2

这个答案显示了我最终如何使用这个以及我遇到的其他陷阱。

我制作了一个主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; }

重要

请勿在{{1}}文件中包含除变量，函数声明和其他SASS功能之外的任何内容。如果您包含实际的CSS，它将在您导入主文件的每个文件中复制此CSS。

Answer 3

这个问题是很久以前问的，所以我认为我应该发布更新的答案。

您现在应该避免使用@import。取自文档：

Sass将在未来几年逐步淘汰它，并且最终将其从语言中完全删除。优先使用@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;
}

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

Answer 4

创建一个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';

你可以用gulp / grunt / webpack等观看它们，例如：

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']);

Answer 5

如何在全局sass文件中编写一些基于颜色的类，因此我们不需要关心变量在哪里。就像以下内容一样：

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

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

然后，我们可以在任何文件中使用background-color类。我的观点是，我不需要在任何文件中导入variable.scss，只需使用它即可。

Answer 6

在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：

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

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

someClass {

   backgroud-color: m.$theme;

   color: m.$button_color;

}

希望对您有帮助...

快乐编码：）

SASS - 在多个文件中使用变量

6 个答案:

重要