less基础

最新推荐文章于 2023-08-11 09:33:56 发布
最新推荐文章于 2023-08-11 09:33:56 发布
阅读量168 收藏
点赞数 2
分类专栏： 前端 文章标签： css less css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46670673/article/details/129996198
版权

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的预编译器，可以很轻松的解决这个问题，它支持代码缩进的方式选择子选择器。如下语法所示：

在这里插入图片描述

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除了支持父子嵌套，还支持平级嵌套，语法如下：

在这里插入图片描述

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中的混合

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

语法如下：

在这里插入图片描述

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>

第五章 总结

  1. 理解Less的作用
  2. 熟练应用Less嵌套语法
  3. 熟练应用Less的变量与计算
  4. 熟练应用Less的混合
龙龙打代码
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
coffce-less:一个模块化的Less基础类库，包含Reset、栅格系统、原子类、常用class和浏览器兼容等模块
05-21
一个模块化的Less基础类库，包含Reset、栅格系统、原子类、常用class和浏览器兼容等模块。 ##使用： 首先在你的less里引入 coffce.less，再根据你的需要，调用各个模块的init初始化模块 npm install coffce-less // ...
Less
01-07
Less基础 css存在的弊端 css是一门非程序式与语言，没有变量、函数、scope（作用域）等概念 css需要书写大量看似没有逻辑的代码，css冗余度是比较高的 不方便维护和扩展，不利于复用 css没有很好的计算能力 非前端...
less快速入门
javaip_的博客
05-07 217
Less(Leaner Style Sheets)是一门CSS预处理语言，它扩充了CSS语言，增加了诸如变量、混合(mixin)、函数等功能，让CSS更容易维护、复用、扩展，简单来说用了less，你就可以像写js一样去写你的css样式；Less的出现并不是取代了CSS，也没有裁剪CSS原有的特性，而是在现有的CSS语法的基础去加入程序式语言的特征，也就是浏览器并不能识别less的，less文件要先转成css文件才可以（less框架内置了转码less-css）；就可以把xx.less 转成 xx.css。
Less.
qq_57586976的博客
10-29 950
less学习笔记
Less知识点整理学习笔记
打代码是一天，不打代码也是一天
07-22 261
Less是CSS预处理语言，可以使用变量、嵌套、运算等，便于维护项目CSS样式代码。
从入门到精通Less，详解基本使用技巧！
06-20 240
Less（Leaner Style Sheets 的缩写) 是一门向后兼容的CSS扩展语言。，它扩展了CSS（层叠样式表）的功能并提供了更灵活、更强大的样式定义和管理机制。
CSS Less框架基础教程
09-25
主要为大家介绍了CSS Less框架基础,需要的朋友可以参考下
10分钟学会CSS预处理语言Less
01-08
Less 做为 CSS 的一种形式的扩展，它并没有阉割 ...新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。 //设置变量
五分钟 了解 Less 及使用
最新发布
记录编程学习笔记
08-11 486
less 的路径及使用
LESS全面讲解
qq_51986661的博客
11-25 2395
​ 相信前端开发人员对与CSS（Cascading Style Sheet-级联样式表）这种「面向命名语言」，一定非常熟悉。你可能在某个舍友熟睡的深夜，还在电脑面前被 css 繁重、冗杂的样式，折磨的死去活来。我们曾经面对 css 很多令人发指的不友好特性，也因为 css 的低复用性而刀耕火种。语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，预处理语言
详细介绍less（css预处理语言）
杜永康的博客
03-19 3158
less（css预处理语言）Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
Less的简单介绍、使用、语法
NewHouser的博客
01-30 2442
less是将CSS简单化的工具，并且拥有更强的逻辑性和计算能力在使用Less时，首先需要下载Less插件，下载完成之后，代码写在less文件中，保存之后会自动生成css文件，并将生成的css文件引入网页文件中。
less超详细介绍
WUYOU798的博客
03-28 6292
一、Less介绍 1、官方介绍 Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。 2、自己理解 Less是一门动态CSS语言，使得CSS样式更加灵活地作用于Html标签。试想如果没有Less，我们要对样式做一些逻辑计算的时候只能依靠Js去实现，有了Less之后，可以方便地动态给Html标签设置样式。比如一个最常见的需求，在当前浏览器的宽度小于500px的
Less的入门及使用—变量、嵌套规则、混合、运算、避免编译、继承(附代码演示)
王春燕的博客
04-15 2585
一、less简介 less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展 less的中文官网：
less定义&基本语法
ccc_jj的博客
09-05 1349
9.在less/css中引入另一个文件css文件要使用@import[引入公共文件]less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，以/**/包裹的注释会被编译到css文件中(css和less通用)定义：混合就是将一系列属性从一个规则集引入到另一个规则集的方式。2.作为选择器和属性名：#@{selector的值}的形式。以//开头的注释，不会被编译到css文件中。4.变量的延迟加载(和js的作用域类似)4.带参数并且有默认值的混合。5.带多个参数的混合。
Less入门
baby_hua的专栏
05-08 254
Less入门 CSS预处理器：Less、Sass、stylus，语法思想都类似； 什么是Less Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 Less 可以运行在 Node 或浏览器端。 运行时编译： Less运行在node环境，也提供了原生的js库，在html中引入相应的js即可使用（放在需要编译的less的...
Less 快速入门
imByte的博客
12-08 721
Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。 Less 作为 CSS 的一种形式扩展，并没有减少 CSS 的功能，而是在现有的 CSS 语法上，添加了程序式语言的特性。
Less基础入门操作
世界和我们都不该止步于此
04-13 1249
目录 一.算法的编程化 二.Less嵌套写法 三.&当前选择器 四.Less变量 五.操作Less 1.导入Less文件 2.导入CSS文件到指定目录下 3.禁止导出 我们使用Less可以快速编译生成CSS，我们可以直接在VSCode中下载插件使用： 当然相应的我们需要创建的是一个less文件： 一.算法的编程化 在原始CSS中，我们给元素宽高等等的时候，我们只能给到一个确切的值，使用Less我们可以进行算法： 在我们保存的时候，会发现它会自动的生成一个...
Less 继承
06-02
在 Less 中，我们可以通过 @extend 语法实现样式的继承。具体步骤如下： 1.定义一个基础样式： ``` .base-style { color: red; font-size: 16px; } ``` 2.定义一个继承样式： ``` .extended-style { &:extend...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值