Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

简介

Sass 属于 CSS 扩展语言, 用于以更灵活且强大的语法组织 CSS 代码.

简单来说, Sass 提供了一系列高级特性, 如变量, 嵌套选择, 可以在 Sass 文件中使用这些特性编写 Sass 代码, 然后通过预编译, 成为可以在浏览器中使用的 CSS 文件, 如:

article {
  margin-bottom: 30px;
  a {
    color: blue;
    &:hover { color: red; }
  }
}

会被编译为:

article { margin-bottom: 30px; }
article a { color: blue; }
article a:hover { color: red; }

安装

Sass: Install Sass

Sass 可以在 Linux, Mac, Windows 上安装, 支持命令行, 也有丰富的图形化软件.

使用

Sass 支持 Sass 和 SCSS 两种写法, 区别见 Sass Syntax, Sass 和 SCSS 之间可以互相转换, 并编译为同样的 CSS 代码. 本文使用 SCSS.

sass input.sass output.css

Sass 可以监听文件变化并实时地将 Sass 文件编译为 CSS:

sass --watch src/sass:public/stylesheets

实例

变量和值的计算

// 定义变量
$nav-color: #999;
// 在变量中引用其他变量, 注意颜色值的计算
$nav-border: 1px solid $nav-color + #111;

nav {
  // 局部变量
  $gutter: 10px;
  // 使用
  padding-left: $gutter;
  padding-right: $gutter * 2;
  color: $nav-color;
  border: $nav-border;
}

编译结果:

nav {
  padding-left: 10px;
  padding-right: 20px;
  color: #999;
  border: 1px solid #aaa;
}

默认值

// _reset.scss
// 普通值始终会以后定义覆盖先定义
$black: #2a2a2a;
// 默认值始终会被覆盖, 无论先后
$gray: #e2e2e2 !default;

// page1.scss
@import "reset";

body {
  // $black 未设置, 使用 "reset" 中的值
  color: $black;
  // $gray 未设置, 采用 "reset" 中的值
  background-color: $gray;
}

// page2.scss
$black: #000;
$gray: #e5e5e5;

@import "reset";

body {
  // 虽然定义了 $black, 但是被 "reset" 覆盖, 最终为 "reset" 中的值
  color: $black;
  // 定义了 $gray, 即使在定义后又引入了 "reset" , 但不会覆盖
  background-color: $gray;
}

编译结果:

/* page1.css */
body {
  color: #2a2a2a;
  background-color: #e2e2e2;
}

/* page2.css */
body {
  color: #2a2a2a;
  background-color: #e5e5e5;
}

嵌套选择器

article {
  margin-bottom: 30px;
  a {
    color: blue;
    // 父选择器
    &:hover { color: red; }
  }
  // 父选择器额外用法
  .list & { border-bottom: 1px solid #eee; }
}

// 群组选择器
nav, aside {
  a { color: blue; }
}

// 属性嵌套
nav {
  font: {
    size: 14px;
    weight: bold;
  }
  border: 1px solid #eee {
    left: 0;
    right: 0;
  }
}

编译结果:

article { margin-bottom: 30px; }
article a { color: blue; }
article a:hover { color: red; }
.list article { border-bottom: 1px solid #eee; }
nav a, aside a { color: blue; }
nav {
  font-size: 14px;
  font-weight: bold;
  border: 1px solid #eee;
  border-left: 0;
  border-right: 0;
}

导入文件

/* 
 * 导入的文件有两种类型, 一种是常规的 sass 文件, 其本身是另外
 * 一个可编译的 sass 文件;
 * 另一种称为局部文件, 局部文件以 "_" 开头, 如 "_layout.scss",
 * 局部文件本身不会被编译为单独的 css 文件, 专门被作为其他文件
 * 的局部引入;
 * 
 * 引入普通文件的时候, 可以省略文件后缀, 如 "layout" 即代表引入
 * "layout.scss" 文件. 而引入局部文件时, 进一步省略前面的 "_" 
 * 号, 如 "layout" 代表引入 "_layout.scss" 文件.
 *
 * 如果目录中同时存在 "layout.scss" 和 "_layout.scss" 
 * 文件, 编译将报错.
 */
@import "layout";
// 相对目录
@import "../mixins/css3";

混合 (mixin)

@mixin fixed-top {
  position: fixed;
  top: 0;
  left: 0;
}

// 带参数
@mixin rounded-corners($radius) {
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

// 默认值
$pink = #f25f70
@mixin link-color(
  $normal,
  $hover: $pink,
  $visited: $hover
  ) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

// 引用混入
nav {
  @include fixed-top;
  @include rounded-corners(5px);
  a { @include link-color(#d2d2d2); }
}

编译结果:

nav {
  position: fixed;
  top: 0;
  left: 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
nav a { color: #d2d2d2; }
nav a:hover { color: #f25f70; }
nav a:visited { color: #f25f70; }

继承

.btn {
  border: 1px solid gray;
  background-color: #f2f2f2;
}

.btn-error { @extend .btn; }

// 任何与 .btn 相关的选择器都会被继承, 而且继承是全局生效的
nav > .btn { color: #fff; }

// 最好不要使用后代选择器继承, 注意编译后的 css
#sidebar a { @extend .btn; }

p.info { color: #ff6666; }

// 只继承直接命中的选择器, 即 p.info 的样式
.info-warning { @extend p.info; }

// 不会被继承, 因为只命中 .info , 没有命中 p.info
.info { text-align: center; }

编译结果:

.btn, .btn-error, #sidebar a {
  border: 1px solid gray;
  background-color: #f2f2f2;
}

/* 注意 #sidebar a 的继承关系, a 继承于 .btn, 不需要完全命中 #sidebar a */
nav > .btn, nav > .btn-error, #sidebar nav > a { color: #fff; }

p.info, .info-warning { color: #ff6666; }

.info { text-align: center; }

注释

// 单行注释不会出现在编译后的 css 文件中

/* 多行注释会出现在编译后的 css 文件中 */

REFERENCE

Sass

Sass and Compass in Action by Wynn Netherland, Nathan Weizenbaum, Chris Eppstein, Brandon Mathis