标签：
在线转换器 http://sassmeister.com/
http://www.ruanyifeng.com/blog/2012/06/sass.html
一、什么是SASS
SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
本文总结了SASS的主要用法。我的目标是，有了这篇文章，日常的一般使用就不需要去看官方文档了。
二、安装和使用
2.1 安装
SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。
假定你已经安装好了Ruby，接着在命令行输入下面的命令：
gem install sass
然后，就可以使用了。
2.2 使用
SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。
下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）
sass test.scss
如果要将显示结果保存成文件，后面再跟一个.css文件名。
sass test.scss test.css
SASS提供四个编译风格的选项：
* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。
生产环境当中，一般使用最后一个选项。
sass --style compressed test.sass test.css
你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
SASS的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子。
/*sass基本用法解析*/
/*1.sass允许使用变量，以$开头*/
$blue : #1875e7;
$num: 8px;
$side: left;
.div {
color : $blue;
}
.rounded {
border-#{$side}-radius: 5px;
}
.ml {
margin-#{$side}:$num;
}
/*2.sass 允许代码中使用公式 */
.div2 {
margin:(14px/7);
top:50px + 100px;
left:$num*2;
}
/*3.1 SASS允许选择器嵌套*/
.div3 {
.div4 {
color:$blue;
}
}
/*3.2 SASS 属性也可以嵌套(注意：属性后面必须加冒号border:)*/
.div5 {
border:{
left:{
color:#000;
}
}
}
/*4 SASS有两种注释风格*/
//4.1 /**/ 标准的CSS注释 /* comment */ ，会保留到编译后的文件
//4.2 // 单行注释 // comment，只保留在SASS源文件中，编译后被省略
//4.3 /*! */ 在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
/*5 sass可以继承 */
.div6 {
@extend .div5 ;
@extend .div3;
font-size:12px;
}
/*6 Mixin*/
//Mixin有点像C语言的宏（macro），是可以重用的代码块
//使用@mixin命令，定义一个代码块
@mixin fl($val:10px) {
float:left;
margin-top:5px;
margin-right:$val;
}
//使用@include命令，调用这个mixin
.div7 {
@include fl(20px);
@extend .div2;
}
//mixin的强大之处，在于可以指定参数和缺省值
@mixin corner($v,$h,$radius:10px){
border-#{$v}-#{$h}-radius:$radius;
-moz-border-#{$v}-#{$h}-radius:$radius;
-webkit-border-#{$v}-#{$h}-radius:$radius;
}
.div8 {
@include corner(left,top);
}
.div9 {
@include corner(left,top,5px);
}
/*7 颜色函数 */
//SASS提供了一些内置的颜色函数，以便生成系列颜色
.c1 {
color:lighten(#cc3, 10%);
}
.c2 {
color:darken(#cc3, 10%);
}
.c3 {
color:grayscale(#cc3);
}
.c4 {
color:complement(#cc3);
}
/*8 插入文件@import */
/*9 高级语法 */
//9.1 条件语句
//9.2 循环语句
//9.3 自定义函数
//@if可以用来判断：配套的还有@else命令：
.div10 {
@if 1+1==2 { border:1px solid #000;}
@if 5<3 { border:2px solid #000;}
}
.div11 {
@if lightness(#cc3)>30%{
background-color: #000;
}@else {
background-color: #ff0000;
}
}
//SASS允许用户编写自己的函数
@function db($n){
@return $n*2;
}
.div12 {
width:db(15px);
}
标签：
原文地址：http://www.cnblogs.com/fang51/p/4290611.html
