html-css12 less 父元素扩展混合函数 /less与Css的位置

木一叶liuyue

已于 2022-03-15 17:14:52 修改

阅读量601

点赞数

分类专栏：前段文章标签： html less css3

于 2022-03-14 21:42:02 首次发布

本文链接：https://blog.csdn.net/Kerryliuyue/article/details/123489365

版权

前段专栏收录该内容

47 篇文章 0 订阅

订阅专栏

less

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>

    html{
        /*CSS原生也支持变量的设置,维护使用起来很方便*/
        --color:antiquewhite;/*变量名是color*/
        --length:100px;
    }
    .box1{
        width: var(--length);
        height: 100px;
        background-color:var(--color);

    }
    .box2{
        width: 100px;
        height: 100px;
     color:var(--color);
        
    }
    .box3{
        /*calc()计算函数*/
        width: calc(1000px/2);
        height: 100px;
        border: 10px solid var(--color);
        
    }
</style>
<body>
    <!--
        less是一门CSS的预处理语言，
            less是css的增强版，通过less编写更少的代码，实现更强大的样式
            在less中国添加了许多的新特性，对变量的支持，对mixin的支持
            less增添了许多对css的扩展
    -->
    <!-- .box$*3 -->
    <div class="box1">aaa</div>
    <div class="box2">aaa</div>
    <div class="box3">aaa</div>
</body>
</html>

less如何使用

/*以less的形式在写css*/
// body{
//     background-color: antiquewhite;
// }

/*多行注释，而且会被解析到css文件中*/
.box1{
    background-color: aquamarine;

    .box2{
        background-color: rgb(250, 201, 142);
        }


        .box3{
            background-color: orange;
        }
}


//变量，在变量中可以存储一个任意的值
//并且我们可以在需要是，任意的修改变量中的值
//变量的语法：@变量名
@a:100px;
@b:orange;
@c:box6;
.box5{
    //使用变量时，如果是直接使用，直接 @变量名  使用就可以
    width: @a;
    background-color: @b;
}


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

@d:200px;
@d:300px;
//就近原则，所以d是300px

div{
    height: @e ;
    width: $height;
}
@e:100px;
//可以在变量声明前就使用变量

父元素和扩展

.box1{
    //后代元素选择器写法
    .box2{
        background-color: aqua;
    }
//子元素选择器写法
    >.box3{
        background-color: bisque;

        &:hover{
            color: black;
        }
    }
    //为box1设置hover效果
    //&表示外层的父元素
    &:hover{
        background-color: orange;
    }

}

.p1{
    width: 200px;
    height: 200px;
}
//对当前选择器扩展指定选择器的样式（选择器分组）
.p2:extend(.p1){
    color: antiquewhite;
}




.p3{
    //直接对指定的样式进行引用，就相对于对p1的样式进行了复制
    .p1();
}

//使用类选择器可以在后面加一个括号，这个时候已经不是选择器了，我们实际上就创建看一个mixins
.p4{
    width: 200px;
    height: 100px;
    background-color: bisque;
}

.p5{
    .p4();
}

对比图：
请添加图片描述

混合函数


//混合函数 在混合函数中可以直接设置变量
.test(@w,@h,@bgcolor){
//还可以指定默认值，可以不传值，使用默认值之
//.test(@w:100px,@h,@bgcolor){
    width: @w;
    height: @h;
    border: 10px @bgcolor solid;
}

div{
    //调用混合函数，按顺序传递参数
    .test(200px,300px,red);
}

span{
    //可以取颜色的平均值
    color: average(red,yellow);
}

//将body hover的时候,对颜色进行加深,使用darken函数
body:hover{
    background-color: darken(#bfa,50%);
}

请添加图片描述

less与css的位置

//引入其他less的样式，可以直接在这个less使用
//@import "other.less"

.box1{
    //在less中，所有的数值都可以直接计算

    width: 100px+100px;
    height: 200px-50px;
    background-color: antiquewhite;

    color: aliceblue;
}

//配置完成后，我在网页调试的时候可以找到less在哪里

如何对应查找的链接

木一叶liuyue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html-css12 less 父元素扩展混合函数 /less与Css的位置

less<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g
复制链接

扫一扫