关于我

我是一丝

阿里妈妈 前端

• 「前端快爆」编辑
• Cube.css，Type.css作者

• 博客： https://github.com/yisibl/blog
• 微博： @一丝yisi

刀耕火种

手写前缀

.foo {
  transition: width .3s;
  -webkit-transition: width .3s;
  -moz-transition: width .3s;
  -ms-transition: width .3s;
  -o-transition: width .3s;
}

问题?

.foo {
  transition: width .3s; /*标准属性应该放到最后*/
  -webkit-transition: width .3s;
  -moz-transition: width .3s;
  -ms-transition: width .3s; /*IE 不用前缀*/
  -o-transition: width .3s;
}

大爆炸

CSS 预处理器兴起

• Sass(Ruby) 2006.10.5

  始于颠覆→.sass

  归于平凡→.scss

大爆炸

CSS 预处理器兴起

• Less(Ruby→JS)

  2009 → Alexis Sellier

  2012.5 → 作者不干了

大爆炸

CSS 预处理器兴起

• Stylus(JS)
  2011.2.1

  

国内 CSS 预处理器

实践者

• Less: 顾轶灵（est），Toobug（less中文社区），飞长等
• Sass: 大漠(Sass 中国)，wo_is神仙（base.sass） 等
• Stylus: Hax，CSS魔法（CMUI）等

预处理器特性

1. 变量

//Less
@linkcolor: #61c;

//Scss
$linkcolor: #61c;

//Stylus
$linkcolor = #61c;

2. mixin

Less

//Less
.transition(value) {
  -webkit-transition: value;
     -moz-transition: value;
       -o-transition: value;
          transition: value;
}
.foo {
  .transition(width .3s);
}

2. mixin

Sass

//Scss
@mixin transition($value) {
  -webkit-transition: $value;
     -moz-transition: $value;
       -o-transition: $value;
          transition: $value;
}
.foo {
  @include transition(width .3s);
}

2. mixin

Stylus
//Stylus
transition(value) {
  -webkit-transition: value;
     -moz-transition: value;
       -o-transition: value;
          transition: value;
}
.foo {
  transition(width .3s);
}

3. 嵌套

三者语法相同

a {
  color: #333;
    &:hover{
      text-decoration: underline;
  }
}
//输出：
a {
  color: #333;
}
a:hover{
  text-decoration: underline;
}

还有？

• 继承（inherit）
• 引入（import）
• 运算符（Operations）
• 条件语句
• ……

你真的需要这些吗？

后处理器怎么做？

.foo {
  transition: width .3s;
}

↓自动按需生成前缀

.foo {
  -webkit-transition: width .3s;
     -moz-transition: width .3s;
       -o-transition: width .3s;
          transition: width .3s;
}

后处理器怎么做？

/* 变量 */
:root {
  --fontSize: 14px;
  --mainColor: #333;
  --highlightColor: hwb(190, 35%, 20%);
}
/* 自定义 media queries */
@custom-media --viewport-medium (min-width: 760px) and (max-width: 990px);
/* 变量引用 以及使用 calc() 运算*/
body {
  color: var(--mainColor);
  font-size: var(--fontSize);
  line-height: calc(var(--fontSize) * 1.5);
  padding: calc((var(--fontSize) / 2) + 1px);
}
/* 颜色处理函数 */
a {
  color: color(var(--highlightColor) blackness(+20%));
  background: color(red a(80%))
}
/* 使用自定义 media queries */
@media (--viewport-medium) {
  .foo {
    display: flex;
    font-size: calc(var(--fontSize) * 2 + 6px);
  }
}

/* 变量 */
/* 自定义 media queries */
/* 变量引用 以及使用 calc() 运算*/
body {
  color: #333;
  font-size: 14px;
  line-height: 21px;
  padding: 8px;
}
/* 颜色处理函数 */
a {
  color: rgb(89, 142, 153);
  background: rgba(255, 0, 0, 0.8)
}
/* 使用自定义 media queries */
@media (min-width: 760px) and (max-width: 990px) {
  .foo {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-size: 34px;
  }
}  

在线演示

预处理器的痛点

• 多层嵌套，代码维护的灾难

  

预处理器的痛点

• 无法修正开发者错误或不规范的写法

.foo {
  position: absolute;
  display: block;

  float: left;
  display: block;
}

预处理器的痛点

• hao123.com CSS 只写 -webkit- 前缀的问题

.foo {
  display: -webkit-box;
}

什么是CSS后处理器？

典型的后处理工具

• CSS 压缩：clean-css
• 自动加前缀：Autoprefixer（基于 PostCSS）
• Rework，取代 Stylus
• PostCSS
  1. 更易扩展的 API
  2. 更好用的 Source Map
  3. 保留空白符

后处理框架

1. myth(基于 Rework)
2. cssnext(基于 PostCSS)

后处理器

预处理器

还有哪些问题？

CSSGrace 来搞定!

CSSGrace 特性演示

（稍后发布）

人性化的闭合浮动

CSSGrace 介绍

• 无需学习
• 无后顾之忧
• 面向未来

CSS 工作流

Grunt

module.exports = function(grunt) {
  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    postcss: {
      options: {
        processors: [
          require('cssgrace').postcss
        ]
      },
      dist: {
        src: ['src/*.css'],
        dest: 'build/grunt.css'
      }
    }
  });
  // 加载任务插件
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-postcss');
  // 默认任务
  grunt.registerTask('default', ['postcss']);
}

CSS 工作流

Gulp

var gulp = require('gulp');
var rename = require('gulp-rename');
var postcss = require('gulp-postcss');
var cssgrace = require('cssgrace');

gulp.task('default', function () {
    var processors = [
        cssgrace
    ];
    return gulp.src('src/*.css')
        .pipe(postcss(processors))
        .pipe(rename('gulp.css'))
        .pipe(gulp.dest('build'))
});
gulp.watch('src/*.css', ['default']);

预处理器和后处理器的关系

就酱~(≧▽≦)/