Less的使用教程

最新推荐文章于 2024-04-28 17:46:18 发布

加菲猫��

最新推荐文章于 2024-04-28 17:46:18 发布

阅读量462

点赞数

文章标签： css less css3

本文链接：https://blog.csdn.net/qq_52701502/article/details/130003301

版权

less 教案

学习目标

1.理解什么是less
2.熟练应用less的嵌套语法
3.熟练定义less的变量
4.熟练应用less的计算
5.熟练应用less的混合

第一章 Less入门

1.1 节什么是Less

less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展LESS 既可以在客户端上运行，也可以借助Node.js在服务端运行。

less的中文官网：http://lesscss.cn/

1.2 节 Less入门应用

在之前我们通过CSS编写一块内的样式时经常使用包含选择器父选择器子选择器来划定样式的范围。但是当css代码很多的时候，代码就会显得很乱，难以维护。less是Css的预编译器，可以很轻松的解决这个问题，它支持代码缩进的方式选择子选择器。如下语法所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rGIksyVB-1680824925798)(./assets/1.png)]

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>less入门程序</title>
    <style type="text/less">
        *{margin:0;padding:0;}
        #app{
            height:400px;
            background-color: blue;

            .adv{
                width:100px;
                height:100px;
                background-color:pink;
            }
        }
    </style>
    <script src="./less/less.min.js"></script>
</head>
<body>
    <div id="app"><div class="adv"></div></div>
</body>
</html>

**注意：**一定要引入less.min.js,浏览器并不识别less语法，less.min.js帮我们把less语法转为css语法。

第二章 Less嵌套语法

2.1 节父子级嵌套

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>less父子级嵌套</title>
    <style type="text/less">
       #app {
            height:400px;
            background-color: pink;
            overflow: hidden;
            position: relative;
            .adv{
                width:100px;
                height:100px;
                position: absolute;
                top:0;
                bottom:0;
                left:0;
                right:0;
                margin:auto;
                background-color: blue;
            }
       }
    </style>
    <script src="./less/less.min.js"></script>
</head>
<body>
    <div id="app"><div class="adv"></div></div>
</body>
</html>

2.2 节平级嵌套

Less除了支持父子嵌套，还支持平级嵌套，语法如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F3qCiCof-1680824925799)(./assets/2.png)]

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>less平级嵌套</title>
    <style type="text/less">
       #app {
            height:400px;
            background-color: pink;
            overflow: hidden;
            position: relative;
            .adv{
                width:100px;
                height:100px;
                position: absolute;
                top:0;
                bottom:0;
                left:0;
                right:0;
                margin:auto;
                background-color: blue;
                &:hover{
                    background-color: yellow;
                }
            }
            
       }
    </style>
    <script src="./less/less.min.js"></script>
</head>
<body>
    <div id="app"><div class="adv"></div></div>
</body>
</html>

第三章 Less 的变量与计算

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>less定义变量与计算</title>
    <style type="text/less">
       @width:100px; 
       #app {
            height:400px*2;
            background-color: pink;
            overflow: hidden;
            position: relative;
            .adv{
                width:@width*2;
                height:100px;
                position: absolute;
                top:0;
                bottom:0;
                left:0;
                right:0;
                margin:auto;
                background-color: blue;
            }
       }
    </style>
    <script src="./less/less.min.js"></script>
</head>
<body>
    <div id="app"><div class="adv"></div></div>
</body>
</html>

第四章 Less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

语法如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QMOuxVyu-1680824925801)(./assets/3.png)]

4.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>less中普通混合</title>
    <style type="text/less">
        *{
            margin:0;
            padding: 0;
        }
        #app{
            height:400px;
            background-color: blue;
        }
        .juzhong{
            width:100px;
            height: 100px;
            background-color: red;
            margin: 10px auto;
        }
        .adv1{
            .juzhong();
        }
        .adv2{
            .juzhong();
        }
    </style>
    <script src="./less/less.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="adv1"></div>
        <div class="adv2"></div>
    </div>
</body>
</html>

4.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>带参数混合</title>
    <style type="text/less">
        *{
            margin:0;
            padding: 0;
        }
        #app{
            height:400px;
            background-color: blue;
        }
        .juzhong(@w,@h){
            width:@w;
            height: @h;
            background-color: red;
            margin: 10px auto;
        }
        .adv1{
            .juzhong(100px,100px);
        }
        .adv2{
            .juzhong(200px,200px);
        }
    </style>
    <script src="./less/less.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="adv1"></div>
        <div class="adv2"></div>
    </div>
</body>
</html>

4.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>有默认值的混合</title>
    <style type="text/less">
        *{
            margin:0;
            padding: 0;
        }
        #app{
            height:400px;
            background-color: blue;
        }
        .juzhong(@w:100px,@h:100px){
            width:@w;
            height: @h;
            background-color: red;
            margin: 10px auto;
        }
        .adv1{
            .juzhong();
        }
        .adv2{
            .juzhong(300px,300px);
        }
    </style>
    <script src="./less/less.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="adv1"></div>
        <div class="adv2"></div>
    </div>
</body>
</html>

4.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>命名参数</title>
    <style type="text/less">
        *{
            margin:0;
            padding: 0;
        }
        #app{
            height:400px;
            background-color: blue;
        }
        .juzhong(W,@N){
            width:100px;
            height: @N;
            background-color: red;
            margin: 10px auto;
        }
        .juzhong(H,@N){
            width:@N;
            height: 100px;
            background-color: red;
            margin: 10px auto;
        }
        .adv1{
            .juzhong(W,300px);
        }
        .adv2{
            .juzhong(H,300px);
        }
    </style>
    <script src="./less/less.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="adv1"></div>
        <div class="adv2"></div>
    </div>
</body>
</html>

加菲猫��

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
Less的使用教程

less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展LESS 既可以在客户端上运行，也可以借助Node.js在服务端运行。less的中文官网：http://lesscss.cn/
复制链接

扫一扫