Less语言

Less是一门预编译语言,它扩展了CSS语言,增加了变量、Mixin、函数等特性,使CSS更易维护和扩展
Less也扩充了CSS语言,增加了诸如变量、混合运算、函数等功能。Less既可以运行在服务端(Node.js和Rhino平台)也可以运行在客户端(浏览器)

VSCODE可以使用Easy LESS插件(将less文件在编译后生成css文件)
在这里插入图片描述

Less的使用

注释

//这种注释,在编译后不会出现在CSS文件上
/*这种注释在编译后会出现在CSS文件上*/

使用Easy LESS的情况下,编译less文件会生成对应的.css文件,在普通html文件中引用时,引用生成的.css文件
在这里插入图片描述

Less变量

//使用值变量定义公共样式(便于统一修改样式)
@color:#999;
@bgcolor:skyblue;
@width:50%;
#wrap{
color:@color;
background-color:@bgcolor;
width:@width;
}

在这里插入图片描述

1.选择器变量

在这里插入图片描述
在这里插入图片描述

2.属性变量

在这里插入图片描述

3.url变量

在这里插入图片描述

4.声明变量

在这里插入图片描述

5.变量运算

在这里插入图片描述

6.变量作用域

跟js中变量的就近原则是一样的
在这里插入图片描述

7.用变量去定义变量

在这里插入图片描述

Less嵌套

&和嵌套的妙用
<body><div class="center"><ul id="list"><li>1</li><li>2</li><li>3</li></ul></div></body>

在这里插入图片描述

媒体查询

在这里插入图片描述

混合方法

1.无参数方法

在这里插入图片描述

2.默认参数方法

Less可以使用默认参数,如果没有传参数,也将使用默认参数
@arguments犹如js中的arguments指代的是全部参数
传的参数中必须带着单位
在这里插入图片描述

3.方法的匹配模式

匹配匹配程度最高的函数,同时匹配参数全是变量的函数
在这里插入图片描述

4.方法的命名空间

在这里插入图片描述

5.方法的条件筛选

less中没有if-else,但是有一个when方法
在这里插入图片描述
要点:
1.比较运算符:>、>=、=、<=、<
2.=代表的是等于
3.除去关键字true以外的值都被视为false

6.数量不定的参数

在这里插入图片描述

7.方法使用important!

在这里插入图片描述

8.循环方法

在这里插入图片描述

9.属性拼接方法

拼接的过程中+代表,
+_代表空格
在这里插入图片描述

10.实战技巧

在这里插入图片描述

继承

1.extend关键字的使用

extend是Less的一个伪类,它可以继承所匹配声明中的全部样式
在这里插入图片描述

2.all全局搜索替换

在这里插入图片描述

3.减少代码的重复性

从表面上看,extend与方法最大的差别是extend是同个选择器共用一个声明,而方法是使用自己的声明,这无疑增加了代码的重复性

导入

直接导入

在less文件中可以导入其他的less文件

@import "nav.less";
reference

Less中最强大的特性,使用引入的Less文件,但不会编译它

@import (reference) "nav.less"
once

@import语句的默认行为。这表明相同的文件只会被导入一次,而随后导入的文件的重复的代码都不会解析

@import (once) “foo.less”
multiple

导入多个同名文件,重复生成样式

@import (multiple) "foo.less"
@import (multiple) "foo.less"

条件表达式

类型检测函数

1.检测值的类型
2.iscolor
3.isnumber
4.isstring
5.iskeyword
6.isurl

单位检测函数

1.检测一个值除了数字是否是一个特定的单位
2.ispixel
3.ispercentage
4.isem
5.isunit

函数

函数库

less中封装了非常多的函数库,例如颜色定义,颜色操作,颜色混合,字符串处理等等
less函数手册

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/16789.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端面试项目细节重难点(已工作|做分享)

面试官提问&#xff1a;需求场景&#xff1a;页面上有一个单选框&#xff0c;有是否两个选项&#xff1a;当用户选择是&#xff0c;出现一个输入框&#xff0c;用户可以输入内容&#xff0c;给后端的保存接口传入参数radio和content这两个字段&#xff0c;值分别是用户选项和输…

数据集005:螺丝螺母目标检测数据集(含数据集下载链接)

数据集简介 背景干净的目标检测数据集。 里面仅仅包含螺丝和螺母两种类别的目标&#xff0c;背景为干净的培养皿。图片数量约420张&#xff0c;train.txt 文件描述每个图片中的目标&#xff0c;label_list 文件描述类别 另附一个验证集合&#xff0c;有10张图片&#xff0c;e…

【二分查找 位运算】3145. 大数组元素的乘积

本文涉及知识点 二分查找算法合集 位运算、状态压缩、枚举子集汇总 LeetCode3145. 大数组元素的乘积 一个整数 x 的 强数组 指的是满足和为 x 的二的幂的最短有序数组。比方说&#xff0c;11 的强数组为 [1, 2, 8] 。 我们将每一个正整数 i &#xff08;即1&#xff0c;2&am…

Lookin高效调试iOS App的UI

Lookin是一款iOS开发时常用的调试软件&#xff0c;由腾讯微信读书团队QMUI开发。 它可以查看和修改iOS App里的UI对象的软件&#xff0c;展示App UI图层&#xff0c;类似于Xcode自带的UI Inspector工具&#xff0c;或另一款叫做Reveal的软件。 此外&#xff0c;虽然Lookin主体…

内存泄漏案例分享4-异步任务流内存泄漏

案例4——异步任务内存泄漏 异步任务&#xff0c;代指起子线程异步完成一些数据操作、网络接口请求等&#xff0c;通常会使用以下API&#xff1a; Runnbale&#xff0c;Thread,线程池RxJavaHandlerThread 而这些异步任务很有可能操作内存泄漏&#xff0c;下面我们以Rxjava为…

【实战JVM】-基础篇-02-类的声明周期-加载器

【实战JVM】-基础篇-02-类的声明周期-加载器 3 类的生命周期3.1 生命周期的概述3.2 加载阶段3.2.1 查看内存中的对象 3.3 连接阶段3.3.1 验证阶段3.3.1.1 验证是否符合jvm规范3.3.1.2 元信息验证3.3.1.3 验证语义3.3.1.4 符号引用验证 3.3.2 准备阶段3.3.3 解析阶段 3.4 初始化…

使用OpenCV计算滑块缺口(2)

上一篇 openCV 计算滑块缺口&#xff0c;执行可能出现问题&#xff0c;这一篇文章&#xff0c;是上一版本的补充&#xff08;https://blog.csdn.net/weixin_42883164/article/details/137604965&#xff09; 实现计算滑块缺口的步骤&#xff1a; 接口部分参照上述文章&#xf…

创新营销之路:探索订单排队模式的无限可能

随着市场竞争的日益激烈&#xff0c;企业家们都在寻找新的营销策略来脱颖而出。在这里&#xff0c;我想向大家介绍一种充满活力和创新性的营销新模式——订单排队模式。它不仅能够有效提升用户黏性&#xff0c;还能为企业带来持续的增长动力。 一、订单排队模式的魅力 订单排队…

为什么建议大家加快拥抱Kotlin,说点不一样的

本文首发于公众号“AntDream”&#xff0c;欢迎微信搜索“AntDream”或扫描文章底部二维码关注&#xff0c;和我一起每天进步一点点 Kotlin自2017年起被Google正式宣布为Android的编程语言之一&#xff0c;随后在2019年进一步宣布Kotlin为Android的首选语言&#xff0c;普及速度…

上下文视觉提示实现zero-shot分割检测及多visual-prompt改造

文章目录 一、Closed-Set VS Open-set二、DINOv2.1 论文和代码2.2 内容2.3 安装部署2.4 使用效果 三、多visual prompt 改造3.1 获取示例图mask3.2 修改函数参数3.3 推理代码3.4 效果的提升&#xff01; 四、总结 本文主要介绍visual prompt模型DINOv&#xff0c;该模型可输入八…

深度解析:医院管理全面数字化转型的技术实现与优势

随着科技的飞速发展&#xff0c;信息技术的应用已经渗透到社会的各个角落&#xff0c;医疗行业作为关乎人民群众生命健康的重要领域&#xff0c;更是急需借助科技的力量实现转型升级。在这样的时代背景下&#xff0c;全面数字化转型成为了医院管理创新的必由之路。 北京XXX医院…

linux下宝塔负载100%解决方法

今天发现服务器宝塔面板负载居然是100% 但是cpu 和内存其实并不高 通过命令查看主机 uptime 中load average 居然高达18.23 看来负载是真的高了 通过vmstat 看看具体问题 procs&#xff1a; ​ r 表示运行和等待CPU时间片的进程数&#xff0c;这个值如果长期大于系统CPU个数…

Pytorch深度学习实践笔记9(b站刘二大人)

&#x1f3ac;个人简介&#xff1a;一个全栈工程师的升级之路&#xff01; &#x1f4cb;个人专栏&#xff1a;pytorch深度学习 &#x1f380;CSDN主页 发狂的小花 &#x1f304;人生秘诀&#xff1a;学习的本质就是极致重复! 《PyTorch深度学习实践》完结合集_哔哩哔哩_bilibi…

【一竞技CS2】YaLLa 2024邀请TheMongolz和BB

1、近日YaLLa Compass 2024主办方已宣布了最后两支受邀参赛的队伍是TheMongolz和BB两支战队,赛事将于6月5日至9日间在阿联酋阿布扎比的Space 42 Arena举行,总奖金为40万美元。 值得一说的是本次赛事的12支参赛队伍中,Cloud9和FURIA尚未确定参赛阵容。在arT离队后,FURIA让青训队…

LaTex安装及配置(Windows)

LaTex安装及配置&#xff08;Windows&#xff09; 安装环境安装texlive下载texlive安装 编辑器安装texstudio下载texstudio安装 环境配置 使用第一个LaTex文档新建文件编程查看results 安装 环境安装 texlive下载 镜像清华源下载地址&#xff1a;https://mirrors.tuna.tsing…

Java通过Html(ftl模板)生成PDF实战, 可支持商用

Java通过Html(freemarker模板)生成PDF实战, 可支持商用 技术架构 springboot freemarker [pdfbox] flying-saucer-pdf 生成流程&#xff1a; freemarker: 根据数据填充ftl模板文件&#xff0c;得到包含有效数据的html文件&#xff08;包含页眉页脚页码的处理&#xff0c…

InteractiveGraph图谱中vue项目中如何使用

InteractiveGraph图谱中vue项目中如何使用 一、下载js和css和字体二、vue2.0项目中引用三、grap组件 一、下载js和css和字体 //在这里面找 https://github.com/grapheco/InteractiveGraph/blob/master/dist/examples/example1.html二、vue2.0项目中引用 //main.js中全局引入$ …

导入 FDTD 仿真的 S 参数到 INTERCONNECT 的器件中

导入 FDTD 仿真的 S 参数到 INTERCONNECT 的器件中 正文正文 很多时候,仿真链路比较大时,我们可以将仿真的每个部分分隔开来,用 FDTD 计算出每一部分的 S 参数,然后将这些 S 参数导入 INTERCONNECT 中得到最终的仿真结果。这里我们来介绍一下这种方法。 首先,我们从右侧…

Linux系统安装AMH服务器管理面板并实现远程访问管理维护

目录 前言 1. Linux 安装AMH 面板 2. 本地访问AMH 面板 3. Linux安装Cpolar 4. 配置AMH面板公网地址 5. 远程访问AMH面板 6. 固定AMH面板公网地址 1. 部署Docker Registry 2. 本地测试推送镜像 3. Linux 安装cpolar 4. 配置Docker Registry公网访问地址 5. 公网远程…

【链表】Leetcode 92. 反转链表 II【中等】

反转链表 II 给你单链表的头指针 head 和两个整数 left 和 right &#xff0c;其中 left < right 请你反转从位置 left 到位置 right 的链表节点&#xff0c;返回 反转后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], left 2, right 4 输出&#x…