less 是一门css扩展语言，里面提供的功能更方便我们开发。 less是利用javascript将less文件转换为css文件。

①变量

在javascript中变量与less中的变量及其类似，不同点在于javascript中使用var 等关系词来声明，

less中使用@符来作为声明符

例子

@n:15px; // 声明一个n变量，属性值15px

基本使用:

div { width:@n }

变量可以是 属性值 、属性名(background等)、路径。

当变量是属性名或则路径时 , 需要将变量名用花括号包含在里面

例如

@a:background;

div {

@{a}:blue

}

 常用的技巧

在我们的开发过程中，会经常使用路径来获取图片 我们可以定义一个路径的变量

例如

@picture:'../src/images'; // 直接定义在当前图片文件夹

div { background:'@{picture}/图片名.png'} // 使用起来就会相当简洁。

变量不需要提前声明也可以使用, 但 我们在开发过程中，建议将变量放在文件开头，这样方便观看。

②混合mixin

   作定义一个类名或则id名。作用:可以重复使用里面的属性值。

 定义混合

.bor {border:1px solid red;}

body {

   .border(); // 使用混合

}

结果

 body {border:1px solid red};

注意点:使用混合时加上括号;

在这里会不会有小伙伴会发现，如果我们在元素上面直接加上类名不是一样可以使用.bor里面的属性吗？

从结果上面来看最大的区别 属性值在放在body里面的,这样我们只需要在less文件中操作样式属性了

③嵌套

  less从的嵌套比较类似与html中的嵌套

  例如:div { button { color:blue} }  翻译成css就是 div button {color:blue} 

  结构会更加清晰

  如果在嵌套中想要使用伪元素选择器等等。 less提供了一个特殊符 & 代表父元素 , 注意只代表父元素

  div { &::before{....}}  翻译成css就是 div::before {}

 在嵌套这一节中只记住注意 &是代表父元素。使用起来就没有太大的问题了。

④运算

  1.  算数运算符+、-、*、/ 可以对任何数字、颜色或变量进行运算

  2. 算数运算符 在加减或比较之前会进行单位换算,计算结果以最左侧操作数的单位为准。

 3.calc() 特例 不运算最终结果，只计算嵌套函数中的变量和数学公式值

 例如

  @var:50px / 2;

div {width:calc(100px - @var)}

 结果就是

div {width:calc(100px - 25px);// 在css执行时会自动计算的}

⑤函数

   

1.percentage（）将一个小数，转换为 百分比。

2.saturate(颜色值,需要提高的百分比) 

3.命名空间  将混合只作为变量使用，

  

.bor() {border:1px solid red;}   //  将类名后面加上括号，就不会翻译在css中了，只会在使用的地方进行翻译

body {

   .border(); // 使用混合

}

4. 映射

    映射与命名空间比较类似，也可以说与混合比较类似

    

#bor(){

  pr:'bule';  // 使用自定义的名字 pr  

}

使用

 div {color:#bor[pr]}   // 使用时使用方括号

5. 作用域

   less中的作用域与css作用域类似

  首先从自己的作用域查找，如果没有则会向上一层查找。

 

⑥导入  

   导入的工作方式和你预期的一样，可以导入.less文件,此文件中的所有变量就可以全部使用了。

     如果导入的文件是 .less 扩展名，则可以将扩展名省略掉;

    

@import "library"; // library.less

@import "typo.css";