less使用

2022/2/13

介绍

less 是一个 css 的增强版，通过 less 可以编写更少的代码实现更强大的样式

在 less 中添加了许多的新特性：像对变量的支持、对 mixin 的支持… …

less 的语法大体上和 css 语法一致，但是 less 中增添了许多对 css 的扩展，

所以浏览器无法直接执行 less 代码，要执行必须向将 less 转换为 css，然后再由浏览器执行

语法

可以嵌套

.box1{
    background-color: #bfa;
    .box2{
        background-color: #ff0;
        .box4{
            color: red;
        }
    }
    .box3{
        background-color: orange;
    }
}

可以使用变量

//变量，在变量中可以存储一个任意的值
// 并且我们可以在需要时，任意的修改变量中的值
// 变量的语法： @变量名
@a:200px;
@b:#bfa;
@c:box6;

.box5{
    //使用变量是，如果是直接使用则以 @变量名 的形式使用即可
    width: @a;
    color:@b;
}

//作为类名，或者一部分值使用时必须以 @{变量名} 的形式使用
.@{c}{
    width: @a;
    background-image: url("@{c}/1.png");
}

表示当前层的用法

.box1{
    //为box1设置一个hover
    //& 就表示外层的父元素
    &:hover{
        color: orange;
    }
    div &{
        width: 100px;
    }
}

继承

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

.p2:extend(.p1){

color: red;

}

混合

// 使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins
.p4(){
    width: 100px;
    height: 100px;
}
.p5{
    .p4;
}

混合函数

//混合函数 在混合函数中可以直接设置变量
.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);
}

就是说可以定义一个函数，然后这个函数里面也可以有默认值，这样的话，使用的时候不传值也能使用。

运算和引入

@import "syntax2.less";

.box1{

    // 在less中所有的数值都可以直接进行运算

    // + - * /

    width: 100px + 100px;

    height: 100px/2;

    background-color: #bfa;


}

LOADING