一些有用的Less总结

1. less嵌套

这个不多说，大家比较常用

2. 变量

@white:#fff;

3. 导入

@import 路径 //比较常用

@import './style.less';

1、@import (reference)
用于导入外部文件，但不会将导入的样式添加到编译的CSS文件中。 这是在版本1.5.0 中发布的。

@import (reference)   './style.less';

2、@import (inline)
@import(inline)会将CSS复制到输出CSS文件中，而不进行处理。 当CSS文件不是LESS兼容时，这是有用的。 虽然LESS支持大多数标准CSS，但在某些地方不支持注释，并且不修改CSS，它不会支持所有已知的CSS黑客。 即使 @import(inline)不会处理CSS，它将确保所有的CSS将在一个文件中。

3、@import (less)
@import(less)会将文件导入为LESS文件，而不管文件扩展名是什么。

@import (less) "//demosource/less.txt";
.para_1 {
    color: red;
    .style;
}
.para_2 {
    color: blue;
}

demosource/less.txt
.style {
  font-family: "Comic Sans MS";
  font-size: 20px;
}

.style {
  font-family: "Comic Sans MS";
  font-size: 20px;
}
.para_1 {
  color: red;
  font-family: "Comic Sans MS";
  font-size: 20px;
}
.para_2 {
  color: blue;
}

4、@import(css)会将文件导入为常规CSS，而不管文件扩展名。 这是在版本1.4.0 中发布的。与（3）类似效果

5、@import(once)
@import(once)确保文件只导入一次，并且对该文件将忽略任何以下import语句。 这是 @import statments的默认行为。

6、 @import(multiple)
您可以导入具有相同名称的多个文件。 这与一次完全相反。

7、@import (optional)
可选允许您在文件不存在时导入文件。则文件不存在也不会报错。

允许在 @import 语句中使用多个关键字，但必须使用逗号分隔关键字。@import (less, optional) "custom.css";

4. less操作

LESS支持一些算术运算，例如加号(+)，减号( - )，乘法(*)和除法(/)，它们可以对任何数字，颜色或变量进行操作。 操作节省了大量的时间，当你使用变量，让感到就像是简单的数学工作。

@fontSize:10px;
.class{
  font-size:@fontSize*10;
}

5. less内置函数

js里面很多内置函数less都可以用，比如什么ceil,round等等。

函数地址： http://less.bootcss.com/functions/ 用的比较少，不做详细介绍。

e.g.:

@color: #FF8000;
@width:1.0;
.mycolor{
color: @color;
 width: percentage(@width);   //100%
}

6. 扩展（很有用却很少被用）

Extend是一个LESS伪类，它通过使用:extend 选择器在一个选择器中扩展其他选择器样式。

h2 {
  &:extend(.style);
  font-style: italic;
}
.style {
  background: green;
}

编译之后

h2 {
  font-style: italic;
}
.style,
h2 {
  background: green;
}

7. 混合（Mixins，很有用）

混合类似于编程语言中的函数。 Mixins是一组CSS属性，允许您将一个类的属性用于另一个类，并且包含类名作为其属性。 在LESS中，可以使用类或id选择器以与CSS样式相同的方式声明mixin。 它可以存储多个值，并且可以在必要时在代码中重复使用。 1,2,5情况比较常用详细说明

less mixin的使用

1、 不输出mixin

.a(){
  padding-left: 100px;
}
.myclass{
  background : #64d9c0;
  .a;
}

.myclass {
  background: #64d9c0;
  padding-left: 100px;
}
//可以看到没有a输出

2、 输出mixin

.a{
  padding-left: 100px;
}
.myclass{
  background : #64d9c0;
  .a; //.a()  //一样的效果
}

.a{
  padding-left: 100px;
}
.myclass {
  background: #64d9c0;
  padding-left: 100px;
}
//可以看到有a输出

3、Mixins中的选择器

.mixin() {
  &:hover {
    background: #FFC0CB;
  }
}
a {
  .mixin();
}

a:hover {
  background: #FFC0CB;
}

4、 !important

.mixin(){  
  color: #900;
  background: #F7BE81;
}
.para1{
  .mixin();
}
.para2{
  .mixin() !important;
}

.para1 {
  color: #900;
  background: #F7BE81;
}
.para2 {
  color: #900 !important;
  background: #F7BE81 !important;
}

8. 混合参数

1、参数可以使用逗号或分号分隔

.mixin(@color) {
  color: @color;
}
.mixin(@color; @padding: 2px) {
  color: @color;
  padding: @padding;
}

.myclass {
  color: #FE9A2E;
  padding: 2px;
}

. myheader{
  border:2px dashed green;
}

2、命名参数
通过使用它们的名称提供参数值而不是位置。

.mixin(@color: black; @fontSize: 10px) {
  color: @color;
  font-size: @fontSize;
}
.class1 {
  .mixin(@fontSize: 20px; @color: #F5A9D0);
}
.class2 {
  .mixin(#F79F81; @fontSize: 20px);
}

.class1 {
  color: #F5A9D0;
  font-size: 20px;
}
.class2 {
  color: #F79F81;
  font-size: 20px;
}

9. 循环(很有用）

  .mloop(@n,@i:5) when (@i <= @n) {
    
    .mt@{i}{
      margin-top: @i * 1px;
    }
    .mr@{i}{
      margin-right: @i * 1px;
    }
    .mb@{i}{
      margin-bottom: @i * 1px;
    }
    .pb@{i}{
      padding-bottom: @i * 1px;
    }
    .pl@{i}{
      padding-left: @i * 1px;
    }
    .mloop(@n,(@i + 5));//递归调用
  }；

  .mloop(80); //执行  以5为梯度 执行到80

10. 父选择器

这个比较常用 &

a {
  color: #5882FA;
  &:hover {
    background-color: #A9F5F2;
  }
}

a {
  color: #5882FA;
}
a:hover {
  background-color: red;
}