sass和compass的使用

原文链接1：http://www.ruanyifeng.com/blog/2012/06/sass.html

原文链接2：http://www.ruanyifeng.com/blog/2012/11/compass.html

sass是一种“css预处理器”，而compass是sass的工具包，两者都是ruby实现，所以需要使用的话，先装ruby以及ruby的包管理器gem，然后安装即可。

1.sass的基本语法

编译

　 
    * nested：嵌套缩进的css代码，它是默认值。
 　 * expanded：没有缩进的、扩展的css代码。
　　* compact：简洁格式的css代码。
　　* compressed：压缩后的css代码。

　　sass --style compressed test.sass test.css

变量

$blue : #1875e7;　
　  div {
　　　color : $blue;
　　}

　  $side : left;
　　.rounded {
　　　　border-#{$side}-radius: 5px;
　　}

计算

　  body {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

嵌套

/*元素嵌套*/
    div {
　　　　hi {
　　　　　　color:red;
　　　　}
　　}

    /*属性也可以嵌套，比如border-color属性，border后面必须加上冒号*/
　  p {
　　　　border: {
　　　　　　color: red;
　　　　}
　　}

继承

.class1 {
　　　　border: 1px solid #ddd;
　　}

  　.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

mixin

类似c语言的宏，不过mixin还能有参数

@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}

　  div {
　　　　@include left;
　　}

/*还能定义参数，这个非常实用*/
    @mixin left($value: 10px) {
　　　　float: left;
　　　　margin-right: $value;
　　}

　  div {
　　　　@include left(20px);
　　}

引入外部文件

@import "path/filename.scss";

@if...@else

@if lightness($color) > 30% {
　　　　background-color: #000;
　　} @else {
　　　　background-color: #fff;
　　}

@for、@while、@each

@for $i from 1 to 10 {
　　　　.border-#{$i} {
　　　　　　border: #{$i}px solid blue;
　　　　}
　　}

    $i: 6;
　　@while $i > 0 {
　　　　.item-#{$i} { width: 2em * $i; }
　　　　$i: $i - 2;
　　}

    @each $member in a, b, c, d {
　　　　.#{$member} {
　　　　　　background-image: url("/image/#{$member}.jpg");
　　　　}
　　}

自定义函数

@function double($n) {
　　　　@return $n * 2;
　　}

　　#sidebar {
　　　　width: double(5px);
　　}

2.compass的用法

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

CSS3模块

目前，该模块提供19种CSS3命令，具体参见官方文档。

/*圆角*/　
    @import "compass/css3";
　　.rounded {
　　　　@include border-radius(5px);
　　}

    /*编译后代码*/
　  .rounded {
　　　　-moz-border-radius: 5px;
　　　　-webkit-border-radius: 5px;
　　　　-o-border-radius: 5px;
　　　　-ms-border-radius: 5px;
　　　　-khtml-border-radius: 5px;
　　　　border-radius: 5px;
　　}

    /*透明*/
    @import "compass/css3";
　　#opacity {
　　　　@include opacity(0.5); 
　　}
 
    /*编译后*/
    #opacity {
　　　　filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);
　　　　opacity: 0.5;
　　}


    /*行内区块*/
    @import "compass/css3";
　　#inline-block {
　　　　@include inline-block;
　　}

    /*编译后*/
    #inline-block {
　　　　display: -moz-inline-stack;
　　　　display: inline-block;
　　　　vertical-align: middle;
　　　　*vertical-align: auto;
　　　　zoom: 1;
　　　　*display: inline;
　　}

    /*更多参考官方文档*/

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";
　　table {
　　　　@include table-scaffolding;
　　}

    /*生成后*/
　  table th {
　　　　text-align: center;
　　　　font-weight: bold;
　　}
　　table td,
　　table th {
　　　　padding: 2px;
　　}
　　table td.numeric,
　　table th.numeric {
　　　　text-align: right;
　　}

Helper函数

@import "compass";
　　.icon { background-image: inline-image("icon.png");}

    /*编译后*/
    .icon { background-image: url('data:image/png;base64,iBROR...QmCC');}