Sass

注：配合查看：Sass和Compass设计师指南 

Sass是基于Ruby编程语言的命令行工具。要使用它就必须先在电脑上安装Ruby，Ruby的安装可以通过网址：http://rubyinstaller.org/downloads/，下载最新版Ruby进行安装，安装完后可以使用ruby -v进行验证是否安装成功

Sass安装

通过使用Ruby自带的 RubyGems的系统来进行安装

$ gem install sass

使用sass -v验证是否安装成功

Sass使用

sass test.scss

可以在命令行显示.scss文件转化的css代码

sass test.scss test.css

 可以将命令行显示的结果保存成文件

Sass提供的编译风格：

1、nested ： 嵌套缩进的CSS代码，它是默认值

2、expanded ： 没有缩进的、扩展的CSS代码

3、compact ：简洁格式的CSS代码

4、compressed ： 压缩后的CSS代码

编译风格的使用：

sass  --style compressed test.scss test.css

让Sass监听某个文件或目录，一旦源文件改动，自动生成编译后的版本

监听文件

sass --watch input.scss:output.css

 监听目录

sass --watch app/sass:public/stylesheets

sass语法

1、老版本.sass后缀的语法

通过tab键缩进的一种语法规则，并且要求非常严格，还不带有任何大括号和分号，容易出错，不太被接受（Python程序员应该会很喜欢）

2、.scss后缀的语法

sass的新语法格式，外形与CSS几乎一模一样，代码都包裹在一对大括号里，末尾结束处都有一个分号

基本用法

1、变量

所有变量以$开头

$blue : #1875e7;

div {
    color : $blue;
}

 若变量需嵌套在字符串中，就必须写在#{}中

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

2、计算功能

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

3、嵌套

div h1 {
    color: red;
}

可以写成：

div {
    h1 {
        color: red;
    }
}

属性也可以嵌套：

p {
    border: {
        color: red;
    }
}

注：border后面必须加冒号

在嵌套的代码块内，可以使用&引用父元素，例：a:hover可以写成

a {
    &:hover{ color: #ffb3ff;}
}

4、注释

标准的CSS注释/* */会被保留到编译后的CSS文件中

单行注释//，只保留在SASS文件中，编译后被删除

在/* 后加个!，表示是重要注释，即使使用压缩模式编译，也会保留这行注释，可用于声明版权信息

/* !

    重要注释

*/

 代码重用

1、继承

SASS允许一个选择器继承另一个选择器。例：

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

class2要继承class1就要使用@extend命令

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

2、Mixin

Mixin有点像C语言的宏（macro），是可以重用的代码块

使用@mixin定义个一个代码块

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

 使用@include命令，调用这个宏

div {
    @include left;
}

mixin的强大之处在于可以指定参数和缺省值

@mixin left($value: 10px) {
    float: left;
    margin-left: $value;
}

使用时根据情况输入参数

div {
    @include left(20px);
}

示例：

@mixin rounded($vert, $horz, $radius: 10px) {
    border-#{$vert}-#{$horz}-radius: $radius;
    -moz-border-radius-#{$vert}#{$horz}: $radius;
    -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

注：Firefox支持的厂商前缀写法是非标准的-moz-border-radius-topleft，而不是-moz-border-top-left-radius

调用

#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }

3、颜色函数

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

4、插入文件

@import命令用以插入外部文件

@import "path/filename.scss";

若插入的是css文件，则等同于css的import命令

@import “foo.css”;

高级用法

1、条件语句

@if可以用来判断：

p {
    @if 1 + 1 == 2 {border: 1px solid #ddd; }
    @if 5 < 2 {border: 2px dotted #ccc; }
}

以及@else配套使用

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

2、循环语句

for循环

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

while循环

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

each循环

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

3、自定义函数

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

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

注：本文参考自：http://www.ruanyifeng.com/blog/2012/06/sass.html