SASS&Compass语法学习

之前已经了解了sass和compass，但是都只看了皮毛，今天要深入看看他们的用法，在以后的项目中使用起来。

Sass的使用

来源：SASS中文网

变量

Sass使用 ： $color: #666; 的方式定义变量

变量名可以用中划线和下划线进行分隔，并且互相兼容，即 $link-color 和 $link_color 一样并且可以混用。但是中划线更为普遍，compass也使用中划线。

嵌套CSS规则

css中需要重复写选择器的，在sass中直接嵌套即可：

//css
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
//sass
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

这里要注意，当使用伪类的时候，要使用父选择器&，编译的时候&会替换父元素
这里如果没有&，将会报错。

//sass
article a {
  color: blue;
  &:hover { color: red }
}
//css
article a { color: blue }
article a:hover { color: red }

子组合选择器和同层组合选择器：> + ~

>

//article下的所有section
article section { margin: 5px }
//article下紧跟着的子元素中section
article > section { border: 1px solid #ccc }

+

//选择header和其后紧跟的p元素
header + p { font-size: 1.1em }

~

//选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素：
article ~ article { border-top: 1px dashed #ccc }

属性嵌套

//sass
nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
//CSS
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

导入SASS文件

css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。
sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器均可在导入文件中使用。

使用@import "colors"; 就可以导入colors.scss文件。

通常，有些sass文件用于导入，你并不希望为每个这样的文件单独地生成一个css文件。对此，sass用一个特殊的约定来解决：
此约定即，sass局部文件的文件名以下划线开头

这样，局部文件命名使用下划线_开头，编译的时候就不会编译局部文件，其他sass文件引用局部sass文件时，文件名也可以省略下划线。

实际上这也就是把css模块化了。

静默注释

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

混合器

混合器使用 @mixin 标识符定义，使用 @include 标识符来使用。

我的理解是，混合器相当于css的函数，把常用的样式封装在一个混合器里边，需要的时候直接@include进行调用即可。

混合器中的css规则

混合器中还可以使用sass的嵌套：

//混合器
@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}
//sass
ul.plain {
  color: #444;
  @include no-bullets;
}
//css
ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

另外还可以给混合器传递参数：

//混合器传参
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
//穿多个参数的混合器使用时，可能会忘记参数的顺序和意思。sass允许使用
$name:value   //这样的形式传参，这样参数就不用在乎顺序了。

另外可以设置参数默认值，例如：

@mixin link-colors($normal,$hover: $normal, $visited: $normal) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

当使用@include link-colors(red)的时候，$hover和$visited也会被自动赋值为red。

使用选择器继承来精简css

选择器继承是说：一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend 语法实现：

//通过选择器继承继承样式
.error {
  border: 1px red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

上边代码中，.seriousError将会继承样式表中任何位置处为.error定义的所有样式。以class=”seriousError” 修饰的html元素最终的展示效果就好像是class=”seriousError error”。

.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承，如下代码:

//.seriousError从.error继承样式
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}

任何css规则都可以继承其他规则，几乎任何css规则也都可以被继承。

Compass用法指南

来源：阮一峰大神的博客

Compass是Sass的一个工具库，使用它能够更方便的使用sass。就像是javascript和jquery的关系一样。

compass的安装就不说了，之前的博客中已经有了。在gulp中也有compass模块，很好用。

Compass的模块

Compass采用模块结构，不同模块提供不同的功能。目前，它内置五个模块：

　 * reset 重置
　 * css3 css3功能
　　* layout 布局
　　* typography 版式
　　* utilities 其他功能

看了上边的sass语法之后可以发现，其实compass就是一些帮你写好的sass模块。使用的时候就用sass的@import 来引入模块，如@import “compass/reset”; 。 还有的模块中放着帮你写好的混合器mixin，使用的时候要县引入模块，再@include + 混合器名 就可以了。

compass的混合器还会自动帮你加上浏览器兼容前缀。

reset模块

@import "compass/reset";

这样一句话就可以生成css的reset代码了。

CSS3模块

目前该模块提供21种命令，常用的如下：

//引入css3模块
@import "compass/css3";

//圆角
.rounded {
　　　　@include border-radius(5px);
　　　　//只让左上角为圆角
　　　　@include border-corner-radius(top, left, 5px);
　　}
//透明度
#opacity {
　　　　@include opacity(0.5); 
　　}
//行内区块
#inline-block {
　　　　@include inline-block;
　　}

layout模块

比如，指定页面的footer部分总是出现在浏览器最底端：

@import "compass/layout";
　　#footer {
　　　　@include sticky-footer(54px);
　　}

又比如，指定子元素占满父元素的空间：

@import "compass/layout";
　　#stretch-full {
　　　　@include stretch; 
　　}

typography模块

该模块提供版式功能。
比如，指定链接颜色的mixin为：link-colors($normal,$hover, $active,$visited, $focus);

@import "compass/typography";
　　a {
　　　　@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
　　}

utilities模块

其他功能：
比如，清除浮动：

　import "compass/utilities/";
　　.clearfix {
　　　　@include clearfix;
　　}

Helper函数

除了模块，Compass还提供一系列函数。
有些函数非常有用，比如image-width()和image-height()返回图片的宽和高。
再比如，inline-image()可以将图片转为data协议的数据。

函数与mixin的主要区别是，不需要使用@include命令，可以直接调用。