|
|
|
# Sass与Compass分享
|
|
|
|
|
|
|
|
大部分内容来自《Sass与Compass实战》这本书（推荐），在这里把比较重要的部分和自己填过的坑整理出来，方便大家学习。
|
|
|
|
|
|
|
|
为了加强大家对模块化的重视，这里抄了一段推荐序里的内容：
|
|
|
|
|
|
|
|
**回顾一下做过的项目，会发现我们曾经多么忽视CSS！ JavaScript有着高大上的设计模式和模
|
|
|
|
块规范，分布在精心设计过的目录里，而CSS仅仅被简单地堆积在一个文件里。它不重要吗？**
|
|
|
|
|
|
|
|
## 安装
|
|
|
|
|
|
|
|
由于大家都已经开始使用compass了，安装步骤直接跳过:
|
|
|
|
|
|
|
|
sass安装参考[这里](http://sass-lang.com/install)
|
|
|
|
|
|
|
|
compass安装参考[这里](http://compass-style.org/install/)
|
|
|
|
|
|
|
|
**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实战》 |
...
|
...
|
|
