组织你的 Sass 文件 - 文章教程

组织你的 Sass 文件

发布于 2021-07-28 字数 8307 浏览 944 评论 0

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

如果你从未接触过 Sass,你可以先阅读一下 Sass 指南

Sass 到目前为止有两种语法书写格式。第一种称之为 SCSS(Sassy CSS),并且在整个规范中都使用这种语法格式,也是 CSS 语法的一种扩展。这意味着每个有效的 CSS 文件也是有效的 SCSS 文件。另外,SCSS能理解大多数CSS的Hack和浏览器特定的前缀语法。例如老版本IE过滤器语法。使用此语法的文件扩展名是 .scss。另一种称之为Sass,是 Sass 的最初书写模式,其格式和 Ruby 类似。

创建多个文件

为了更好的组织项目文件,我们将代码分割在几个文件夹和文件中。通过会在 asset 文件夹中创建一个 css 文件夹,并且在 asset 中还包括了 iconsimagesjs 文件夹。

接着让我们创建第一个也是主要的文件:app.scss

这个文件将导入所有组件和其他的 .scss 文件。不过现在是空白的。

完成了?并没有,接下来创建我们需要的其他文件夹:

  • helpers
  • components
  • layouts
  • pages

Helpers

helpers 文件夹将包含项目需要的 functionsmixinsvariables

例如:

── 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语言。

我们可以使用 GulpGrunt 或者 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 文件。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

虐人心

有一天你能到我的心里去,你会看到那里全是你给的伤悲。

46 文章
6 评论
24490 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3