less基本语法

最近在用 less 开发项目，好多 less 的语法已经忘了，平时都习惯用 sass，这次这个项目要用，就重新梳理一下less的基本语法。

安装 less 编译器

npm install -g less

基础用法：

1、变量：less 可以像 js 一样声明变量。

@ 10px;
header{width: @width;}

选择器中使用变量

@header:header;
.@{header}{width: 10px;}

URL中使用变量：

@images:"../images";
header{background:url("@{images}/img.jpg");}

2、作用域

@var: red;
#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

3、外部 less

@import "lib.less";
@import "lib";

4、嵌套：简写css选择器

.header{
　　 color: red;
    .logo{
        color: white;
    }
}

5、父级选择器

a {
    color:blue;
    &:hover{ color: green; } // 同 a:hover
    & + &{ color: white; } // a + a
    &-children{ color: black; } // a-children
}

6、命名空间

.bundle {
    mixin(){}
}
//调用
.bundle>mixin()

7、继承

.inline{ width:100px; }
nav ul {
  &:extend(.inline);
  color:white;
}

8、合并

// 逗号合并(使用+)
.myfunc() {
  box-shadow+: 5px 5px 5px grey;
}
.class {
  .myfunc();
  box-shadow+: 0 0 5px #f78181;
}
// 结果box-shadow: 5px 5px 5px grey, 0 0 5px #f78181;

9、循环

.cont(@count) when (@count > 0) {
  .cont((@count - 1));
  width: (25px * @count);
}
div {
  .cont(7);
}

10、函数

.b(){display: block;}
.o(){overflow: hidden;}
.main{
  .b();
  .o();
}

打完收工！