一、前端入门学习-less（9）

最新推荐文章于 2024-03-18 09:35:54 发布

有语忆语

最新推荐文章于 2024-03-18 09:35:54 发布

阅读量100

点赞数

分类专栏：前端文章标签：前端学习 less

本文链接：https://blog.csdn.net/qq_44696532/article/details/126779758

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、less的简介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html{
            /* css原生也支持变量的设置 */
            --color:#ff0;
            --length:200px;
        }

        .box1{
            /* calc()计算函数 */
            width: calc(200px*2);
            height: var(--length);
            background-color: var(--color);
        }

        .box2{
            width: var(--length);
            height: var(--length);
            color: var(--color);
        }

        .box3{
            width: var(--length);
            height: var(--length);
            border: 10px solid var(--color);
        }
    </style>
</head>
<body>
    <!-- 
        less是一门css的预处理语言
            - less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式
            - 在less中添加了许多的新特性：像对变量的支持、对mixin的支持... ...
            - less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，
                所以浏览器无法直接执行less代码，要执行必须向将less转换为css，然后再由浏览器执行

        div{
            width:100px;
        }

        div
            width 100px
     -->

     <div class="box1">aaaa</div>
     <div class="box2">aaaa</div>
     <div class="box3">aaaa</div>
</body>
</html>

二、less的语法

//import用来将其他的less引入到当前的less
//可以通过import来将其他的less引入到当前的less中
@import "syntax2.less";

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

// less中的单行注释，注释中的内容不会被解析到css中

/*
    css中的注释，内容会被解析到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");
}

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

div{
    // 变量发生重名时，会优先使用比较近的变量
    @d:115px;
    width: @d;
    height: @e;
}

//可以在变量声明前就使用变量
@e:335px;


div{
    width: 300px;
    // 新版的语法
    // height: $width;
}