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


216

我想保留一个中央.scss文件,该文件存储项目的所有SASS变量定义。

// _master.scss 

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

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

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


我非常确定这是不可能的,我前一阵子尝试过同样的事情,但无法正常工作。
DrCord

8
@DrCord相反它是SASS的一个主要特点:sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials
倦怠

甜!我认为我可能误读了以下语句:“在嵌套上下文中导入的文件中不允许只在文档的基础级别上使用的指令(如mixin或charset)。” 并没有正确阅读“嵌套上下文”部分。
DrCord

Answers:


325

您可以这样做:

我有一个名为Utility的文件夹,并且在其中有一个名为_variables.scss的文件。

在该文件中,我这样声明变量:

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

然后我有style.scss文件,在其中我导入所有其他其他scss文件,如下所示:

// Utilities
@import "utilities/variables";

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

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

只要确保先导入变量文件,然后再使用其他任何变量文件即可。


4
完善。正是我的意思和需要。最后一个问题:是否所有导入的文件都应以下划线开头?您下划线您的文件名,但在@import声明上失败。
2013年

46
这些文件被认为是部分文件,名称必须以下划线开头,但是在导入时将其省略。有一篇非常好的文章详细介绍了为什么:alistapart.com/article/getting-started-with-sass
Joel

7
请注意,您可以在模块内部声明默认值$black: #000 !default;。那个!default东西防止变量被重置(如果已经存在)。
安德烈·米哈伊洛夫

2
为什么我们必须将所有变量转储到单个文件中?我们不能将它们拆分并拖放到需要它们的相应文件中吗?例如,模态对话框所需的变量不能放在_modal.scss中吗?
VJAI

3
不再建议在所有文件中重用变量时使用此答案。请参阅stackoverflow.com/a/61500282/7513192
whiscode

82

这个答案说明了我最终是如何使用此功能以及遇到的其他陷阱的。

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


5
非常感谢您对文件以下划线开头的评论!我只花了大约3个小时来弄清楚为什么我缺少一堆Foundation样式。更改了我的Foundation设置文件的文件名,使其以下划线开头,嘿!但是现在当我再次更改文件名时,它仍在工作吗?什么...?哦,好吧…… 叹息并接受它现在正在起作用
poshaughnessy 2015年

4
不要改回它-它可能在工作时从您的SCSS文件中“生成”了一些生成的CSS。只需使用下划线。但是,否则,非常有用!
dthree

@poshaughnessy它可能起作用,因为sass使用缓存,因此可以缓存它。不能100%确定。
PeterM

一样无礼?
Martian2049 '18

1
正确,你是@rinogo。
dthree

18

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

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

1
这应该是现在选择的答案,因为“导入”被标记为已弃用,以后将被删除。
TyrionGraphiste

这个需要更多的投票
ludovico

3

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

1
您不应该忽略@import语句中的下划线吗?
Quantum17年

1
Sass的'@import'两种方式都可以。您可以在带有或不带有下划线的情况下编写URI。不论是否以'.scss'结尾。
小马

1

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

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

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

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


显而易见,这是一个坏主意,您可以有很多变量,并且仅使用导入即可保持索引更干净,并且每个文件都是自己的建议。
卡纳鲁·瓦伦丁
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.