组织你的 Sass 文件

Question

组织文件是每个项目的重要一步，特别是如果你半年重新打开这个项目的时候，你会发现，文件组织得好，对于你理解项目会有很大的帮助。

如果你从未接触过 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 文件。