less基础

less是一门css扩展语言,也称为css预处理器.
作为css的一种形式的扩展,它并没有减少css的功能,而是在现有的css语法上,为css加入程序语言的特性.
它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。

less变量

@变量名:值;

注意：

• 必须有@为前缀
• 不能包含特殊字符
• 不能以数字开头
• 大小写敏感

Less 编译 - vocode Less 插件

html文件，是没有办法直接使用less文件的。html只能使用css文件，只能将less转换为css.

推荐使用vocode Less
Easy Less插件会使用less中的解析器/翻译器，将less翻译为css

Less 嵌套

/*我们经常用到选择器的嵌套 (选择器组合使用：后代选择器)*/
#header .logo {
  width: 300px;
}
/* less中的选择器嵌套写法 */
#header {
    .logo {
       width: 300px;
    }
}

如果遇见 （交集|伪类|伪元素选择器） ，利用&进行连接

a:hover{
    color:red;
}
a{
  &:hover{
      color:red;
  }
}

Less 运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

/*Less 里面写*/
@witdh: 10px + 5;
div {
    border: @witdh solid red;
}
/*生成的css*/
div {
  border: 15px solid red;
}
/*Less 甚至还可以这样 */
width: (@width + 5) * 2;

• 乘号（*）和除号（/）的写法
• 运算符中间左右有个空格隔开 1px + 5
• 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
• 如果两个值之间只有一个值有单位，则运算结果就取该单位

导入less文件

@import  “文件名”  

import:导入。引号里边的是导入的文件，可以不写后缀less