6. CSS预处理器-Less

CSS预处理器-Less

• less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
• LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。
• less的中文官网：http://lesscss.cn/
• bootstrap中less教程：http://www.bootcss.com/p/lesscss/
  

1. Less编译工具

• koala 官网:www.koala-app.com

2. less中的注释

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

3. less中的变量

• 使用@来申明一个变量：@pink：pink;
• 作为普通属性值只来使用：直接使用@pink
• 作为选择器和属性名：#@{selector的值}的形式
• 作为URL：@{url}
• 变量的延迟加载

4. less中的嵌套规则

• 基本嵌套规则
• &的使用

5. less中的混合

• 混合就是将一系列属性从一个规则集引入到另一个规则集的方式
• 普通混合
• 不带输出的混合
• 带参数的混合
• 带参数并且有默认值的混合
• 带多个参数的混合
• 命名参数
• 匹配模式
• arguments变量

mixin.less入口文件

@import "./triangle.less";
#wrap .sjx{
   .triangle(R,40px,yellow)
}

triangle.less

.triangle(@_,@wwww,@ccccc){
    width: 0px;
    height: 0px;
    overflow: hidden; 
}

.triangle(L,@w,@c){
    border-width: @w;
    border-style:dashed solid dashed dashed;
    border-color:transparent @c transparent transparent ;
}

.triangle(R,@w,@c){
    border-width: @w;
    border-style:dashed  dashed dashed solid;
    border-color:transparent  transparent transparent @c;
}

.triangle(T,@w,@c){
    border-width: @w;
    border-style:dashed  dashed  solid dashed;
    border-color:transparent  transparent @c transparent ;
}

.triangle(B,@w,@c){
    border-width: @w;
    border-style:solid dashed  dashed dashed;
    border-color:@c transparent  transparent transparent ;
}

mixin.css文件

#wrap .sjx {
  width: 0px;
  height: 0px;
  overflow: hidden;
  border-width: 40px;
  border-style: dashed  dashed dashed solid;
  border-color: transparent transparent transparent #ffff00;
}

6. less运算

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

7. less避免编译

• ~"避免编译的内容"

less文件

*{
    margin: 100 *  10px;
    padding: ~"cacl(100px + 100)";
}

css文件

* {
  margin: 1000px;
  padding: cacl(100px + 100);
}

8. less继承

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

less文件

*{
    margin: 0;
    padding: 0;
}

@import "mixin/juzhong-extend.less";
#wrap{
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
        &:extend(.juzhong all);
        &:nth-child(1){
           width: 100px;
           height: 100px;
           background: pink;
        }
        &:nth-child(2){
           width: 50px;
           height: 50px;
           background: yellow;
        }
    }
}

css文件

* {
  margin: 0;
  padding: 0;
}
.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;
}