写在前面乱七八糟的前言：
emmm，还是决定把Sass与Less单独出来写成一篇，可能会稍微好辣么一丢丢？TAT语法特性是真的香，通篇下来能吸收个10%自我感觉已经很nice了，毕竟渣渣的我有渣渣的自觉~本文侧重于输出Sass，对于Less的话简单带过，毕竟学会了Sass再看Less基本上就都很ok了，如果想简单上手，建议先从Less开始入门，最后再吃下我Compass的安利，┓(´∀`)┏慢慢盘吧。
目录
1、Sass（Syntactically Awesome Style Sheets）
2、Less（emm找不到全称）
3、Sass与Less的区别
4、Compass（Sass的toolkit）
内容
1、Sass（Syntactically Awesome Style Sheets）
1.1安装：
安装ruby环境，安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量
在命令行输入gem install sass
1.2转译Sass（最后引用的还是css文件的！）
在屏幕上直接转化：sass test.scss
转化成文件：sass test.scss test.css
ps：文件命名方式最好使用英文，如提示gbk与utf-8等关键字的报错时，文件命名方式使用英文即可
1.3监听Sass
//watch a file
sass --watch test.scss：test.css
//watch a directory
sass --watch ./sass：./css
1.4Vscode的easy Sass
1.4.1安装easy Sass插件
1.4.2设置转译目标目录
文件->首选项->设置(快捷键ctrl+，)->搜索设置->easysass->Target Dir->方框内填写（或直接在settings.json中编辑"easysass.targetDir": "./css/"）
ps："easysass.targetDir": "./css/"
意思：easysass的目标目录：""
所以在变更文件夹时记得修改这个目录
比如将原先的css文件放在sass文件夹内时，应将路径更改为./sass/css/
1.5使用
1.5.1变量：
声明：$变量名：变量值；
调用：$变量名
ps：若变量名需在字符串内嵌套，则需使用#{ }包裹；
如：$black：#000；
如：$side：left；
.test{
border-#{$side}-color: $black；
}
编译为：
.test{border-left-color：#000；}
1.5.2运算
.test{
margin:（14px/2）；
top：20px+20px；
right：$var *10%；
}
ps：单位会进行运算，注意最终单位
1.5.3嵌套
1.5.3.1选择器嵌套：
ul{
li{ }
}
1.5.3.2属性嵌套
border：{
color：red；
width：10px；
}
1.5.3.3伪类嵌套
ul{
li{
&：hover{ }
}
}
1.5.4混合
声明：@mixin name（$param:value）{ }；
调用：@include name（value）
ps：声明时可带参可不带，可带默认值，但调用需符合命名规范
优点：可传参，不会生成同名class
缺点：将混合代码copy到对应的选择器中
1.5.5扩展
缘起：通常都是p，ul{ common style}，往往我们需要给单独元素添加另外的样式，这个时候我们就需要把其中选择器单独出来写样式，如此一来我们维护样式就相当的麻烦，有了扩展就很舒服了
声明：.class{ }
调用：@extend .class
优点：继承相同代码并提取到并集选择器中
缺点：不可传参，在CSS中生成一个同名class
1.5.6占位符
声明：%class{ }
调用：@extand %class
优点：继承相同代码并提取到并集选择器，不会生成同名的class选择器
缺点：无法传参
ps：传参用混合，先有class用继承，无须参数无须class用占位符
1.5.7if语句
@if{ }
@else{ }
1.5.8for循环
@for $i from 1 to 10{ }不含十；
@for $i from 1 through 10{ }含十；
1.5.9while循环
$j：1；
@while $j<10{
.while#{$j}{
border：#{$j}px solid red;
}
$j:$j+1；
}
1.5.0each循环遍历
@each item in a，b，c，d{
//item 表示每一项
}
1.5.11函数
@function func（$length）{
$length：$length*5；
@return $length；
}
调用：func（10px）；
2、Less（emm找不到全称）
2.1安装：
引入node.js
在命令行输入$ npm install -g less
2.2转译Less（可引用less文件也可引用css文件）
2.2.1命令行：
在屏幕上直接转化：$ lessc styles.less
转化成文件：$ lessc styles.less styles.css
转化成压缩版：$ lessc --clean-css styles.less styles.min.css
2.2.2代码：略
2.2.3浏览器端：
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
下载链接
CDN加速：<script src="///ajax/libs/less.js/2.5.3/less.min.js"></script>
2.3使用：
2.3.1变量：
声明：@变量名：变量值；
调用：@变量名
2.3.2其他：略
3、Sass与Less的区别
3.1Less优势：让开发者平滑地从现存CSS文件过渡到LESS，而无需像Sass一样将CSS文件转换成Sass；有全局变量
3.2编译环境：
Sass需要安装ruby环境，是服务端处理的
Less需node js环境，引入less.js，是客户端处理的
3.2变量符
Sass用$
Less用@
3.3输出设置
Sass：四种输出风格，默认nested
nested：嵌套缩进
expanded：展开多行
compact：简洁格式
compressed：压缩
Less：嵌套与压缩min
3.4工具库
Sass：Compass，基于Sass的封装
Less：UI组件库Bootstrap
3.5文件转译
Sass：源文件不能给浏览器直接识别，需转译为css
Less：源文件无需转译为css
3.6作用域
Sass：无全局作用域，定义相同变量名时，在调用要注意
Less：首先定义局部定义的变量，若无，像冒泡一样一级级往下查找，直到根为止
3.7使用
3.7.1混合：
Sass：
/*声明一个Mixin叫作“error”*/@mixin error($borderWidth:2px){border:$borderWidth solid #f00; color: #f00; } /*调用error Mixins*/ .generic-error { @include error();/*直接调用error mixins*/ } .login-error { @include error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/ }
Less：
/*声明一个Mixin叫作“error”*/.error(@borderWidth:2px){border:@borderWidth solid #f00; color: #f00; } /*调用error Mixins*/ .generic-error { .error();/*直接调用error mixins*/ } .login-error { .error(5px);/*调用error mixins，并将参数@borderWidth的值重定义为5px*/ }
3.7.2其他高级语法：略
4、Compass（Sass的toolkit）
4.1Compass是什么
简单讲：Compass是Sass的工具库（toolkit）
Sass本身只是一个编译器，Compass由SASS的核心团队成员Chris Eppstein创建，在它的基础上，封装了一系列有用的模块和模板，补充Sass的功能。它们之间的关系，有点像Javascript和jQuery、Ruby和Rails、python和Django的关系
4.2Compass安装与编译
1.安装
Linux或OS X且已安装ruby命令行输入：sudo gem install compassWindows系统且已安装ruby省略sudo
2.项目初始化
compass create test
3.编译
compass complie
该命令在项目根目录下运行，会将sass子目录中的scss文件，编译成css文件，保存在stylesheets子目录中
默认状态下，编译出来的css文件带有大量的注释。但是，生产环境需要压缩后的css文件，这时要使用--output-style参数
compass compile --output-style compressed
Compass只编译发生变动的文件，如果你要重新编译未变动的文件，需要使用--force参数
compass compile --force
除了使用命令行参数，还可以在配置文件config.rb中指定编译模式
output_style = :expanded
:expanded模式表示编译后保留原格式，其他值还包括:nested、:compact和:compressed。进入生产阶段后，就要改为:compressed模式
output_style = :compressed
也可以通过指定environment的值（:production或者:development），智能判断编译模式
environment = :development
output_style = (environment == :production) ? :compressed : :expanded
在命令行模式下，除了一次性编译命令，compass还有自动编译命令
compass watch
运行该命令后，只要scss文件发生变化，就会被自动编译成css文件
1.gem安装SassC:\Users\DELL>gem install sass2.查看Sass版本C:\Users\DELL>sass -vSass 3.4.13 (Selective Steve)3.编译Sass文件sass main.scss main css// 一般很少使用sass命令,一般都是用Compass命令;4.gem安装CompassC:\Users\DELL>gem install compass5.查看Compass版本C:\Users\DELL>compass -vCompass 1.0.3 (Polaris)
pass搭建项目C:\Users\DELL\compass create sass// 结果:↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 5 directory sass/directory sass/sass/ // sass文件所在目录;directory sass/stylesheets/ // css文件所在目录;create sass/config.rb // 项目配置文件;create sass/sass/screen.scss // 主要针对屏幕的sass文件;create sass/sass/print.scss // 主要针对打印设备;create sass/sass/ie.scss // 主要针对IE浏览器;write sass/stylesheets/ie.csswrite sass/stylesheets/print.csswrite sass/stylesheets/screen.css // scss文件编译后对应的css文件;最终将引入到HTML中的文件;// You may now add and edit sass stylesheets in the sass subdirectory of your project.// 你现在可以在sass文件的子文件中(screen.scss/print.scss/ie.scss)添加和编辑项目的样式表;// Sass files beginning with an underscore are called partials and won't be compiled to CSS, but they can be imported into other sass stylesheets.// Sass文件以"_"开头的叫做局部文件,不会被编译成CSS;但它们可以被引入到其他Sass文件中;// You can configure your project by editing the config.rb configuration file.// 你可以通过编辑config.rb配置文件来配置项目信息; // You must compile your sass stylesheets into CSS when they change.// 当Sass文件被修改后,必须要编译Sass文件到CSS;// 1. To compile on demand: // 直接编译; // compass compile [path/to/project]// 2. To monitor your project for changes and automatically recompile: // compass watch [path/to/project] // 监听项目变化并且自动编译; // To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:// <head>// <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />// <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />// <!--[if IE]>// <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />// <![endif]-->// </head>// 将编译后的文件引入到HTML页面中;
更多命令行方法参考：Compass官网
4.3Compass使用
Compass采用模块结构，不同模块提供不同的功能。目前，它内置五个模块：
* reset
* css3
* layout
* typography
* utilities
你还可以自行加载网上的第三方模块，或者自己动手编写模块
4.3.1reset模块
编写自己的样式之前，有必要重置浏览器的默认样式
@import "compass/reset";
@import命令，用来指定加载模块，这里就是加载reset模块。编译后，会生成相应的css reset代码
4.3.2css3模块
该模块提供19种CSS3命令
圆角
@import "compass/css3";
.rounded {
@include border-radius(5px);
}
@include命令，表示调用某个mixin（类似于C语言的宏），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;
}
如果只需要左上角为圆角，写法为
@include border-corner-radius(top, left, 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;
}
4.3.3layout模块
提供布局功能
比如，指定页面的footer部分总是出现在浏览器最底端：
@import "compass/layout";
#footer {
@include sticky-footer(54px);
}
比如，指定子元素占满父元素的空间：
@import "compass/layout";
#stretch-full {
@include stretch;
}
4.3.4typography模块
提供版式功能
指定链接颜色的mixin为：
link-colors($normal, $hover, $active, $visited, $focus);
使用时写成：
@import "compass/typography";
a {
@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
}
4.3.5utilities模块
供某些不属于其他模块的功能
比如，清除浮动：
import "compass/utilities/";
.clearfix {
@include clearfix;
}
比如表格：
@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;
}
4.3.6Helper函数
除了模块，Compass还提供一系列函数。
有些函数非常有用，比如image-width()和image-height()返回图片的宽和高。
再比如，inline-image()可以将图片转为data协议的数据。
@import "compass";
.icon { background-image: inline-image("icon.png");}
编译后得到
.icon { background-image: url('data:image/png;base64,iBROR...QmCC');}
函数与mixin的主要区别是，不需要使用@include命令，可以直接调用。
参考文献：
Sass与Compass入门
阮一峰Compass用法指南
Less入门手册
Sass中文网
environment = :development
output_style = (environment == :production) ? :compressed : :expanded
