LESS

变量

1. 值变量

我们经常看到在css中同一个值重复多次，这样的代码难维护。我们是否有一种办法为同一串代码为其命名一个变量，只要修改该变量的值，所有代码的属性都改变
在平时的工作中，我们把常用的变量封装到一个文件，这样有利于代码组织维护
@bgColor:pink
	#app{
	background-color:@bgColor;
} 

2. 选择器变量

让选择器变为动态
@mySelect:#wrap;
@Wrap:wrap
	@{mySelect}{
	color:#ccc
}
.@{Wrap}{
    color:pink;
}
#@{Wrap}{
    color:red;
}

3. 属性变量

可以减少代码编量
@borderStyle:border-style;
@Solid:solid;
#wrap{
    @{borderStyle}:@Solid;
}

4. url变量

项目结构改变时，修改其变量即可
@imgUrl:'../images';
body{
    background:url("@{imgUrl}/index.png")
}

5. 声明变量

有点类似混合方法
@background:{background:red};
#app{
    @background();
}
@Active:{
    color:red
}
.app{
    @Active();
}

6. 变量运算

@width:200px;
@color:#ccc;
#wrap{
    width:@width-20;
    height:@width-20*5;
    background-color:@color+#000;
}

7. 变量作用域

就近原则
@var:@v
@v：80%；
#wrap{
    width:@var;
    @v:70%;
}
/*css*/
#wrap{
    width:70%;
}

8. 变量定义变量,替换值

@a:'我是a';
@b:'我是b';
#wrap::after{
    content:@@b;// '我是a'
}

嵌套

1. &的使用

&: 代表的上一层选择器名字
#app{
    //#app::after
    &:after{
        content:'aaa';
    }
    //#app .box
    .box{
    	width:20px;
    }
    //#app_content
    _content{
    	color:#ccc;
    }
}

2. 媒体查询

#app{
    @media screen{
        @media (max-width:768px){
            width:100px;
        }
    }
    @media screen{
        @media (min-width:208px){
            width:50px;
        }
    }
}

混合方法

1. 无参数方法

方法犹如声明的合集，使用时直接键入名称即可
.box(){
    background:red;
    color:#ccc;
}
#wrap{
    .box()
}

2. 默认参数方法

.border(@a:10px,@b:50px,@c:30px,@color:#fff){
    border:solid 1px @color;
    box-shadow:@arguments;
    width: 800px;
    height:400px;
}
#app{
    .border(0px,5px,30px,red);
}
.box{
    .border(0px);
}
// 编译后的css,传的参数优先级更高
#app {
    border: solid 1px red;
    -webkit-box-shadow: 0px 5px 30px red;
    box-shadow: 0px 5px 30px red;
    width: 800px;
    height: 400px;
}
.box {
    border: solid 1px #fff;
    -webkit-box-shadow: 0px 50px 30px #fff;
    box-shadow: 0px 50px 30px #fff;
    width: 800px;
    height: 400px;
}

3. 方法的匹配模式

.box(top,@width:800px,@color:#000){
    border-color: transparent transparent @color transparent;
}
.box(left,@width:800px,@color:#000){
    border-color: @color transparent transparent transparent;
}
.box(bottom,@width:800px,@color:#000){
    border-color: transparent @color transparent transparent;
}
.box(@_,@width:800px,@color:#000){
    border-style: solid;
    border-width: @width;
}
#app{
    .box(left , 900px ,red)
}
// 生成的css
#app {
    border-color: @color transparent transparent transparent;
    border-style: solid;
    border-width: @width;
}
#app {
    border-color: #000 transparent transparent transparent;
    border-style: solid;
    border-width: @800px;
}
#app {
    border-color: red transparent transparent transparent;
    border-style: solid;
    border-width: @900px;
}

4. 方法的命名空间，让方法更规范？？？
5. 方法的条件筛选

#card{
// and运算符，相当于&&，条件全部符合才会执行
    .border(@width,@color,@style) when (@width>100px)and(@color=#000){
        border: @width @color @style;
    }
// not运算符，相当于！，条件不符才会执行
    .background(@color) when not(@color>=#222){
        background: @color;
    }
// ,逗号运算符，相当于||，只要条件有一个符合就执行
    .font(@size:20px) when (@size>50px) ,(@size<200px){
        font-size: @size;
    }
}
#app{
    #card >.border(200px,#000,solid);
    #card >.background(#222);
    #card >.font(16px)
}

6. 数量不定的参数

//类似ES6的扩展运算符
.boxShadow(...){
    box-shadow: @arguments;
}
.textShadow(@a,...){
    text-shadow: @arguments;
}
#app{
    .boxShadow(1px,4px,30px,red);
    .textShadow(2px,4px,20px,pink)
}

7. 方法使用important

.border{
    border: solid 1px red;
    margin: 50px;
}
#main{
    .border() !important;
}

8. 循环方法，生成栅格系统

.generate-columns(4);
.generate-columns(@n,@i:1) when (@i =< @n){
    .column-@{i}{
        width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i+1));
}

9. 属性拼接方法

+ 代表的是 逗号
.boxShadow(){
    box-shadow+:inset 0 0 10px #ccc;
}
#app{
    .boxShadow();
    box-shadow+:0 0 20px pink;
}

+_ 代表的是 空格
.Animation(){
    transform+_: scale(2);
}
#app{
    .Animation();
    transform+_:rotate(50deg);
}

继承

extend是LESS的一个伪类，它可继承所匹配声明中的全部样式

1. extend关键字使用

/* Less */
  .animation{
      transition: all .3s ease-out;
      .hide{
        transform:scale(0);
      }
  }
  #main{
      &:extend(.animation);
  }
  #con{
      &:extend(.animation .hide);
  }

  /* 生成后的 CSS */
  .animation,#main{
    transition: all .3s ease-out;
  }
  .animation .hide , #con{
      transform:scale(0);
  }

2. all全局搜索替换

匹配全部生明
#main{
    width: 200px;
    height: 200px;
    background: red;
}
#main{
    &:afer{
      content: "aaa"
    }
}
#box:extend(#main all){}

3. 减少代码重复性

.Method{
    width: 200px;
    &:after{
      content: "aaa";
    }
}
#app{
    .Method
}
#box{
    .Method
}

导入

1. 导入less文件，可省略后缀

@import "style"

2. @important的位置可以随意放

#box{
  color: #ccc;
}
@import "style"

3. reference

导入外部文件，但不会添加把导入的文件编译到最终输出中，只引用
@import(reference)"bootstrap.less";

4. once

相同的文件只会被导入一次，而随后导入文件的重复代码都不会被解析

5. multiple

使用@import(multiple)允许导入多个同名文件

函数

1. 判断类型
2. 颜色操作
3. 数学函数

更多函数请查看官网 http://lesscss.cn/functions/

其他

1. 注释

/ / less提供的一种注释不会编译在css中

2. 避免编译

#app{
    width:~'calc(300px-20px)'
}

3. 使用JS

由于less是js编写，可以在其代码中使用js