CSS SASS - 在多个文件中使用变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17598996/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SASS - use variables across multiple files
提问by dthree
I would like to keep one central .scss file that stores all SASS variable definitions for a project.
我想保留一个中央 .scss 文件，用于存储项目的所有 SASS 变量定义。
// _master.scss
$accent: #6D87A7;
$error: #811702;
$warning: #F9E055;
$valid: #038144;
// etc...
The project will have a large number of CSS files, due to its nature. It is important that I declare all project-wide style variables in one location.
由于其性质，该项目将包含大量 CSS 文件。在一个位置声明所有项目范围的样式变量很重要。
Is there a way to do this in SCSS?
有没有办法在 SCSS 中做到这一点？
回答by Joel
You can do it like this:
你可以这样做：
I have a folder named utilities and inside that I have a file named _variables.scss
我有一个名为实用程序的文件夹，里面有一个名为 _variables.scss 的文件
in that file i declare variables like so:
在那个文件中，我像这样声明变量：
$black: #000;
$white: #fff;
then I have the style.scss file in which i import all of my other scss files like this:
然后我有 style.scss 文件，我在其中导入了所有其他 scss 文件，如下所示：
// Utilities
@import "utilities/variables";
// Base Rules
@import "base/normalize";
@import "base/global";
then, within any of the files I have imported, I should be able to access the variables I have declared.
然后，在我导入的任何文件中，我应该能够访问我声明的变量。
Just make sure you import the variable file before any of the others you would like to use it in.
只需确保在要使用它的任何其他文件之前导入变量文件。
回答by dthree
This answer shows how I ended up using this and the additional pitfalls I hit.
这个答案显示了我最终如何使用它以及我遇到的其他陷阱。
I made a master SCSS file. This file musthave an underscore at the beginning for it to be imported:
我制作了一个主 SCSS 文件。该文件的开头必须有一个下划线才能导入：
// assets/_master.scss
$accent: #6D87A7;
$error: #811702;
Then, in the header of all of my other .SCSS files, I import the master:
然后，在我所有其他 .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; }
IMPORTANT
重要的
Do not include anything but variables, function declarations and other SASS features in your _master.scssfile. If you include actual CSS, it will duplicate this CSS across every file you import the master into.
除了变量、函数声明和其他 SASS 功能外，不要在_master.scss文件中包含任何内容。如果您包含实际的 CSS，它会在您导入母版的每个文件中复制此 CSS。
回答by whiscode
This question was asked a long time ago so I thought I'd post an updated answer.
这个问题很久以前就被问到了，所以我想我会发布一个更新的答案。
You should now avoidusing @import. Taken from the docs:
您现在应该避免使用@import. 取自文档：
Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead.
Sass 将在未来几年逐步淘汰它，并最终将其从语言中完全删除。更喜欢@use 规则。
A full list of reasons can be found here
You should now use @useas shown below:
您现在应该使用@use如下所示：
_variables.scss
_variables.scss
$text-colour: #262626;
_otherFile.scss
_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;
}
You can also create an alias for the namespace:
您还可以为命名空间创建别名：
_otherFile.scss
_otherFile.scss
@use 'variables' as v;
body {
// alias.$variable-name
color: v.$text-colour;
}
回答by Carnaru Valentin
Create an index.scss and there you can import all file structure you have. I will paste you my index from an enterprise project, maybe it will help other how to structure files in 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';
And you can watch them with gulp/grunt/webpack etc, like:
你可以用 gulp/grunt/webpack 等来观看它们，比如：
gulpfile.js
gulpfile.js
// SASS Task
// 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']);
回答by gary gao
How about writing some color-based class in a global sass file, thus we don't need to care where variables are. Just like the following:
在全局 sass 文件中编写一些基于颜色的类如何，因此我们不需要关心变量在哪里。就像下面这样：
// base.scss
@import "./_variables.scss";
.background-color{
background: $bg-color;
}
and then, we can use the background-colorclass in any file.
My point is that I don't need to import variable.scssin any file, just use it.
然后，我们可以background-color在任何文件中使用该类。我的观点是我不需要导入variable.scss任何文件，只需使用它。
