SASS

2007年诞生，最早也是最成熟的CSS预处理器SASS使用。ruby作为引擎，两者的关系就跟C++和Javascript的关系一样

安装好ruby就可使用：

sudo gem install sass

SASS

// watch a file
sass --watch input.scss:output.css

// watch a directory
sass --watch app/sass:public/stylesheets

SASS

// watch a file
sass --watch input.scss:output.css

// watch a directory
sass --watch app/sass:public/stylesheets

官网

MORE

SASS

CSS COMPATIBLE（完全兼容CSS）
FEATURE RICH（特性齐全）
MATURE（非常成熟）
INDUSTRY APPROVED（企业级的应用和改善）
LARGE COMMUNITY（社区强大）
FRAMEWORKS（基于sass的样式框架）

SASS - Compass

Compass is an open-source CSS Authoring Framework

Compass

SASS

@import compass/css3
 
.box-sizing-example
  background: red
  padding: 20px
  border: 10px solid green
  margin: 20px
  width: 200px
 
#content-box
  +box-sizing(content-box)
 
#border-box
  +box-sizing(border-box)

x.sass

@import "compass/css3";
 
.box-sizing-example {
  background: red;
  padding: 20px;
  border: 10px solid green;
  margin: 20px;
  width: 200px;
}
 
#content-box {
  @include box-sizing(content-box);
}
 
#border-box {
  @include box-sizing(border-box);
}

x.scss(Recommend)

SASS

var sass = require('node-sass');
sass.render({
    file: scss_filename,
    success: callback
    [, options..]
    });
// OR
var css = sass.renderSync({
    data: scss_content
    [, options..]
});

Node.js bindings to libsass

NodeJS

LESS

LESS 2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代。

LESS

 LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

NodeJS

LESS

npm install -g less

lessc styles.less > styles.css

var less = require('less');

less.render('.class { width: (1 + 1) }', function (e, css) {
  console.log(css);
});

LESS

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

在客户端使用 Less.js 是最容易的方式，并且在开发阶段很方便，但是，在生产环境中，性能和可靠性非常重要，我们建议最好使用 node.js 或其它第三方工具进行预编译。

官网

中文

快速入门

STYLUS

Stylus，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如SASS和LESS。

Github

官网

软文 - - !

STYLUS

npm install stylus -g

stylus --watch stylus/main.styl

stylus -w folder/

Getting Started with Stylus

COMPARE

/* style.scss or style.less */
h1 {
  color: #0982C1;
}

/* style.styl */
h1 {
  color: #0982C1;
}
 
/* omit brackets */
h1
  color: #0982C1;
 
/* omit colons and semi-colons */
h1
  color #0982C1

COMPARE

$mainColor: #0982c1;
$siteWidth: 1024px;
$borderStyle: dotted;
 
body {
  color: $mainColor;
  border: 1px $borderStyle $mainColor;
  max-width: $siteWidth;
}

@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;
 
body {
  color: @mainColor;
  border: 1px @borderStyle @mainColor;
  max-width: @siteWidth;
}

mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted
 
body
  color mainColor
  border 1px $borderStyle mainColor
  max-width siteWidth

SASS

LESS

STYLUS

body {
  color: #0982c1;
  border: 1px dotted #0982c1;
  max-width: 1024px;
}

OUT

COMPARE

section {
  margin: 10px;
 
  nav {
    height: 25px;
 
    a {
      color: #0982C1;
   
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

SASS LESS STYLUS

section {
  margin: 10px;
}
section nav {
  height: 25px;
}
section nav a {
  color: #0982C1;
}
section nav a:hover {
  text-decoration: underline;
}

OUT

COMPARE

@mixin error($borderWidth: 2px) {
  border: $borderWidth solid #F00;
  color: #F00;
}
 
.generic-error {
  padding: 20px;
  margin: 4px;
  @include error();
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  @include error(5px);
}

SASS mixin

COMPARE

.error(@borderWidth: 2px) {
  border: @borderWidth solid #F00;
  color: #F00;
}
 
.generic-error {
  padding: 20px;
  margin: 4px;
  .error();
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  .error(5px);
}

LESS mixin

COMPARE

error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
 
.generic-error {
  padding: 20px;
  margin: 4px;
  error();
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px);
}

STYLUS mixin

COMPARE

.generic-error {
  padding: 20px;
  margin: 4px;
  border: 2px solid #f00;
  color: #f00;
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  border: 5px solid #f00;
  color: #f00;
}

mixin out

COMPARE

.block {
  margin: 10px 5px;
  padding: 2px;
}
 
p {
  @extend .block; 
  border: 1px solid #EEE;
}
ul, ol {
  @extend .block; 
  color: #333;
  text-transform: uppercase;
}

SASS STYLUS Inheritance

COMPARE

.block, p, ul, ol {
  margin: 10px 5px;
  padding: 2px;
}
p {
  border: 1px solid #EEE;
}
ul, ol {
  color: #333;
  text-transform: uppercase;
}

SASS STYLUS Inheritance out

COMPARE

.block {
  margin: 10px 5px;
  padding: 2px;
}
 
p {
  .block;
  border: 1px solid #EEE;
}
ul, ol {
  .block;
  color: #333;
  text-transform: uppercase;
}

LESS Inheritance use mixin

COMPARE

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  margin: 10px 5px;
  padding: 2px;
  border: 1px solid #EEE;
}
ul,
ol {
  margin: 10px 5px;
  padding: 2px;
  color: #333;
  text-transform: uppercase;
}

LESS Inheritance use mixin out

COMPARE

/* file.{type} */
body {
  background: #EEE;
}

@import "reset.css";
@import "file.{type}";
 
p {
  background: #0982C1;
}

SASS LESS STYLUS

@import "reset.css";
body {
  background: #EEE;
}
p {
  background: #0982C1;
}

OUT

COMPARE

MORE