less练习代码

希望大佬文章可以白嫖

于 2022-07-07 21:50:05 发布

阅读量186

点赞数

分类专栏： less 文章标签： less

本文链接：https://blog.csdn.net/shiyibushiwei/article/details/125667631

版权

less 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了LESS CSS预处理器如何使用变量、字符串插值、选择器插值、嵌套等高级特性，包括定义变量、媒体查询条件变量、选择器和嵌套的使用方法，以及函数和参数的应用，展示了LESS如何提升CSS的编写效率和维护性。

摘要由CSDN通过智能技术生成

1、使用@变量名:值定义一个变量

<!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/less" href="less/01.less">
    <script src="js/less.min.js"></script>
</head>

<body>
    <div class="box">box</div>
    <div class="pox">pox</div>
</body>

</html>

// LESS CSS 是一种动态样式语言，属于 CSS 预处理语言的一种，它使用类似 CSS的语法，为 CSS 的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS 的编写和维护。

// LESS CSS 可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

// 说明：本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

// 使用@变量名:值  定义一个变量
@red: red;
@h200: 200px;

.box {
    width: 200px;
    height: @h200;
    background: @red; //使用变量
}

.pox {
    width: 300px;
    height: @h200;
    background: @red;
}

2、字符串插值、选择器插值、嵌套用法

<!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/less" href="less/04.less">
    <script src="js/less.min.js"></script>
</head>

<body>
    <div class="container">
    </div>
</body>

</html>

@w200: 200px;
@width: @w200;

.container {
    width: @width;
    height: 200px;
    background: red;
}

3、将媒体查询的条件作为变量

<!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/less" href="less/02.less">
    <script src="js/less.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="box"></div>
    </div>
    <div class="list">
        <ul>
            <li>列表</li>
        </ul>
    </div>
    <div class="bg">

    </div>

    <div class="footer">公共底部</div>

    <div class="pox">pox盒子</div>
</body>

</html>

@width: 500px; //定义一个全局变量
// .container .box{}  后代选择器，css的写法

.container {
    @width: 100px; //定义一个同名变量

    //嵌套的写法
    .box {
        width: @width; //就近原则 100px
        height: 200px;
        background: red;
    }
}

// .list ul li 后代选择器
.list {
    ul {
        li {
            color: #f00;
        }
    }
}

// @{bgurl}字符串插值
@bgurl: "https://x.dscmall.cn";

.bg {
    width: 300px;
    height: 300px;
    background: url("@{bgurl}/storage/data/gallery_album/113/original_img/113_P_1598898639675.jpg");
}

// @{foo}选择器插值
@foo: .footer;

@{foo} {
    color: red
}


// 选择器嵌套用法
// 定义了 w200  h200  bgred 三个选择器
.w200 {
    width: 200px;
    font-size: 30px;
}

.h200 {
    height: 200px;
}

.bgred {
    background: red;
}

// 选择器嵌套
.pox {
    .w200;
    .h200;
    .bgred;
}

4、多个参数

<!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/less" href="less/05.less">
    <script src="js/less.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="box"></div>
    </div>

    <div class="pox">111</div>

    <div class="cox">cox</div>

    <div class="dox">dox</div>

    <div class="footer"></div>

    <div class="trans"></div>
</body>

</html>

.width(@width) {
    width: @width ;
}

.height(@height) {
    height: @height;
}

.container {
    .box {
        .width(200px);
        .height(200px);
        background: red;
    }
}

.pox {
    .width(300px);
    .height(300px);
    background: red;
}

.w() {
    width: 300px;
}

.h() {
    height: 100px;
}

.green() {
    background: green;
}

.cox {
    .w();
    .h();
    .green()
}

// 参数默认值
.w2(@w: 300px) {
    width: @w;
}

.dox {
    .w2(500px);
    .h();
    .green()
}


// 多个参数
.foo(@w, @h, @color) {
    width: @w;
    height: @h;
    background: @color;
}

.footer {
    .foo(200px, 300px, red) !important;
}

.trans(@moveStyle: all, @moveTime: 3s) {
    transition: @argments;
}