网站首页编程语言正文

CSS样式：less语言的用法

作者：那人独钓寒江雪. 更新时间： 2022-07-12 编程语言

<!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>
    <style>
        html{
            /* css原生也支持变量的设置 
            变量名可自取
            */
            --color:#bfa;
            --length:100px;
        }
        .box1{
            width: var(--length);
            height: 100px;
            background-color: var(--color)
        }
        .box2{
            width: 100px;
            height: 100px;
            color:#bfa;
        }
        .box3{
            width: 100px;
            height: 100px;
            border: 10px solid #bfa;
        }
    </style>
</head>
<body>
    <!-- less是一门css的预处理语言
        - less是一个css的增强版,通过less可以编写更少的代码实现更强大的样式 -->
    <div class="box1">aaa</div>
    <div class="box2">bbb</div>
    <div class="box3">ccc</div>
</body>
</html>

在这里插入图片描述

<!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>
    <link rel="stylesheet" href="C:\Users\Administrator\Desktop\HTML\CSS学习文件夹\7\10\syntax.css">
</head>
<body>
    
</body>
</html>

//import用来将其他的less引入到当前的less
@import "syntax.less";

//less中的单行注释, 
.box1 {
    background-color: #bfa;

    .box2 {
        background-color: #ff0;

        .box4 {
            background-color: red;
        }
    }

    .box3 {
        background-color: orange;
    }
}

// 变量, 在变量中可以存储一个任意的值
// 并且我们可以在需要时,任意的修改变量中的值
@a:100px;
@b:red;
@c:box6;

.box5{
    //使用变量时,如果可以直接使用 则以@变量名的形式使用即可
    width: @a;
    color: @b;
}
.p1{
    width: 100px;
    height: 200px;
}

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

@d:200px;
@d:300px;

div{
    @d:115px;
    width: @d;
    //表示外层的父元素 为box1设置一个hover
    &:hover{
        color: oldlace;
    }
}

//:extend() 对当前选择器扩展指定的选择器的样式(选择器分组)
.p2:extend(.p1){
    color: red;
}
.p3{
    //直接对指定的样式进行引用,这里就相当于将p1的样式在这里进行了复制
    //mixin 混合
    .p1();
}
.p4(){
    width: 100px;
    height: 100px;
    background-color: #bfa;
}

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

div{
    //可更改默认值
    .test(100px,200px,red)
}

span{
    color: average(red,yellow);
}
.box7{
    //在less中所有的数值都可以直接进行运算
    width: 100px+100px;
    height: 100px/2;
    background-color: #bfa;
}

.box1 {
  background-color: #bfa;
}
.box1 .box2 {
  background-color: #ff0;
}
.box1 .box2 .box4 {
  background-color: red;
}
.box1 .box3 {
  background-color: orange;
}
.box5 {
  width: 100px;
  color: red;
}
.p1,
.p2,
.p2 {
  width: 100px;
  height: 200px;
}
.box6 {
  width: 100px;
  background-image: url("../../../图片素材/1.jpg");
}
div {
  width: 115px;
}
div:hover {
  color: oldlace;
}
.p2 {
  color: red;
}
.p3 {
  width: 100px;
  height: 200px;
}
div {
  width: 100px;
  height: 200px;
  border: 1px solid red;
}
span {
  color: #ff8000;
}
.box7 {
  width: 200px;
  height: 100px/2;
  background-color: #bfa;
}
.box1 {
  background-color: #bfa;
}
.box1 .box2 {
  background-color: #ff0;
}
.box1 .box2 .box4 {
  background-color: red;
}
.box1 .box3 {
  background-color: orange;
}
.box5 {
  width: 100px;
  color: red;
}
.p1,
.p2,
.p2 {
  width: 100px;
  height: 200px;
}
.box6 {
  width: 100px;
  background-image: url("../../../图片素材/1.jpg");
}
div {
  width: 115px;
}
div:hover {
  color: oldlace;
}
.p2 {
  color: red;
}
.p3 {
  width: 100px;
  height: 200px;
}
div {
  width: 100px;
  height: 200px;
  border: 1px solid red;
}
span {
  color: #ff8000;
}
.box7 {
  width: 200px;
  height: 100px/2;
  background-color: #bfa;
}

原文链接：https://blog.csdn.net/m0_62491934/article/details/125710959

上一篇：linux中删除指定文件以外的其它所有文件
下一篇：CSS样式：弹性容器上的样式

网站首页 编程语言 正文

CSS样式：less语言的用法

相关推荐

网站首页编程语言正文