标签：
一、什么是sass?
写过css的都知道，css是用来改变页面样式的。但它不是一种编程语言，没有变量，函数，继承等功能，只能一条条抒写样式语句很死板。在这个工具决定效率的时代，这是不能容忍的事情。怎样将css也通过编程的方式来实现呢？sass就应运而生了。sass也被称为“css预处理器”，其抒写风格和css相似，同时具有动态语言的特点，可减少很多重复的代码。经过编译可生成标准的css文件。
二、安装sass
sass是Ruby语言编写的（两者的语法没有关系别担心不懂ruby），所以必须先安装Ruby，再安装sass。
安装完Ruby后，在计算机开始程序中找到并打开其命令窗口，输入
gem install sass
根据提示查看是否安装成功。若不成功，参考以下其他安装Ruby的方法，里面有详细步骤。
三、使用sass
3.1 .scss和.sass
二者都是sass文件的后缀名，区别在于抒写格式不同。.sass文件，不使用大括号和分号
body
background-color: #fff
font-size: 14px
div
margin:auto
width:100px
.scss文件，与我们平时抒写css的格式类似，使用大括号和分号。从习惯上来说肯定是.scss文件好用啦。
body {
background-color: #fff;
font-size: 14px;
}
div {
margin:auto;
width:100px;
}
3.2 sass转化为css
假设在e盘建立一个名为sass的文件夹e:\sass，在其中新建一个demo.scss文件，内容如下：
$myColor:#ccc; #page{ color: $myColor; font-size: 18px; }
在命令行窗口中使用如下命令可在e:\sass下生成demo.css文件
sass e:\sass\demo.scss
demo.css内容如下：
#page {
color: #ccc;
font-size: 18px; }
若要指定生成的css文件名和路径，如将生成的文件命名为example.css保存在f盘根目录下，输入以下命令
sass e:\sass\demo.scss f:\example.css
另外还可以指定编译后的css风格：
sass --style compressed demo.sass demo.css
有四种编译风格
* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。
3.3 文件导入
在scss中也可通过@import导入外部文件，与CSS的导入略有不同的是，编译时会将@import的scss文件合并只生成一个CSS文件。但是若导入的是.css文件则不会合并还是以@import形式存在，与普通CSS导入样式文件效果一样。
例如：在demo.scss文件中导入sDemo.scss文件和cDemo.css文件，二者内容分别如下：
//sDemo.scss
body{ background-color: #ffffff; }
//cDemo.css
div{
width: 100px;
}
demo.scss内容：
@import "sDemo.scss"; @import "cDemo.css";*/ $myColor:#ccc; #page{ color: $myColor; font-size: 18px; }
将demo.scss文件编译后生成demo.css文件内容如下：
@import url(cDemo.css); body { background-color: #ffffff; } #page { color: #ccc; font-size: 18px; }
3.4 文件监听
scss文件更改后都需要执行一次编译命令后才可生成css文件，通过监听一个文件或路径可实现scss文件更改后自动编译。
// 监听文件 sass --watch demo.scss:output.css // 监听路径 sass --watch e:\sass\demo.scss
3.5 注释
两种注释：单行注释// 和多行注释/*.....*/
双斜杠：单行注释，编译后不会输入到css中。
多行注释：注释可以输入当css中。
如在demo.scss中添加注释如下，注意中文注释会提示gbk错误，解决办法是在文件开头增加@charset "utf-8"
@charset "utf-8"; @import "sDemo.scss"; @import "cDemo.css"; $myColor:#ccc; //我是单行注释 #page{ //this is comment color: $myColor; font-size: 18px; } /*我是多行注释*/
编译后的demo.css内容如下：
@charset "UTF-8"; @import url(cDemo.css); body { background-color: #ffffff; } #page { color: #ccc; font-size: 18px; } /*我是多行注释*/
以上是今天学习sass的一个总结，旨在记录和强化知识点。学习要从点滴做，起坚持写博客，记录自己学习的过程。
其他语法内容参见如下链接：
1.http://www.ruanyifeng.com/blog/2012/06/sass.html
2.http://www.css88.com/doc/sass/#using-sass
标签：
原文地址：http://www.cnblogs.com/yangmin01/p/5554296.html
