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;值分别是用户选项和输…

[前端] 爷孙组件隔代组件的通信 (笔记,持续更新)

参考文献 记一次爷孙组件隔代组件的通信之emit与on

热点不等人!运营必须掌握的4大技巧

作为运营&#xff0c;抓住热点是吸引读者关注和增加曝光率的有效手段。但是&#xff0c;你知道怎么样才能更好地追热点吗&#xff1f; 今天&#xff0c;就分享四个追热点的技巧&#xff0c;帮助你更好地利用热点话题来提高账号热度。 1、短期内求快 对于运营者来说&#xff…

数据集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…

Cocos Creator 声音播放与管理详解

Cocos Creator 是一款非常流行的游戏开发引擎&#xff0c;它提供了丰富的功能和工具&#xff0c;让开发者可以轻松构建出高质量的游戏。在游戏开发中&#xff0c;声音是一个非常重要的元素&#xff0c;可以为游戏增添氛围和趣味性。在本文中&#xff0c;我们将详细介绍Cocos Cr…

React hooks - useState

useState 用法特点注意事项 在hooks出现之前&#xff0c;react的函数式组件也叫做无状态组件&#xff08;函数里面无法创建属于自己的状态&#xff0c;只能使用props接收&#xff09; 用法 一个管理状态的 hooks&#xff0c;能让函数组件拥有自己的状态&#xff0c;实现状态的…

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;普及速度…

京东商品API接口:电商数据自动化的钥匙

在电子商务的蓬勃发展中&#xff0c;京东作为中国领先的电商平台之一&#xff0c;提供了丰富的API接口&#xff0c;使得开发者能够访问和利用其庞大的商品数据。京东商品API接口不仅为商家提供了便捷的商品管理工具&#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;该模型可输入八…

使用selenium实现网页的自动化登录

1.jdk版本&#xff08;jdk11&#xff09; 2.检查->元素->查看输入框Id 3.代码 import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.edge.EdgeDriver; import org.openqa.selen…

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

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

untiy tmp textmeshPro text 代码设置对齐方式

TipText.alignment TextAlignmentOptions.Left;

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…