CSS之SASS

原文在此

一.SASS

学过CSS的人都知道，它不是一种编程语言。

很自然地，有人就开始为CSS加入编程元素，这被叫做”CSS预处理器”（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。

SASS就是CSS的预处理器之一。（其他还有LESS，Stylus，Dtcss等）

二.安装和使用

1.安装

SASS是用Ruby写的，必须先安装Ruby，再安装SASS

Windows下载RubyInstallers

我选的是Ruby2.1.7（x64)

安装时我三个选项全选了（Install Tcl.TK support;Add Ruby executables to your Path;Associate .rb and .rbw with…）

然后打开这个



输入

gem install sass

进行SASS安装。

# 安装beta版本
gem install sass --pre
# 从sass的Git repository来安装
git clone git://github.com/nex3/sass/git
cd sass
rake install
# 升级SASS
gem update sass
# 查看sass版本的命令行为
sass -v
# 运行帮助命令
sass -h

三，基本用法

1.变量（所有变量以$开头）

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

如果变量需要镶嵌在字符串之中，就必须写在#{}之中

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

2.计算功能

SASS允许在代码中使用算式

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

3.嵌套

SASS允许选择器嵌套

div h1{
color:red;
}
可以写成：
div{
h1{
color:red;
}
}
属性也可以嵌套，比如border-color属性
p{
border:{
color:red;
}
}
border后面必须加上冒号
在嵌套的代码块内，可以使用&引用父元素，比如a:hover伪类
a{
&:hover{
color:#ffb3ff;
}
}

4.注释

1.标准的CSS注释： /*comment*/,会保留到编译后的文件
2.单行注释//comment,只保留在SASS源文件中，编译后被省略。
3.重要注释
/*!
　　重要注释！
*/

四.代码重用

1.继承

SASS允许一个选择器，继承另一个选择器，比如，现有class1：

.class1{
border: 1px solid #ddd;
}
# class2要继承class1,就要使用@extend命令
.class2{
@extend .class1;
font-size:120%;
}

Mixin

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

# 使用@mixin 命令，定义一个代码块
@mixin left{
float: left;
margin-left: 10px;
}
# 使用@include命令，调用这个mixin
div{
@include left;
}

# mixin 可以指定参数和缺省值
@mixin left($value: 10px){
float: left;
margin-right: $value;
}
#使用时，根据需要加入参数：
div{
@include left(20px);
}

下面是一个mixin的实例，用来生成浏览器前缀。

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

# 调用时：
#nav 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 @else

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

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

2. 循环语句

SASS支持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
@each $member in a,b,c,d{
.#{$member}{
background-image:url("/images/#{$member}.jpg");
}
}

3.自定义函数

@function double($n){
@return $n *2 ;
}
#sidebar{
width:double(5px);
}