我想保留一个中央.scss文件,该文件存储项目的所有SASS变量定义。
// _master.scss
$accent: #6D87A7;
$error: #811702;
$warning: #F9E055;
$valid: #038144;
// etc...
由于其性质,该项目将具有大量CSS文件。我必须在一个位置声明所有项目范围的样式变量,这一点很重要。
有没有办法在SCSS中做到这一点?
我想保留一个中央.scss文件,该文件存储项目的所有SASS变量定义。
// _master.scss
$accent: #6D87A7;
$error: #811702;
$warning: #F9E055;
$valid: #038144;
// etc...
由于其性质,该项目将具有大量CSS文件。我必须在一个位置声明所有项目范围的样式变量,这一点很重要。
有没有办法在SCSS中做到这一点?
Answers:
您可以这样做:
我有一个名为Utility的文件夹,并且在其中有一个名为_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; }
除了文件中的变量,函数声明和其他SASS功能外,请勿包含其他任何内容_master.scss
。如果包含实际的CSS,它将在您将母版导入到的每个文件中复制此CSS。
这个问题是很久以前问的,所以我想我应该发布更新的答案。
您现在应该避免使用@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;
}
创建一个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']);