less学习

最新推荐文章于 2024-09-27 11:22:35 发布

MrX_YOUNG

最新推荐文章于 2024-09-27 11:22:35 发布

阅读量153

点赞数

分类专栏：笔记文章标签： less css

本文链接：https://blog.csdn.net/MrX_YOUNG/article/details/106910819

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

less是css预处理器
less可以使用嵌套结构
以//开头的注释不会被编译到css中；以/**/包裹的注释会被编译到css中
less中可以定义变量，使用@来定义变量(可以定义普通属性值，选择器，属性名，url)
在less中，变量是延迟加载的，变量会在作用域全部解析完毕后再加载变量
使用&可以使得嵌套中的子元素变为兄弟元素
less中的混合
- 混合就是将一系列属性从一个规则集引入到另一个规则集
- 普通混合：
  在less中输入

.h {
    height: 400px;

 .div1 {
        width: 100/@w;
        background-color: seagreen;
        // height: 400/@h;
        .h
    }

css中显示

.h {
  height: 400px;
}
.container .div1 {
  width: 4.76190476vw;
  background-color: seagreen;
  height: 400px;
}

不带输出的混合(加上（））

在less中输入

.h (){
    height: 400px;

 .div1 {
        width: 100/@w;
        background-color: seagreen;
        // height: 400/@h;
        .h
    }

css中不会显示.h { height: 400px; }

.container .div1 {
  width: 4.76190476vw;
  background-color: seagreen;
  height: 400px;
}

带参数的混合

.h(@w, @h,@c) {
    width: @w;
    height: @h;
    background-color: @c;
}


.div1 {
    .h(100px,200px,pink);
}

.div2 {
    .h(200px,100px,yellow);
}

带参数且有默认值的混合

.h(@w:10px, @h:20px,@c:pink) {
    width: @w;
    height: @h;
    background-color: @c;
}


.div1 {
    .h();
}

.div2 {
    .h(200px,100px,yellow);
}