less

less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，
增加了变量、Mixin(混合)、函数和类等特性，使 CSS 更易维护和扩展
less 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。

less的中文官网：http://lesscss.cn/
bootstrap中less教程：http://www.bootcss.com/p/lesscss/

Less 编译工具

koala 官网:www.koala-app.com

less 中的注释

• 以// ... 开头的注释，不会被编译到 css 文件中
• 以/* ...... */包裹的注释会被编译到 css 文件中

/* 在less文件中 */
/* 会出现编译后的css文件中的注释 */
// 不会出现在编译后的css文件中的注释

/* 在css文件中 */
/* 会出现编译后的css文件中的注释 */

less 中的变量

使用@来申明一个变量：

• 声明属性值变量：@pink：pink;
  
• 声明选择器变量：@selector:#app;
  
• 声明属性名变量： @m:margin;
  

1.作为普通属性值来使用：

直接使用定义好的变量名 @pink

2.作为选择器和属性名的变量的使用需要 @{}, 即需要使用{}包裹变量名：

• @{selector}{css 的样式代码}
  
• @{m}:0;

3.作为 URL：@{url}

4.变量的延迟加载，变量是存在于块作用域的

声明的变量是存在于块作用域的，在哪里声明就只能在哪里访问，并且访问到的值是执行完该代码块后的最终值，存在声明相同变量时，后面声明的值会覆盖前面的

/* less文件中 */
@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var; // 延迟加载，在这里使用声明的变量，它的值为3，因为会访问到代码块执行的最终结果
    @var: 3; // 在同一个代码块中声明的同一个变量的值后由后面的覆盖前面的
  }
  one: @var; // 这里的值为1，因为声明变量存在于块作用域中
}

less 中的嵌套规则

1.基本嵌套规则

/* less 文件中 */
.a {
  margin: 0;
  padding: 0;
  // 直接在内部编写其子选择器的样式
  .b {
    margin: 10px;
    padding: 10px;
  }
}

/* 编译后转换为 css 嵌套的选择器会被转换为父子选择器，即 .a .b 中间有空格的形式 */
.a {
  margin: 0;
  padding: 0;
}
/* 编译到css文件后会形成父子选择器的形式 */
.a .b {
  margin: 10px;
  padding: 10px;
}

2. &的使用

• 若是在某一个嵌套关系中表示同一级别的关系

/* less 文件 */
.inner {
  margin: 0;
  &:hover {
    background: pink;
  }
}

/*  编译转换为css  在无需嵌套的选择器前加上&符号  转义之后不会出现有空格的父子选择器，而是同一级别的样式  */
.inner {
  margin: 0;
}
.inner:hover {
  background: pink;
}

less 中的混合(mixin)

• 封装复用相同的样式到一个样式集合中去，然后在其他样式集合中去使用它
  
• 混合就是将一个规则集中的样式嵌入到到另一个规则集的方式

1.普通混合

• 就是将公共的样式抽取出来，统一放到一个 混合 中去， 混合的定义： .混合名 {公共的样式}

!!!注意：定义的混合及其封装的样式也会被编译到 css 文件中去，这个时候在混名后面加括号，就不会将混合及其样式编译到 css 文件中去了 // 在 less 文件中，定义一个混合,混合名加上括号，防止混合被编译

/* less文件 */
.inner() {
  margin: 0;
  padding: 0;
}
/* 使用混合 */
.app1 {
  .inner;
}
.app2 {
  .inner;
}

/* 转译为css */
.app1 {
  margin: 0;
  padding: 0;
}
.app2 {
  margin: 0;
  padding: 0;
}

2.不带输出的混合(就是加上括号后，不会编译到 css 的混合)

3.带参数的混合

• 在定义的混合后面的括号中加上形参，并在样式中使用，然后在使用混合的时候，传入实参

/* less 文件 */
.inner(@x,@y) {
  margin: @X;
  padding: @y;
}

/* // 使用混合 */
.app1 {
  .inner(100px,100px);
}
.app2 {
  .inner(200px,200px);
}

/* css文件 */
.app1 {
  margin: 100px;
  padding: 100px;
}
.app2 {
  margin: 200px;
  padding: 200px;
}

4.带参数并且有默认值的混合

/* 可以在形参后面为形参赋予默认值，如果使用混合的时候没有传入参数就使用默认值 */
.inner(@x: 10px,@y:10px) {
  margin: @X;
  padding: @y;
}

5.带多个参数的混合

6.命名参数

当混合有多个参数的时候，我只想给其中一个参数传入实参，其他参数使用默认值，直接传无法准确的让实参和形参对应，这个时候就可以使用命名参数，在使用混合传入参数的时候给参数命名， .app {.inner(@y:100px)}

/* less 文件中 */
.inner(@x: 10px,@y:20px) {
  margin: @X;
  padding: @y;
}

/* // 使用混合 */
.app1 {
  .inner(@x:100px);
}
.app2 {
  .inner(@y:200px);
}

/* css文件中 */
.app1 {
  margin: 100px;
  padding: 20px;
}
.app2 {
  margin: 10px;
  padding: 200px;
}

7.匹配模式

• 在一堆定义的样式中只有极少部分的改动的时候可以使用匹配模式
• 匹配模式的类名的第一个参数只能是 type(类型)或者 @_
• type 是用来匹配具体的样式的， @_ 是只要调用了对应类名的匹配模式，就会一同调用
• 多个样式使用相同的类名，然后将不会改变的样式集中到参数为 @_ 的样式中，在调用带有 type 类型的匹配模式的类名时也会将这个带有@_ 的类名一起调用

/* less文件1 */
/* // 定义
// 也需要带上形参才能被一起编译，个数要和下面的一样，命名可以不一样，但是没有必要 */
.triangle(@_,@w,@c) {
  width: 0px;
  height: 0px;
  overflow: hidden;
}
/* // 给不同类型的类名的第一个参数指定为 type */
.triangle(r,@w,@c) {
  border-width: @w;
  border-style: dashed solid dashed dashed;
  border-color: transparent @c transparent transparent;
}
.triangle(l,@w,@c) {
  border-width: @w;
  border-style: dashed solid dashed dashed;
  border-color: transparent @c transparent transparent;
}

/* // 引入less文件1中的值，然后使用 */
.triangle(r,100px,black);

/* // 编译后为 */
.triangle {
  /* // 公共的被一同调用了 */
  width: 0px;
  height: 0px;
  overflow: hidden;
  /* // 不同类型独有的匹配后再单独使用(r) */
  border-width: 100px;
  border-style: dashed solid dashed dashed;
  border-color: transparent black transparent transparent;
}

• 不同的 less 文件之间定义的变量都是在文件中所独有的，其他 less 文件是无法访问的
• 可以使用 @import "要导入文件的路径"

8.arguments 变量 (是一个对应于传递给混合的参数的类数组对象)

/* // 定义mixin */
.border(@1,@2,@3) {
  border: @arguments;
}
/* // 使用 */
.app {
  .border(1px,solid,black);
}

/* 转译到css  */
.app {
  border: 1px solid balck;
}

less 运算

在 less 中可以进行加减乘除的运算

• 在 less 中的运算，只要一方带有单位，则结果就会带上单位

/* 在 less 中 */
.app {
  /* 计算符号前后都需要加上空格 */
  width: (100 + 100px);
}

// 编译到 css 中

.app {
  width: 200px;
}

less 避免编译

在 less 文件可以直接编写 css 代码，这些编写在 less 文件中的 css 代码本可以直接被浏览器所解析，但是因为在 less 文件中，所以仍然会被 less 转 css 的编译器所编译，进造成了一定程度上的性能的消耗为了避免这样的情况发生，我们就需要告诉编译器，哪些代码是浏览器可以直接解析的，可以直接跳过编译而减少无用行为上的性能消耗。

• 具体实现： ~'不需要编译的语句'
~'calc(100px + 100)'

/* 在less文件中 */
.app {
  /* 需要编译器编译的less语法 */
  margin: 100px + 100;
  /* 不需要编译器编译的css语法  calc()函数是css中进行属性值运算的 */
  /* 具体实现 :   ~'不需要编译的语句'   */
  padding: ~'calc(100px + 100)';
}

/* 编译到css文件 */
.app {
  /* 编译过的语句 */
  margin: 200px;
  /* 跳过编译 */
  padding: calc(100px + 100);
}

less 继承

性能比混合高 灵活度比混合低

性能高主要是体现在编译成 css 之后，相同的代码会以逗号形成兄弟选择器而共用样式集合表，实现的样式的复用，减少编译后的代码量 灵活度低体现在没有办法传参数

• 把公共的代码放到一个样式集合的类中去，然后再由需要这些样式的样式集合去继承
• 注意区分样式集合类和混合的定义的区别
• 混合的定义： .mixin(){}
• 样式集合类的定义： .class{}

// extend.less

@import 'juzhong-extend.less';
#wrap {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
  .inner {
    /* 继承，共有的样式是从样式类中继承来的，私有的样式在自己的样式集合中定义 */
    /* 在后面加上 all 则会将 .juzhong 中所有的样式都继承过来 */
    &:extend(.juzhong all);
    &:nth-child(1) {
      width: 100px;
      height: 100px;
      background: pink;
    }
    &:nth-child(2) {
      width: 50px;
      height: 50px;
      background: yellow;
    }
  }
}

// juzhong-extend.less

/* 没有使用 all 的时候就只会继承这个 */
.juzhong {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}

/* 使用 all 之后，所有的与之相关的都会被继承，所以这里会被继承 */
.juzhong:hover {
  background: red !important;
}

// 编译完成后的 css 文件 // extend.css

/* 继承来的样式用逗号表示兄弟标签一起写，性能更好 */
.juzhong,
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
.juzhong:hover,
#wrap .inner:hover {
  background: red !important;
}
#wrap {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
}
/* 各自的私有样式分开写 */
#wrap .inner:nth-child(1) {
  width: 100px;
  height: 100px;
  background: pink;
}
#wrap .inner:nth-child(2) {
  width: 50px;
  height: 50px;
  background: yellow;
}