由于多个项目中用到了sass和less，所以就学习了一下相关知识，记录下来方便随时查看。
css是用来编写网站样式，但是，其写法比较一成不变。
如果想要使用 css 实现 js 一样的变量、常量等，就会比较臃肿，难以维护。
所以，作为css的扩展，出现了css预处理器。
css预处理器定义了一种新的语言，主要是通过用一种专门的编程语言，为css添加一些编程特性，再编译生成css文件。
它可以帮助我们编写可维护的、与时俱进的代码，也可以减少需要编写的CSS数量，对于那些需要大量样式表和样式规则的大型用户界面是非常有帮助的。
css 预处理器可以更方便的维护和管理 css 代码，让整个网页变得更加灵活可变。
现有流行库有Sass(Scss)、Less、Stylus等，目前，广泛使用的是 less 和 sass 。
Sass是CSS（层叠样式表）的语法的一种扩充，诞生于2007年，是最早也是最成熟的一款CSS预处理器语言。
SASS使用变量和公式添加到css编程风格中，可以利用缩进代替花括号，空格也有着重要的意义。
它是一个通过转换scss 的 css文件，文件后缀名：.scss。
为什么sass的后缀是scss？其实，sass有两种语法形式。
首先是scss，也就是我们这个后缀形式的语法。这种格式在 CSS3 语法的基础上进行扩展，这意味着每个CSS样式表是一个同等的SCSS文件。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器专属前缀语法，这种语法的样式表文件需要以
.scss作为拓展名。
另一种，也是最早的语法，被称为缩进语法。它提供了一种更加简洁的方式来书写CSS。它使用缩进而不是花括号来表示选择器的嵌套，用换行而不是分号来分隔属性，一些人认为这样做比 SCSS 更容易阅读，书写也更快速。缩排语法具有 Sass 的所有特色功能，虽然有些语法上稍有差异。使用此种语法的样式表文件需要以
.sass作为扩展名。
总结来说，SASS保存为".sass"是缩进格式，保存为".scss"是非缩进格式。
sass基于Ruby语言编写，所以编译sass文件需要Ruby环境。（使用sass并不需要过多了解Ruby语言，只需要安装Ruby环境即可。）
首先，安装ruby，建议安装到C盘中，安装过程中选择“Add Ruby executables to your PATH”。
接下来，ruby安装成功后，启动Ruby的Command控制面板，输入命令：
gem install sass
回车后会自动安装好Sass。
输入sass -v，之后出现版本号，就算安装成功了。
可以使用变量、常量；
允许css代码嵌套；
混入Mixin；
继承；
函数等功能。
这些功能使得编写css更加贴合编程语言的习惯，从而更有效有弹性的写出CSS。
变量的提供，可以避免由于设计师频繁更改某一全局属性（比如整体颜色风格），而引起的被动增加工作量问题。
变量的使用：以$开头，有全局变量和局部变量。
sass的变量必须是$开头，后面紧跟变量名，变量值和变量名之间需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。
$bgColor: #ffffff; // 全局变量
div {
$width: 1000px; // 局部变量
width: $width;
background: $bgColor;
}
变量用在属性中，需要写在#{ }中，如下：
$posi: left;
div {
border-#{$posi}: 1px solid $color;
}
sass的默认变量是在值后面加上!default。
示例：
$myLineHeight: 1.5 !default;
body{
line-height: $myLineHeight;
}
css：
body{
line-height:1.5;
}
sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。
Sass允许代码嵌套，用于选择后代。相对于css原生的后代选择器，嵌套样式的代码，会更加直观。
选择器嵌套：在一个选择器中嵌套另一个选择器来实现继承，增强了sass文件的结构性和可读性。
在选择器嵌套中，可以使用&表示父元素选择器，示例如下：
scss：
#top_btn{
line-height: 40px;
text-transform: capitalize;
background-color:#333;
li{
float:left;
}
a{
display: block;
padding: 0 10px;
color: #fff;
&:hover{
color:#ddd;
}
}
}
css：
#top_btn{
line-height: 40px;
text-transform: capitalize;
background-color:#333;
}
#top_btn li{
float:left;
}
#top_btn a{
display: block;
padding: 0 10px;
color: #fff;
}
#top_btn a:hover{
color:#ddd;
}
除了选择器可以嵌套，属性和伪类也可以嵌套。
属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。
示例：
<div class="main-container">
<div class="main-container-top"></div>
</div>
示例：
.main-container {
&-top { // 选择器嵌套
background {
color: red; //属性嵌套
}
&:hover { // 伪类嵌套
color: green;
}
}
}
Mixins是CSS预处理器中语言中最强大的特性。
Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。
例如：某段CSS样式经常要用到多个元素中，在CSS预处理器语言中，可以为这些公用的CSS样式定义一个Mixin，然后在需要使用这些样式的地方直接调用定义好的Mixin。
这是一个非常有用的特性，Mixins 被当作一个公认的选择器，还可以在Mixins中定义变量或者默认参数。
声明的@mixin通过@include来调用。
@mixin center-block {
margin-left:auto;
margin-right:auto;}
.btn{
@include center-block;
}
css：
.btn{
margin-left:auto;
margin-right:auto;
}
sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，也可以给参数设置默认值。
scss：
@mixin theme($theme: DarkGray) {
background: $theme;
box-shadow: 0 0 1px rgba($theme, .25);
color: #fff;
}
.info {
@include theme;//参数使用默认值
}
.alert {
@include theme($theme: DarkRed);
}
.success {
@include theme($theme: DarkGreen);
}
css：
.info {
background: DarkGray;
box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
color: #fff;
}
.alert {
background: DarkRed;
box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
color: #fff;
}
.success {
background: DarkGreen;
box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
color: #fff;
}
调用时可直接传入值，多个参数以逗号分开，如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。
当然，也可以选择性的传入参数，使用参数名与值同时传入。
sass：
@mixin btn($border:1px dashed #ccc, $padding:10px){
border-bottom:$border;
padding-top:$padding;
padding-bottom:$padding;
}
.imgtext-h li{
@include btn(1px solid #ccc);
}
.imgtext-h--product li{
@include btn($padding:15px);
}
css：
.imgtext-h li {
border-bottom: 1px solid #cccccc;
padding-top: 10px;
padding-bottom: 10px;
}
.imgtext-h--product li {
border-bottom: 1px dashed #cccccc;
padding-top: 15px;
padding-bottom: 15px;
}
test.scss：
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
styles.scss
// 使用@use导入文件
@use 'test'; // 生成了一个 test 命名空间
.inverse {
background-color: test.$primary-color;
color: white;
}
css:
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
.inverse {
background-color: #333;
color: white;
}
当使用@use 一个文件时，Sass会根据文件名自动生成一个命名空间，如下：
@use 'btns'; // 生成了一个`btns` 命名空间
@use 'forms'; // 生成了一个 `forms` 命名空间
现在，可以同时访问btns.scss 和forms.scss中的成员变量。但是，这两个文件之间并不能互相访问变量。
由于导入的特性是带命名空间的，所以必须使用一个新的点号分割语法来访问它们：
@include btns.submit();
@include forms.input();
如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用继承就显得很有用。
sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，使用关键词@extend，后面紧跟需要继承的选择器。
scss：
/* This CSS will print because %message-shared is extended. */
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
// This CSS won't print because %equal-heights is never extended.
%equal-heights {
display: flex;
flex-wrap: wrap;
}
.message {
@extend %message-shared;
}
.success {
@extend %message-shared;
border-color: green;
}
.error {
@extend %message-shared;
border-color: red;
}
.warning {
@extend %message-shared;
border-color: yellow;
}
css：
/* This CSS will print because %message-shared is extended. */
.message, .success, .error, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
CSS预处理器语言还具有运算的特性，也就是对数值型的Value（如：数字、颜色、变量等）进行加减乘除四则运算。
示例：
scss：
x @use "sass:math";
.container {
display: flex;
}
article[role="main"] {
width: math.div(600px, 960px) * 100%;
}
aside[role="complementary"] {
width: math.div(300px, 960px) * 100%;
margin-left: auto;
}
css：
.container {
display: flex;
}
article[role="main"] {
width: 62.5%;
}
aside[role="complementary"] {
width: 31.25%; margin-left: auto;
}
sass 也可以做各种数学计算(变量和属性)。
加减需注意必须相同单位，除法需要带括号。
示例：
$height: 10px;
div {
width: 100px + 100px;
height: $height + 70px;
margin-top: 20px -10px;
margin-left: 10px * 2;
margin-right: (10px / 2);
}
sass运用+做拼接字符串。
示例：
div:before {
content: "hello" + "world";
}
Sass中通过@if、@else 实现条件判断来提供语言的流控制。
SASS中还实现了一个三目判断，语法为：if($condition, $if_true, $if_false)。
三个参数分别表示：条件，条件为真的值，条件为假的值。
示例：
$type: monster;
h1 {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
Sass支持for循环语句，通过@for、@each、@while来实现循环，配合map和list这两种数据类型可以实现多数编程语言提供的功能。
Sass中使用for循环语句需要使用@for，并且配合“from”和“through”一起使用，基本语法：
@for $var from <start> through <end> {语句块}
示例：
@for $i from 1 through 3 {
.item-#{$i} { width: 2px * $i; }
}
css：
.item-1 { width: 2px; }
.item-2 { width: 4px; }
.item-3 { width: 6px; }
@each循环语法：
@each $var in <list>{语句块}
示例：
@each $fruits in apple, balana, orange, pineapple {
.#{$fruits}-icon {
background-image: url('/images/#{$fruits}.png');
}
}
css:
.apple-icon { background-image: url('/images/apple.png'); }
.balana-icon { background-image: url('/images/balana.png'); }
.orange-icon { background-image: url('/images/orange.png'); }
.pineapple-icon { background-image: url('/images/pineapple.png'); }
@while循环，示例：
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2px * $i; }
$i: $i - 2;
}
CSS：
.item-6 { width: 12px; }
.item-4 { width: 8px; }
.item-2 { width: 4px; }
lighten($color, 10%); /* 返回的颜色在$color基础上变亮10% */
darken($color, 10%); /* 返回的颜色在$color基础上变暗10% */
saturate($color, 10%); /* 返回的颜色在$color基础上饱和度增加10% */
desaturate($color, 10%); /* 返回的颜色在$color基础上饱和度减少10% */
grayscale($color); /* 返回$color的灰度色*/
complement($color); /* 返回$color的补色 */
invert($color); /* 返回$color的反相色 */
mix($color1, $color2, 50%); /* $color1 和 $color2 的 50% 混合色*/
应用：
$color: #0982C1;
p {
background: $color;
border: 3px solid darken($color, 50%);/*边框颜色在$color的基础上变暗50%*/
}
/* *这是一个注释*/
//我是注释
Sass中只能在使用url()表达式时进行变量@import插值：
$device: mobile;
@import url(styles.#{$device}.css);
style.scss 的 sass文件，可以转换（编译）成 style.css文件。
首先，创建一个Sass文件“test.scss”，并且将其放在对应的项目样式中。
然后，启动Ruby的Command控制面板，找到需要转译的Sass文件。
在对应的目录下输入下面的命令：
sass test.scss test.css
sass --watch test.scss:test.css
就会生成自动“test.css”文件，并自动更新对应的CSS样式文件。
LESS 转换（编译）像Sass这样的LESS文件，LESS的扩展名为".less"。
在官网载一个Javascript脚本文件“less.js”，然后，在引入LESS源文件的HTML的中加入如下代码：
<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less">
<script src="文件路径/less.js" type="text/javascript"></script>
less需要在Node.js环境使用。
利用node的包管理器（npm）安装LESS，安装成功后就可以在Node环境中对LESS文件进行编译。
首先，安装node，安装成功后，启动node的Command控制面板，输入命令：
$ npm install less
回车后会自动安装好less。
Less：变量处理方式–懒加载，所有 Less 变量的计算，都是以这个变量最后一次被定义的值为准。
Less的变量名使用@符号开始，如下：
示例：
@width: 100px;
@height: @width + 50px;
@textcolor:red;
#header {
width: @width;
height: @height;
}
#footer{
width: @width;
height: @height;
font-color:@textcolor;
}
变量可以设置默认值，示例如下：
.opacity(@opacity: 100) {
opacity: @opacity / 100;
filter: ~"alpha(opacity=@{opacity})";
}
.operateBtn {
.opacity(50);
}
上面的DSL源代码（LESS）编译成css如下：
.operateBtn {
opacity: 0.5;
filter: alpha(opacity=50);
}
在LESS中，混合是指将定义好的“ClassA”中引入另一个已经定义的“Class”，就像在当前的“Class”中增加一个属性一样。
不过LESS样式中声明Mixins和Sass声明方法不一样，更像是CSS定义样式，在LESS可以将Mixins看成是一个类选择器，Mixins也可以设置参数，并给参数设置默认值。
设置参数的变量名是使用“@”开头，同样参数和默认参数值之间需要使用冒号（：）分隔开。
示例：
.btn {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.btn();
}
.post a {
color: red;
.btn();
}
/*声明一个Mixin叫作“btn”*/
.btn(@myWidth:2px){
border:@myWidth solid #f00;
color: #000000;
}
/*调用btn Mixins*/
.generic-btn {
.btn(); /*直接调用btn mixins*/
}
.login-btn {
.btn(5px); /*调用btn mixins，并将参数@myWidth的值重定义为5px*/
}
css：
.generic-btn {
border: 2px solid #f00;
color:#f00;
}
.login-btn {
border:5px solid #f00;
color: #f00;
}
CSS预处理器语言具有运算的特性，也就是对数值型的Value（如：数字、颜色、变量等）进行加减乘除四则运算。
例如：
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%
@color: (#224488 / 2); // result is #112244
background-color: #112244 + #111; // result is #223355
@var: 50vh/2;
width: calc(50% + (@var - 20px)); // result is calc(50% + (25vh - 20px))
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}
less：
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
css：
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
/* *这是一个注释*/
//我是注释
lighten(@color, 10%); /* 返回的颜色在@color基础上变亮10% */
darken(@color, 10%); /* 返回的颜色在@color基础上变暗10%*/
saturate(@color, 10%); /* 返回的颜色在@color基础上饱和度增加10% */
desaturate(@color, 10%); /* 返回的颜色在@color基础上饱和度降低10% */
spin(@color, 10); /* 返回的颜色在@color基础上色调增加10 */
spin(@color, -10); /* 返回的颜色在@color基础上色调减少10 */
mix(@color1, @color2); /* 返回的颜色是@color1和@color2两者的混合色 */
应用：
@color: #0982C1;
p {
background: @color;
border: 3px solid darken(@color, 50%);/*边框颜色在@color的基础上变暗50%*/
}
Less中可以在字符串中进行插值：
@device: mobile;
@import "styles.@{device}.css";
LESS中通过guarded mixins代替if/else，利用关键词“when”来实现简单的条件判断。
示例如下：
less：
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
LESS并没支持for循环语句，但是，在LESS中可以使用When来模拟出for循环的特性。
示例：
.loopingClass (@index) when (@index > 0) {
.myStyle {
z-index: @index;
}
// 递归
.loopingClass(@index - 1);
}
// 停止循环
.loopingClass (0) {}
// 输出
.loopingClass (3);
css：
.myStyle {z-index: 3;}
.myStyle {z-index: 2;}
.myStyle {z-index: 1;}
@import的作用是从其他样式表导入样式，用来引入外部样式文件。
除了基本的功能外，LESS引入了import选项来扩展@import的语法。语法如下：
less：
@import "library"; // library.less
@import "typo.css";
@import (keyword) "filename";
其中keyword可以是如下几种选项（可以联合使用）：
1.**reference:**使用一个外部文件参与编译，但不输出其内容。
2.**inline:**直接将引入的文件放入输出文件中，但不处理这个引入的文件。
3.**less:**不管文件扩展名是什么都将该文件作为一个LESS文件处理。
4.**css:**不管文件扩展名是什么都将该文件作为一个CSS文件处理。
5.**once:**只引入文件一次（去重），这是默认方式。
6.**multiple:**可以引入文件多次。
不建议使用import，因 import 的 CSS 文件只有在当前 CSS 文件被下载、解析完成之后，浏览器才会开始下载 import 的 CSS 文件，破坏了并行下载样式文件。
LESS中的作用域和其他程序语言中的作用域非常的相同，首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往上查找，直到根为止。
示例：
@color: red;
.scoped {
@bg: blue;
@color: white;
color: @color;
background-color:@bg;
}
.unscoped {
color:@color;
}
css：
.scoped {
color:white;/*白色（调用了局部变量）*/
background-color:blue;
}
.unscoped {
color:red;/*红色（调用了全局变量）*/
}
style.less 的less 文件，可以转换（编译）成 style.css文件。
在安装的Node JS环境下通过其自己的命令来进行转译：
$ lessc test.less
上面的命令会将编译的CSS传递给stdout，可以将它保存到一个文件中：
$ lessc test.less > test.css
Stylus的扩展名为".styl"。
Stylus可以利用缩进代替花括号，空格也有着重要的意义。
Stylus的安装和LESS在服务器端的安装很相似，先安装Node 。
然后，在Node的Command控制面板输入命令：
$ npm install stylus
回车后会自动安装好stylus。
/* style.styl */
/* 类似标准语法 */
p {
color: #ffffff;
}
/* omit brackets 省略花括号*/
p
color: #ffffff;
/* omit colons and semi-colons 省略花括号和分号 */
p
color #ffffff
Stylus对变量名没有任何限定，可以是$开始，也可以是任意字符，而且与变量值之间可以用冒号、空格隔开。
需要注意的是 Stylus (0.22.4) 将会编译 @ 开始的变量，但其对应的值并不会赋予该变量，换句话说，在 Stylus 的变量名不要用 @ 开头。
示例：
size = 10px
.top
width: size
size = 20px
.btn
width: size
css：
.top {
width: 10px;
}
.btn {
width: 20px;
}
Stylus还有一个独特功能，不需要分配值给变量就可以定义引用属性：
示例：
#logo
position absolute
top 50%
left 50%
width w = 150px
height h = 80px
margin-left -(w / 2)
margin-top -(h / 2)
css：
#logo {
position:absolute;
top:50%;
left:50%;
width:150px;
height:80px;
margin-left:-75px;
margin-top:-40px;
}
Stylus中的混合和前两款CSS预处理器语言的混合略有不同，可以不使用任何符号，就是直接声明Mixins名，然后在定义参数和默认值之间用等号（=）来连接。
/*声明一个Mixin叫作“btn”*/
btn(myWidth=2px){
border:myWidth solid #f00;
color: #f00;
}
/*调用btn Mixins*/
.generic-btn {
btn();/*直接调用btn mixins*/
}
.login-btn {
btn(5px);/*调用btn mixins，并将参数myWidth的值重定义为5px*/
}
css：
.generic-btn {
border: 2px solid #f00;
color:#f00;
}
.login-btn {
border:5px solid #f00;
color: #f00;
}
Stylus作用域的特性和LESS一样，可以支持全局变量和局变量，会向上冒泡查找，直到根为止。
Stylus中通过if、else if、else、unless（基本与if相反）实现条件判断来提供语言的流控制，通过for/in实现循环迭代。
可以在样式中省略大括号（｛｝）。
示例：
box(x, y, margin = false)
padding y x
if margin
margin y x
else
padding y x
body
box(5px, 10px, true)
Stylus样式中通过for/in对表达式进行循环，形式如下：
for <val-name> [, <key-name>] in <expression>
使用示例：
body
colors = red pink yellow blue
for col, i in colors
foo i col
CSS：
body {
foo: 0 red;
foo: 1 pink;
foo: 2 yellow;
foo: 3 blue;
}
/* *这是一个注释*/
//我是注释
多行缓冲注释跟多行注释类似，不同之处在于始的时候，这里是”/*！”。
相当于告诉Stylus压缩的时候这段无视直接输出。
/*!
*给定数值合体
*/
add(a, b)
a + b
lighten(color, 10%); /* 返回的颜色在'color'基础上变亮10% */
darken(color, 10%); /* 返回的颜色在'color'基础上变暗10% */
saturate(color, 10%); /* 返回的颜色在'color'基础上饱和度增加10% */
desaturate(color, 10%); /* 返回的颜色在'color'基础上饱和度降低10% */
应用：
color = #0982C1
p
background color
border 3px solid darken(color, 50%)
Stylus中没有@import插值，但是可以利用其字符串拼接的功能实现：
stylus：
device = "mobile"
@import "styles." + device + ".css"
Stylus具有可执行性，因此Stylus能将自身转换成CSS。
Stylus可以读取自“stdin”输出到“stdout”，可以像下面转译源文件：
$ stylus –compress <some.styl> some.css
Stylus也像Sass一样，同时接受单个文件和整个目录的转译。
例如：一个目录名为“css”将在同一个目录编译并输出“.css”文件。
$ stylus css
下面的命令将输出到“./public/stylesheets”：
$ stylus css –out public/stylesheets
还可以同时转译多个文件：
$ stylus one.styl two.styl
如果浏览器安装了Firebug，那么可以使用FireStylus扩展：
$ stylus –firebug <path>
Sass的变量处理方式和Stylus相同，变量值输出时根据之前最近的一次定义计算。这其实代表了两种理念：Less 更倾向接近 CSS 的声明式，计算过程弱化调用时机；而 Sass 和 Stylus 更倾向于指令式。
如果在Less中引入第三方样式库，可以通过重新配置变量来改变样式。
优点：stylus和sass这样的处理会不容易受多个第三方库变量名冲突的影响，因为一个变量不能影响在定义它以前的输出样式。
