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 }}

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

//sassarticle a {  color: blue;  &:hover { color: red }}//cssarticle a { color: blue }article a:hover { color: red }

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

>

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

+

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

~

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

属性嵌套

//sassnav {  border: 1px solid #ccc {  left: 0px;  right: 0px;  }}//CSSnav {  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;  }}//sassul.plain {  color: #444;  @include no-bullets;}//cssul.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命令，可以直接调用。