我想保留一个中央 .scss 文件来存储项目的所有 SASS 变量定义。
// _master.scss
$accent: #6D87A7;
$error: #811702;
$warning: #F9E055;
$valid: #038144;
// etc...
由于其性质，该项目将有大量的 CSS 文件。在一个位置声明所有项目范围的样式变量很重要。
有没有办法在 SCSS 中做到这一点？
问问题
234883 次
7 回答
404
你可以这样做：
我有一个名为实用程序的文件夹，其中有一个名为 _variables.scss 的文件
在该文件中，我声明变量如下：
$black: #000;
$white: #fff;
然后我有 style.scss 文件，我在其中导入所有其他 scss 文件，如下所示：
// Utilities
@import "utilities/variables";
// Base Rules
@import "base/normalize";
@import "base/global";
然后，在我导入的任何文件中，我应该能够访问我声明的变量。
只需确保在您想要使用它的任何其他文件之前导入变量文件。
于 2013-07-11T17:01:51.980 回答
134
这个问题是很久以前提出的，所以我想我会发布一个更新的答案。
您现在应该避免使用@import. 取自文档：
Sass 将在接下来的几年中逐步淘汰它，并最终将其从语言中完全删除。更喜欢@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-29T11:02:51.013 回答
96
这个答案显示了我最终如何使用它以及我遇到的其他陷阱。
我制作了一个主 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; }
重要的
不要在文件中包含除变量、函数声明和其他 SASS 特性之外的任何内容_master.scss。如果您包含实际的 CSS，它将在您将主文件导入的每个文件中复制此 CSS。
于 2014-01-04T18:09:06.787 回答
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']);
于 2017-07-21T12:53:00.123 回答
4
在 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;
}
希望它会有所帮助...
快乐编码:)
于 2020-07-17T17:45:02.723 回答
1
在全局 sass 文件中编写一些基于颜色的类怎么样，这样我们就不需要关心变量在哪里。就像下面这样：
// base.scss
@import "./_variables.scss";
.background-color{
background: $bg-color;
}
然后，我们可以background-color在任何文件中使用该类。我的意思是我不需要导入variable.scss任何文件，只需使用它即可。
于 2018-12-21T04:21:43.550 回答
1
如前所述，@import在较新版本的 SASS 中不鼓励使用 。@use "path to SASS partial file"改为在文件顶部使用。*
您需要将@use部分 SASS 文件导入（使用）到每个使用它的 SASS 文件中 - 而不仅仅是您的主要文件。
假设我们在一个名为_variables.scss*的文件夹中调用了一个 SASS 文件partials，我们希望在header.scss. 所以在header.scss你写：
@use "partials/variables" as *
_variables.scss*现在您可以使用带$variable（无前缀）中定义的所有变量。或者，您可以使用命名空间（如 Christian 已经提到的）
@use "partials/variables" as v
用 来引用里面的_variables.scss*变量v.$variable。
* 请注意，SASS 编译器会忽略下划线，因此不会为每个部分 SASS 文件生成单独的 CSS 文件。相反，您可以将它们全部导入到您的主 SASS 文件中@use。
于 2022-01-31T14:35:49.597 回答