Sass与Compass分享

大部分内容来自《Sass与Compass实战》这本书（推荐），在这里把比较重要的部分和自己填过的坑整理出来，方便大家学习。

为了加强大家对模块化的重视，这里抄了一段推荐序里的内容：

回顾一下做过的项目，会发现我们曾经多么忽视CSS！ JavaScript有着高大上的设计模式和模 块规范，分布在精心设计过的目录里，而CSS仅仅被简单地堆积在一个文件里。它不重要吗？

安装

由于大家都已经开始使用compass了，安装步骤直接跳过:

sass安装参考这里

compass安装参考这里

Warning：团队之间请保持compass版本一致（否则会出现不能彼此编译对方的sass文件问题）

sass部分

注释（√）

/*! (大声注释，可用在版权信息部分)开头的注释在压缩和未经压缩的CSS文件中都会出现。

变量（√）

变量名以$符号开头，可包含所有可用作CSS类名的字符，包括下划线和中划线。

example:

$layout-width: 320px;
$color: red !default;

#wrapper {
  width: $layout-width;
  color: $color;
}

嵌套（√）

example1:

ul {
  width: 100%;

  li {
    color: red;
    ...
  }
}

example2(不推荐):

div {
  border: { //注意border后面的冒号
    width: 1px;
    color: red;
    style: solid;
  }
}

混合器（√）

example:(不要滥用)

@mixin radius {
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
        o-border-radius: 10px;
          border-radius: 10px;
}

div {
  @include radius();
}

混合器的原理是把属性复制到选择器下，滥用会出现大段重复的样式。

继承(?)

解决混合器属性重复，造成样式表冗余问题。

选择器继承(谨慎)

example:

.ok {
  border: 1px solid #f00;
}
.bad {
  @extend .ok;
  color: red;
}
// 在继承之后定义
h2.ok {
  background: yellow;
}

.bad将会继承样式表中任何位置处为.ok定义的所有样式。并且任何跟.ok有关的组合选择器样式也会被.bad以组合选择器的形式继承。

css:

.ok, .bad {
  border: 1px solid #f00;
}
.bad {
  color: red;
}
h2.ok, h2.bad {
  background: yellow;
}

Warning:不要在CSS规则中使用后代选择器（比如.foo .bar）去 继承CSS规则。如果你这么做生成CSS中的选择器的数量很快就会失控。

example:

.bip .baz{...}
.foo .bar{@extend .baz;}

css:

.bip .baz, .bip .foo .bar, .foo .bip .bar {...}

占位符继承

%ok {
  border: 1px solid #f00;
}

控制指令

@for指令用来计数，每数一个数字则使用一个样式块。它有两种相似的语法： @for $i from 1 to 5 {...} 以及@for $i from 1 through 5 {...} 。对于两种语法，首先设置变量$i为1，然后每使用一次块中的样式就增加1。两种语法的不同之处在于$i停止计数的位置：对于1 to 5，它停在4；而对于 1 througn 5，它停在5。

example:

@for $i from 1 through 5 {
  .rating-#{$i} {
    background-image: url(/images/rating-#{$i}.png);
  }
}

@each的语法是@each $item in foo, bar, baz {...} ，会依次将foo、 bar和baz的值赋给$item变量。

example:

@each $section in home, about, archive, projects {
  nav .#{$section} {
    background-image: url(/images/nav/#{$section}.png);
  }
}

@if指令的语法是@if condition{...} ，其中的condition可以是一个布尔值，一个带有 布尔值的表达式。

example:

@if $ifabsolute {
  position: absolute;
  $ifabsolute: false;
}

Compass部分

重置样式表

用这个例子说明compass的模块组织

@include global-reset;

or

@import "compass/reset";

精灵

syntax:

@include all-<map>-sprites;
@include <map>-sprite($name);

注意这里的map是一个占位符，表示精灵的名称

example:

@import "icons/*.png";
@include all-icons-sprites;

这样all-icons-sprites混合器将会为精灵地图中的每个精灵撰写必要的CSS（以icons-图片名称为class）

你也可以通过使用@include <map>-sprite($name);混合器来针对单个的精灵输出 CSS。

example:

@import "icons/*.png";
element {
  @include icons-sprites(xxx);
}

icons是存放精灵原始图片的文件夹，compass会以这个名字作为生成的精灵的名称，如果你从嵌套文件夹导入了精灵，那么Compass会使用最末端的包含精灵的文件夹名。

配置精灵

syntax：

$<map>-<property>: setting;
$<map>-<sprite>-<property>: setting;

example:

$icons-spacing: 10px;

warning:配置必须放在精灵生成之前，即@import "icons/*.png";之前。

其它的可配置项为:

• 重复性$<map>-repeat: no-repeat/repeat-x;,$<map>-<sprite>-repeat: no-repeat/repeat-x;

• 精灵的位置$<map>-position: 0px;,$<map>-<sprite>-position: 0px;

• 精灵布局（默认为垂直布局）$<map>-layout: vertical/horizontal/diagonal/smart;采用智能布局不可以设置精灵间距，大坑

• 精灵基础类$<map>-sprite-base-class: ".class-name";默认每个精灵地图的基础类都以其文件夹的名字命名

• 魔术精灵选择器（默认开启）$disable-magic-sprite-selectors: true/false;

位置和重复性的设置只会应用到横向或纵向布局的精灵地图中。对于采用智能布局或对角线布局的精灵地图，位置和重复性的设置是无效的。

工具

获取宽高<map>-sprite-height($name),<map>-sprite-width($name)如果你想要为精灵地图中的每个精灵自动设置尺寸，你可以为这个精灵地图设置一个配置变量。$<map>-sprite-dimensions: true/false;

辅助器

• 创建精灵$icons: sprite-map("icons/*.png", $layout: smart);

• 撰写样式sprite($map, $sprite, [$offset-x], [$offset-y])

性能

查看样式表的统计数据:

gem install css_parser

compass stats

参考《sass与compass实战》