Web前端HTML5+CSS3知识点（11)css入门---less

1.less简介

.div.box$*3
css中也能使用一些强大的功能，比如css原生也支持变量的设置，在html中可以用 --变量名：变量值来指定，又比如可以使用calc（）函数来计算某个值。但是css中的新特性兼容性不好，实际上这些新特性并不怎么用。使用 var(--变量名)
less是一门CSS的预处理语言
        less是CSS的增强版，通过less我们可以编写更少的代码，实现更强大的功能。在less中添加了许多新特性，增加了对变量的支持、对mixin的支持。
        less的语法与css基本上一致，但是less中增添了许多对css的拓展。所以浏览器无法直接执行less代码，要执行必须向将less转换为css，然后再由浏览器执行
(vs code中可以下载easy less 插件，保存时可以将less的内容转化为css的内容）

2.less的语法

(1) less中可以直接在祖先选择器当中写其后代选择器的样式
(2) less中的单行注释，注释中的内容不会被解析到css中  

// less注释等 ，不会编译到css

/*
  css 注释 
*/

(3) 在变量中，可以存储一个值，并且我们可以在需要时，任意修改变量中的值。在less中，变量的语法为@变量名：变量值；
(4) 使用变量时，如果是直接使用变量，则直接用@变量名使用即可，但作为类名或一部分值使用时，我们必须以@{变量名}的形式使用
(5)变量发生重名时，会使用最后赋值的重名变量(最近原则)，且变量有作用域，在选择器内设置的变量，无法在选择器外被使用。 情况下，在使用变量前就要声明变量。

$符号可以引用上一个变量

width:300px;
height:$width;

&符:   &符表示外层的父元素 

.box1{
 .box2{
        color:red;
  }
  >.box3{
    color:red;
    &:hover{
     color: red
  }
}

}

extend（）：对当前选择器扩展指定选择器的样式（选择器分组）,和mixin方式实现相同的目的。

.p1{
  width:100px;
  heigh:100px;
}
.p2.extend(.p1){
color:red;
}

mixin方式处理：

.p3{
//直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制
//mixin 混合
.p1();
}

 使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins

.p4(){
width: 100px;
height: 100px;
}

混合函数 在混合函数中可以直接设置变量：

.test(@w:100px,@h:200px,@bg-color:red){
width: @w;
height: @h;
border: 1px solid @bg-color;
}

div{
//调用混合函数，按顺序传递参数
// .test(200px,300px,#bfa);
.test(300px);
// .test(@bg-color:red, @h:100px, @w:300px);
}

函数：
average()：平均值函数，可以取两个颜色中间的那个颜色。
在less中，可以直接对数值 进行加减乘除计算。

引入：
可以用@import来将其他的less引入到当前的less中，通过@import可以让less各司其职，每个less编写特定的功能，最后统一起来，将其进行模块化处理，这样便于后期的维护。

可以通过修改easy less 配置的配置，建立两者的关联关系 。