diff --git "a/\347\216\213\345\211\221\347\247\213/Less\351\242\204\347\274\226\350\257\221\345\267\245\345\205\267.md" "b/\347\216\213\345\211\221\347\247\213/Less\351\242\204\347\274\226\350\257\221\345\267\245\345\205\267.md"
new file mode 100644
index 0000000000000000000000000000000000000000..dc963f756e7535b6cda2220346fb86de68459c09
--- /dev/null
+++ "b/\347\216\213\345\211\221\347\247\213/Less\351\242\204\347\274\226\350\257\221\345\267\245\345\205\267.md"
@@ -0,0 +1,1100 @@
+# Less
+
+## 简介
+
+ Less是Leaner Style Sheets的缩写，它是一个CSS的预编译器，可以为网站启用可自定义，可管理和可重用的样式表。让CSS代码更易于维护和拓展。
+
+## 安装
+
+ 可以通过npm安装
+
+```shell
+npm install less -g
+```
+
+ 也可以通过引用来使用less
+
+```html
+
+
+```
+
+## 与传统的写法区别
+
+ **less后缀为.less**
+
+ **less有两种注释方式**：
+
+- // 这种方式并不会编译到CSS文件
+- /* 这种注释方式会编译到CSS文件上 */
+
+ **less需要编译成CSS才可以使用**
+
+## 嵌套
+
+### less中的嵌套类似HTML的结构，使CSS代码更加清晰易懂
+
+```css
+/*css写法*/
+div{
+ font-size:14px;
+}
+div p{
+ margin:0 auto;
+}
+div p a{
+ color:red;
+}
+```
+
+```less
+/*less的写法*/
+div{
+ font-size:14px;
+ p{
+ margin:0 auto;
+ a{
+ color:red;
+ }
+ }
+}
+```
+
+
+
+### 使用父元素选择符&表示当前选择器的所有父选择器
+
+```css
+/*css写法*/
+.bgcolor{
+ background:#fff;
+}
+.bgcolor a{
+ color:#888888
+}
+.bgcolor a:hover{
+ color:#ff6600
+}
+```
+
+```less
+/*less写法*/
+.bgcolor{
+ background:#fff;
+ a{
+ color:#888888;
+ &:hover{
+ color:#ff6600;
+ }
+ }
+}
+```
+
+### 将&放到当前选择器之后，会将当前选择器移到最前面
+
+```less
+ul{
+ li{
+ .color &{
+ background:#fff;
+ }
+ }
+}
+```
+
+```css
+/*编译的结果*/
+.color ul li{
+ background:#fff;
+}
+```
+
+### 组合使用，将生成所有可能的选择器列表
+
+```less
+.div1,.div2{
+ color:red{
+ &&{
+ border-top:1px solid blue;
+ }
+ }
+}
+```
+
+```css
+/*编译的结果*/
+.div1,.div2{
+ color:red;
+}
+.div1,.div2,
+.div2,.div1,
+.div1,.div2,
+.div2,.div2{
+ border-top:1px solid blue;
+}
+```
+
+## 变量
+
+### 变量的定义和使用
+
+#### 定义：@name:value;(black:#000;)
+
+#### 三种使用场合：
+
+```less
+/*1、常规使用*/
+@black:#000000;
+div{
+ color:@black;
+}
+```
+
+```css
+/*编译结果*/
+div{
+ color:#000000;
+}
+```
+
+----------------------------
+
+```less
+/*2、作为选择器或属性名*/
+@selName:container;
+@proName:width;
+.@{selName}{
+ @{proName}:100px;
+}
+```
+
+```css
+/*编译后结果*/
+.container{
+ width:100px;
+}
+```
+
+------------------
+
+```less
+/*作为URL*/
+@imgUrl:"./images/logo.png";
+div{
+ background:#FFF url("@{imgUrl}")
+}
+```
+
+```css
+/*编译结果*/
+div{
+ background:#FFF url(".images/logo.png")
+}
+```
+
+### 注意事项：
+
+#### 1、变量是延迟加载的，可以不预先声明
+
+```less
+div{
+ color:@black
+}
+@black:#000000
+```
+
+```css
+/*编译结果*/
+div{
+ color:#000000
+}
+```
+
+#### 2、变量的作用域
+
+ 如果在当前的作用域没有找到，将会往上找，这点类似js
+
+ 如果在某级作用域找到多个形同名称的变量，使用最后定义的那一个，类似css
+
+```less
+@var:0;
+.class{
+ @var:1;
+ .brass{
+ @var:2;
+ three:@var;
+ @var:3;
+ }
+ one:@var;//无法访问。brass的内部
+}
+```
+
+```css
+/*编译结果*/
+.class{
+ one:1;
+}
+.class .brass{
+ three:3;/*时候最后定义的变量*/
+}
+```
+
+## 混合
+
+ 混合是一种将一系列属性从一个规则集引入到另一个规则集的方式
+
+### 普通混合
+
+```less
+.border{
+ border-top:solid 1px black;
+ border-bottom:solid 2px black;
+}
+#menu a{
+ color:#eee;
+ .border;
+}
+```
+
+```css
+/*编译结果*/
+.border{
+ border-top:solid 1px black;
+ border-buttom:solid 2px black;
+}
+#menu a{
+ color:#eee;
+ border-top:solid 1px black;
+ border-top:solid 2px black;
+}
+```
+
+### 不带任何参数的混合
+
+```less
+/*加括号但不带参数的混合*/
+.border(){
+ border-top:solid 1px black;
+ border-bottom:solid 2px black;
+}
+#menu a{
+ color:#eee;
+ .border;
+}
+```
+
+```css
+/*编译结果*/
+#menu a{
+ color:#eee;
+ border-top:solid 1px black;
+ border-bottom:solid 2px black;
+}
+```
+
+### 带参数的混合
+
+```less
+.border(@color){
+ border-top:solid 1px @color;
+ border-bottom:solid 2px @color;
+}
+#menu a{
+ color:#eee;
+ .border(#fff);
+}
+```
+
+```css
+/*编译结果*/
+#menu a{
+ color:#eee;
+ border-top:solid 1px #ffffff;
+ border-bottom:solid 2px #ffffff;
+}
+```
+
+### 带参数且有默认值的混合
+
+```less
+.border(@color: #fff) {
+ border-top: solid 1px @color;
+ border-bottom: solid 2px @color;
+}
+#menu a {
+ color: #eee;
+ .border;
+}
+#menu p {
+ .border(#000);
+}
+```
+
+```css
+/*编译结果*/
+#menu a {
+ color: #eee;
+ border-top: solid 1px #ffffff;
+ border-bottom: solid 2px #ffffff;
+}
+
+#menu p {
+ border-top: solid 1px #000000;
+ border-bottom: solid 2px #000000;
+}
+```
+
+### 带多个参数
+
+ 带多个参数时，参数之间可以用分号或逗号分隔
+
+```less
+//less编写
+.mixin(@color, @padding: xxx, @margin: 2) {
+ color-3: @color;
+ padding-3: @padding;
+ margin: @margin @margin @margin @margin;
+}
+
+.div {
+ .mixin(1,2,3; something, ele); //2个参数
+}
+.div1 {
+ .mixin(1,2,3); //3个参数
+}
+.div2 {
+ .mixin(1,2,3; ); //1个参数
+}
+```
+
+```css
+/*编译结果*/
+.div {
+ color-3: 1, 2, 3;
+ padding-3: something, ele;
+ margin: 2 2 2 2;
+}
+.div1 {
+ color-3: 1;
+ padding-3: 2;
+ margin: 3 3 3 3;
+}
+.div2 {
+ color-3: 1, 2, 3;
+ padding-3: xxx;
+ margin: 2 2 2 2;
+}
+```
+
+### 定义多个相同名称的混合
+
+```less
+.mixin(@color) {
+ color-1: @color;
+}
+.mixin(@color; @padding: 2) {
+ color-2: @color;
+ padding-2: @padding;
+}
+.mixin(@color; @padding: 3; @margin) {
+ color-3: @color;
+ padding-3: @padding;
+ margin: @margin @margin @margin @margin;
+}
+
+.some .selector div {
+ .mixin(#008000); //第二个mixins也被调用了，因为 @padding 有默认值
+}
+
+.some .selector p {
+ .mixin(#008000, 5); //只有第二个mixins被调用
+}
+```
+
+```css
+.some .selector div {
+ color-1: #008000;
+ color-2: #008000;
+ padding-2: 2;
+}
+.some .selector p {
+ color-2: #008000;
+ padding-2: 5;
+}
+```
+
+### 命名参数
+
+ 引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值，任何参数都通过名称来引用，这样就不必按照特定的顺序来使用参数
+
+```less
+.mixin(@color: black; @margin: 10px; @padding: 20px) {
+ color: @color;
+ margin: @margin;
+ padding: @padding;
+}
+.class1 {
+ .mixin(@margin:20; @color: #33acfe);
+}
+.class2 {
+ .mixin(#efca44; @padding: 40px);
+}
+```
+
+```css
+/*编译结果*/
+.class1 {
+ color: #33acfe;
+ margin: 20px;
+ padding: 20px;
+}
+.class2 {
+ color: #efca44;
+ margin: 10px;
+ padding: 40px;
+}
+```
+
+### @arguments变量
+
+ @atguments变量表示所有可变参数
+
+ 参数的先后顺序就是括号内的顺序，在赋值时，值的位置和个数也是一一对应的
+
+ 只有一个值，把值赋给第一个；两个值，赋给第一个和第二个
+
+ 若想赋给第一个和第三个，必须把第二个参数的默认值写上
+
+```less
+.border(@x: solid, @c: red) {
+ border: 21px @arguments;
+}
+.div1 {
+ .border;
+}
+.div2 {
+ .border(solid, black)
+}
+```
+
+```css
+/*编译结果*/
+.div1 {
+ border: 21px solid #ff0000;
+}
+.div2 {
+ border: 21px solid #000000;
+}
+```
+
+### 匹配模式
+
+ 自定义一个字符，使用时加上那个字符，就调用相应的规则
+
+```less
+.border(all, @w: 5px) {
+ border-radius: @w;
+}
+.border(t_l, @w: 5px) {
+ border-top-left-radius: @w;
+}
+.border(b_l, @w: 5px) {
+ border-bottom-left-radius: @w;
+}
+.border(b_r, @w: 5px) {
+ border-bottom-right-radius: @w;
+}
+
+.border {
+ .border(all, 50%);
+}
+```
+
+```css
+/*编译结果*/
+.border {
+ border-radius: 50%;
+}
+```
+
+### 得到混合中变量的返回值
+
+```less
+.average(@x, @y) {
+ @average((@x + @y)/2);
+}
+
+div {
+ .average(16px, 50px);
+ padding: @average;
+}
+```
+
+```css
+//编译结果
+div {
+ padding: 33px;
+}
+/*
+1、将16px 和 50px 赋值给混合 .average进行计算
+2、计算结果赋值给变量 @average
+3、然后在div中调用@average的值
+4、编译后就得到了average的值33px
+*/
+```
+
+## 运算
+
+任何数值、颜色和变量都可以进行计算
+
+### 数值类运算
+
+ less会自动推算数值的单位，不必每个值都加上单位
+
+ 运算符之间必须以空格分开，存在优先级问题时注意使用括号
+
+```less
+.wp {
+ width: (450px - 50)*2;
+}
+```
+
+```css
+/*编译结果*/
+.wp {
+ width: 900px;
+}
+```
+
+### 颜色值运算
+
+```less
+.content {
+ color: #000000 + 8;
+}
+
+//rgb(0,0,0) + 8
+//rgb(8,8,8)
+//十六进制：#080808
+```
+
+```css
+/*编译结果*/
+.content {
+ color: #080808;
+}
+```
+
+## 命名空间
+
+ 有的时候混合中嵌套了比较多的规则，而我们只需要其中的一部分，可以使用命名空间获取
+
+### 使用“>”符号
+
+```less
+//混合集
+#bgcolor() {
+ background: #fff;
+ .a() {
+ color: #888;
+ &:hover {
+ color: #ff6600;
+ }
+ .b() {
+ background: #ff0000;
+ }
+ }
+}
+
+.bgcolor1 {
+ background: #fdfee0;
+ #bgcolor>.a; //只使用.a()
+}
+.bgcolor2 {
+ #bgcolor>.a>.b; //只使用.b()
+}
+```
+
+```css
+/*编译结果*/
+.bgcolor1 {
+ background: #fdfee0;
+ color: #888;
+}
+.bgcolor1:hover {
+ color: #ff6600;
+}
+.bgcolor2 {
+ background: #ff0000;
+}
+```
+
+### 省略“>”符号，使用空格
+
+```less
+//混合集
+#bgcolor() {
+ background: #fff;
+ .a() {
+ color: #888;
+ &:hover {
+ color: #ff6600;
+ }
+ .b() {
+ background: #ff0000;
+ }
+ }
+}
+
+.bgcolor1 {
+ background: #fdfee0;
+ #bgcolor .a; //只使用.a()
+}
+.bgcolor2 {
+ #bgcolor .a .b; //只使用.b()
+}
+```
+
+```css
+/*编译结果*/
+.bgcolor1 {
+ background: #fdfee0;
+ color: #888;
+}
+.bgcolor1:hover {
+ color: #ff6600;
+}
+.bgcolor2 {
+ background: #ff0000;
+}
+```
+
+## 引入
+
+ 引入一个或多个文件，这些文件定义的规则可在当前less文件中使用
+
+ 使用@import
+
+```less
+//main.less
+@wp: 960px;
+.color {
+ color: #fff;
+}
+
+//当前less文件
+@import "main"; //可以不加后缀
+.content {
+ width: @wp;
+}
+```
+
+```css
+/*编译结果*/
+.color {
+ color: #fff
+}
+.content {
+ width: 960px;
+}
+```
+
+### 引入css文件
+
+ 不能混合css的规则到项目中，编译后原样输出"@import xxx.css"
+
+ 引入时不能省略后缀名
+
+```less
+//main.css
+.color {
+ color: #ff6600;
+}
+
+@import "main.css" ;
+.content {
+ width: @wp;
+ height: @wp;
+}
+```
+
+```css
+/*编译结果*/
+@import "main.css"; //原样输出,但有效，css有这条语句
+.content {
+ width: 960px;
+ height: 960px;
+}
+```
+
+### 单参数的引入
+
+#### once:默认，只引入一次
+
+#### reference:使用less文件但不输出
+
+```less
+@wp: 960px;
+.color {
+ color: #fff;
+}
+
+//当前less文件
+@import (reference) "main";
+.content {
+ width: @wp;
+}
+```
+
+```css
+/*编译结果*/
+.content {
+ width: 960px;
+}
+```
+
+#### inline:在输出中包含less文件但是不能操作
+
+```less
+@wp: 960px;
+.color {
+ color: #fff;
+}
+
+//当前less文件
+@import (inline) "main";
+.content {
+ width: @wp;
+}
+```
+
+```css
+/*编译结果*/
+@wp: 960px; //报错，@wp未知
+.color {
+ color: #fff;
+}
+```
+
+#### less:将文件作为less文件对象，无论什么文件拓展名
+
+```less
+//main.css文件
+.color {
+ color: #ff6600;
+}
+
+//当前less
+@import (less) "main.css";
+ .content {
+.color;
+}
+```
+
+```css
+/*编译结果*/
+.color {
+ color: #ff6600;
+}
+.content {
+ color: #ff6600;
+}
+```
+
+#### css:将文件作为css文件对象，无论什么文件拓展名
+
+```less
+//当前less文件
+@import (css) "main.less";
+.content {
+ color: red;
+}
+```
+
+```css
+/*编译结果*/
+@import "main.less";
+.content {
+ color: red;
+}
+```
+
+#### multiple:允许引入多次相同文件名的文件
+
+```less
+//当前less
+@import (multiple) "main.less";
+@import (multiple) "main.less";
+@import (multiple) "main.less";
+.content {
+ width: @wp;
+}
+```
+
+```css
+/*编译结果*/
+.color {
+ color: #fff;
+}
+.color {
+ color: #fff;
+}
+.color {
+ color: #fff;
+}
+.content {
+ width: 960px;
+}
+```
+
+## !important
+
+ 提升权重优先级为最高
+
+ 在调用的混合集后面追加！important关键字，混合集中所有属性都继承!important
+
+```less
+.foo(@bg: #fdfdfd, @color: #900) {
+ background: @bg;
+ color: @color;
+}
+
+.important {
+ .foo() !important
+}
+```
+
+```css
+/*编译结果*/
+.important {
+ background: #fdfdfd !important;
+ color: #990000 !important;
+}
+```
+
+## 条件表达式
+
+### 带条件的混合
+
+ 比较运算符：>,>=,=,=<,<
+
+ 格式：when(){ }
+
+```less
+// lightness() 是检测亮度的函数，用%度量
+.mixin(@a) when(lightness(@a) >= 50% ) {
+ background-color: black;
+}
+.mixin(@a) when(lightness(@a) < 50% ) {
+ background-color: white;
+}
+
+.mixin(@a) {
+ color: @a;
+}
+.class1 {
+ .mixin(#ddd);
+}
+.class2 {
+ .mixin(#555);
+}
+```
+
+```css
+/*编译结果*/
+.class1 {
+ background-color: black;
+ color: #dddddd;
+}
+.class2 {
+ background-color: white;
+ color: #555555;
+}
+```
+
+### 类型检测函数
+
+ iscolor
+
+ isnumber
+
+ isstring
+
+ iskeyword
+
+ isurl
+
+```less
+.mixin(@a: #fff; @b: 0) when(isnumber(@b)) {
+ color: @a;
+ font-size: @b;
+}
+.mixin(@a; @b: black) when(iscolor(@b)) {
+ font-size: @a;
+ color: @b;
+}
+```
+
+### 单位检测函数
+
+ 检测一个值除了数字是否是一个特定的单位
+
+ ispixel
+
+ ispercentage
+
+ isem
+
+ isunit
+
+```less
+.mixin(@a) when(ispixel(@a)) {
+ width: @a;
+}
+.mixin(@a) when(ispercentage(@a)) {
+ width: @a;
+}
+
+.class1 {
+ .mixin(960px);
+}
+.class2 {
+ .mixin(95%);
+}
+```
+
+```css
+/*编译输出*/
+.class1 {
+ width: 960px;
+}
+.class2 {
+ width: 95%;
+}
+```
+
+## 循环
+
+ 混合可以调用自身，当一个混合递归调用自身就构成循环结构
+
+```less
+.loop(@counter) when(@counter > 0) {
+ .h@{counter} {
+ padding: (10px*@counter);
+ }
+ .loop((@counter - 1)); //递归调用自身
+}
+div{
+ .loop(5);
+}
+```
+
+```css
+/*编译结果*/
+div .h5 {
+ padding: 50px;
+}
+div .h4 {
+ padding: 40px;
+}
+div .h3 {
+ padding: 30px;
+}
+div .h2 {
+ padding: 20px;
+}
+div .h1 {
+ padding: 10px;
+}
+```
+
+## 合并属性
+
+ 将多条规则合并为一条
+
+### 方式一
+
+ 在需要合并的属性的冒号之前加上"+"，合并后用逗号分隔
+
+```less
+.mixin() {
+ box-shadow+: inset 0 0 10px #555;
+}
+.myclass {
+ .mixin;
+ box-shadow+: 0 0 20px black;
+}
+```
+
+```css
+/*编译结果*/
+.myclass {
+ box-shadow: inset 0 0 10px #555, 0 0 20px black; //逗号分隔两个属性值
+
+```
+
+### 方式二
+
+ 在需要合并的属性的冒号之前加上"+_"，合并后用逗号分隔
+
+```less
+.mixin() {
+ background+_: #f66;
+ background+_: url("/sss.jpg")
+}
+
+.class {
+ .mixin;
+}
+```
+
+```css
+/*编译结果*/
+.class {
+ background: #f66 url("/sss.jpg"); //空格分隔
+}
+```
+
+### 两种方式相结合
+
+```less
+.mixin() {
+ background+_: #f66;
+ background+: url("/sss.jpg");
+ background+_: no-repeat;
+ background+: center;
+}
+.class {
+ .mixin;
+}
+
+```
+
+```css
+/*编译结果*/
+.class {
+ background: #f66, url("/sss.jpg") no-repeat, center;
+}
+```
+
+## 函数库
+
+ less中封装了非常多函数库，例如颜色定义、颜色操作、颜色混合、字符串处理等等
+
+ 例如color()：用于解析颜色，将代表颜色的字符串转换为颜色值
+
+```less
+body {
+ color: color("#f60");
+ background: color("red");
+}
+```
+
+```css
+/*编译结果*/
+body {
+ color: #ff6600;
+ background: #ff0000;
+}
+```
+