组织文件是每个项目的重要一步，特别是如果你半年重新打开这个项目的时候，你会发现，文件组织得好，对于你理解项目会有很大的帮助。
组织你的Sass文件
如果你从未接触过Sass，你可以先阅读一下Sass指南或者点击这里阅读Sass相关的教程。
Sass到目前为止有两种语法书写格式。第一种称之为SCSS（Sassy CSS），并且在整个规范中都使用这种语法格式，也是CSS语法的一种扩展。这意味着每个有效的CSS文件也是有效的SCSS文件。另外，SCSS能理解大多数CSS的Hack和浏览器特定的前缀语法。例如老版本IE过滤器语法。使用此语法的文件扩展名是
.scss。另一种称之为Sass，是Sass的最初书写模式，其格式和Ruby类似。
创建多个文件
为了更好的组织项目文件，我们将代码分割在几个文件夹和文件中。通过会在asset文件夹中创建一个css文件夹，并且在asset中还包括了icons、images和js文件夹。
接着让我们创建第一个也是主要的文件：app.scss。
这个文件将导入所有组件和其他的.scss文件。不过现在是空白的。
完成了？并没有，接下来创建我们需要的其他文件夹：
- helpers
- components
- layouts
- pages
Helpers
helpers文件夹将包含项目需要的functions、mixins和variables。
例如：
── helpers
├── _functions.scss
├── _mixins.button.scss
└── _parameters.scss
_functions.scss文件放入下面的代码：
/*** Functions ***/
/**
* Set font color according the background
* source: http://thesassway.com/intermediate/dynamically-change-text-color-based-on-its-background-with-sass
* @param {String} $background - background color - format accepted: hsla, rgb, #
* @return {String} #color
*/
@function set-text-color($background) {
@if (lightness($background) > 50) {
@return #000; // Lighter backgorund, return dark color
} @else {
@return #fff; // Darker background, return light color
}
}
_mixins.button.scss文件放入下面的代码：
/*** Button mixins ***/
/**
* Generate button style
* @param {String} - $name - required
* @param {String} - $background - required - format accepted: hsla, rgb, #
* @param {Strong} - $color - optionnal - format accepted: hsla, rgb, #
* If no $color specify, the 'set-text-color' function is called
* go check the _function.scss
*/
@mixin generate-button($name, $background, $color: '') {
.button-#{$name} {
background: $background;
@if ($color == '') {
color: set-text-color($background);
} @else {
color: $color;
}
&:hover {
background: lighten($background, 10%);
}
}
}
_parameters.scss文件放入下面的代码：
/*** Parameters ***/
// Colors
$color-primary: #666;
$color-secondary: #888;
$color-light: #e0e0e0;
$color-lightest: #efefef;
$color-brand: #239bf6;
// Brand color
$color-facebook: #3b5998;
$color-feedly: #2bb24c;
$color-github: #333;
$color-google: #dc4e41;
$color-instagram: #3f729b;
$color-linkedin: #0077b5;
$color-medium: #00ab6b;
$color-messenger: #0084ff;
$color-rss: #f26522;
$color-spotify: #2ebd59;
$color-twitter: #55acee;
// Borders
$border-light: solid 1px rgba(0, 0, 0, .05);
// Font Size
$font-size-biggest: 2.8rem;
$font-size-largest: 2.3rem;
$font-size-large: 1.2rem;
$font-size-base: 1rem;
$font-size-small: .9rem;
$font-size-smallest: .75rem;
// Spacing
$spacing-small: .75rem;
$spacing-single: 1rem;
$spacing-double: 2rem;
$spacing-triple: 3rem;
$spacing-big: 6rem;
// Media queries
$desktop: 800px;
$tablet: 600px;
$mobile: 480px;
// Font Family
$sans-serif: 'Roboto', sans-serif;
$serif: 'Playfair Display', serif;
// Animation
$anime-in: .4s;
$anime-out: .5s;
Components
components文件夹将包含下面列的一些模块。比如：
── components
├── _buttons.scss
├── _cards.scss
├── _comments.scss
├── _footer.scss
├── _header.scss
├── _navigation.scss
└── _pagination.scss
_buttons.scss文件放入下面的代码：
/*** Button components ***/
.button {
border: solid 1px $color-light;
border-radius: 3px;
display: inline-block;
font-weight: 300;
height: 40px;
line-height: 40px;
padding: 0 10px;
text-decoration: none;
transition-duration: .4s;
transition-property: color border;
}
@generate-button('primary', $color-primary);
Pages
pages文件夹将包含一些特殊页面的CSS，比如：
── pages
├── _about.scss
├── _blog.scss
├── _post.scss
├── _projects.scss
├── _reading.scss
├── _tag.scss
└── _works.scss
_projects.scss文件放入下面的代码：
/*** Projects page ***/
.section-projects {
padding-top: 100px;
}
.project-item {
padding: 40px 0;
}
.project-item-header {
margin-bottom: 40px;
text-align: center;
}
Layouts
layouts文件夹包含不同布局的样式代码，比如响应式布局。
── layout
└── _responsive.scss
_responsive.scss文件放入下面的代码：
/*** Responsive ***/
@media screen and (max-width: $tablet) {
.post-cover {
width: 100%;
}
}
@media screen and (max-width: $mobile) {
.nav-desktop {
display: none;
}
.nav-toggle {
display: block;
}
}
一个文件导入所有规则
现在我们可以在项目根文件夹中创建我们主文件app.scss文件，然后通过@import将所有子文件导入进来：
/* Portfolio Style
- Version: 1.2.3
- Author: @ostrenaud_clem
*/
// Helpers
@import 'helpers/parameters';
@import 'helpers/functions';
@import 'helpers/mixins.button';
// Components
@import 'components/buttons';
@import 'components/cards';
@import 'components/comments';
@import 'components/footer';
@import 'components/header';
@import 'components/navigation';
@import 'components/pagination';
// Pages
@import 'pages/about';
@import 'pages/blog';
@import 'pages/post';
@import 'pages/reading';
@import 'pages/tag';
@import 'pages/works';
// Layout
@import 'layout/responsive';
编译.scss文件
我们需要一个工具来编译项目的SCSS代码到浏览器可以识别的CSS语言。
我们可以使用Gulp、Grunt或者NPM Scripts。
Gulp
首先，需要安装一些依赖：gulp和gulp-sass:
$ npm install gulp gulp-sass --save-dev
在gulpfiles.js中添加下面的配置代码：
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./assets/css/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./dist/css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./assets/css/**/*.scss', ['sass']);
});
Grunt
和Gulp一样，需要安装依赖，比如grunt-sass:
$ npm install grunt grunt-sass --save-dev
在gruntfile.js中添加下面的配置代码：
grunt.initConfig({
sass: {
options: {
sourceMap: true
},
dist: {
files: {
'./dist/app.css': './assets/css/app.scss'
}
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.registerTask('default', ['sass']);
NPM Script
Gulp和Grunt编译Sass的任务都用的是node-sass模块，并且需要在package.json中安装node-sass：
$ npm install node-sass --save-dev
另外在build.json文件中添加下面配置代码：
"build:css": "node-sass assets/css/ /dist/css/ -r"
总结
上面的内容简单介绍了如何组织一个项目的Sass文件。其实介绍这方面的文章很多，也大同小异，早期也整理了一些，感兴趣的同学可以阅读下面相关文章，希望这些文章能给各位在组织自己项目的Sass文件时有所帮助：
- 组织Sass文件
- 管理Sass项目文件结构
- 如何组织一个Sass项目
- 流行框架的 Sass 体系结构解析
有关于Sass更多的相关教程，可以点击这里。如果你是初学Sass的，建议你阅读《Sass带来的变革》一文或者《Sass指南》一文。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/preprocessor/organize-your-sass-files.html