less基本用法

less

less是一门css的预处理语言

less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式
在less中添加了许多的新特性:像对变量的支持、对mixin的支持... ...
less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，
所以浏览器无法直接执行less代码，要执行必须向将less转换为css，然后再由浏览器执行

css原生也支持变量的设置

hmtl{
    --color:#bfa;
    --length:100px;
}

calc()计算函数

变量，在变量中可以存储一个任意的值
并且我们可以在需要时，任意的修改变量中的值

• 变量的语法:@变量名

• 使用变量时，如果是直接使用则以@变量名的形式使用即可

• 作为类名，或者一部分值使用时必须以@{变量名}的形式使用

• 变量发生重名时，会优先使用比较近的变量

• 可以在变量声明前就使用变量

为box1设置一个hover
&就表示外层的父元素

box1{
&:hover{
    color:red;
}
div &{
    width:100px;
}
}

:extend()对当前选择器扩展指定选择器的样式（选择器分组)

.p1{
    width:100px;
    height:200px;
}
.p2:extend(.p1){
    color:red;
}
.p3{
    //直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制
    //mixin混合
    .p1();
}
//使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins
.p4(){
    width:100px;
    height:100px;
    background-color:#bfa;
}

混合函数

//在混合函数中可以直接设置变量
.test(@w,@h,@bg-color){
width: @w;
height: @h;
border: 1px solid @bg-color;
}

可以通过import来将其他的less引入到当前的less中

@import "style.less";

.box1{
//在less中所有的数值都可以直接进行运算
    //+ - */
    width: 100px + 100px;
    height: 100px/2;
    background-color:#bfa;
}