组织你的Sass文件

发布于大漠

8 年前

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

如果你从未接触过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指南》一文。

本文根据@Osternaud Clement的《Organize your Sass files》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处:https://medium.com/@osternaud_clem/organize-your-sass-files-b2c2513f3fcf#.2ma43dgkx。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

如需转载，烦请注明出处：https://www.fedev.cn/preprocessor/organize-your-sass-files.htmlAir Jordan III 3 Shoes