Less语言

news2025/1/11 15:05:13

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.coloradmin.cn/o/1686619.html

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

相关文章

2024中青杯A题数学建模成品文章数据代码分享

人工智能视域下养老辅助系统的构建 摘要 随着全球人口老龄化的加剧&#xff0c;养老问题已经成为一个世界性的社会问题&#xff0c;对社会各个方面产生了深远影响&#xff0c;包括劳动力市场、医疗保健和养老金制度等。人口结构变化对养老服务的质量和覆盖面提出了更高要求。特…

go-zero 实战(3)

引入 Redis 在之前的 user 微服务中引入 redis。 1. 修改 user/internal/config/config.go package configimport ("github.com/zeromicro/go-zero/core/stores/cache""github.com/zeromicro/go-zero/zrpc" )type Config struct {zrpc.RpcServerConfMys…

SAP PRD覆盖QAS 替代方案构想

随着时间的推移&#xff0c;SAP PRD的数据跟QAS的差异会越来越大&#xff0c;一般是定期PRD覆盖QAS。但是在没有BASIS的情况下&#xff0c;没有这块经验的情况下&#xff0c;也没有外部支持的情况下&#xff0c;贸然做这个事情也是有风险的&#xff0c;有没有替代方案&#xff…

【ArcGIS微课1000例】0112:沿线(面)按距离或百分比生成点

文章目录 一、沿线生成点工具介绍二、线状案例三、面状案例一、沿线生成点工具介绍 位置:工具箱→数据管理工具→采样→沿线生成点 摘要:沿线或面以固定间隔或百分比创建点要素。 用法:输入要素的属性将保留在输出要素类中。向输出要素类添加新字段 ORIG_FID,并设置为输…

地理信息系统(GIS)软件开发

地理信息系统&#xff08;GIS&#xff09;软件开发是一项复杂且系统性很强的工程&#xff0c;涉及空间数据的采集、管理、分析和展示。以下是一个典型的GIS软件开发流程&#xff0c;包括各个步骤的详细说明。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#…

K8S二进制安装与部署

一、安装部署步骤 1.1 初始化配置 1.2 所有 node 节点部署docker引擎 1.3 准备cfssl证书生成工具 1.4 生成Etcd证书 1.5 部署 Master 组件 1.6 部署 Worker Node 组件 1.7 部署 CNI 网络组件-部署 flannel 1.8 部署 CoreDNS 1.9 master02 节点部署 1.10 负载均衡部署…

dll文件是什么?电脑丢失某个dll文件有什么解决办法

Dll文件是什么&#xff1f;这个文件在电脑中是什么样的地位&#xff1f;如果电脑提示丢失了某个dll文件那么有什么办的解决这个问题呢&#xff1f;如何将丢失的dll文件进行修复呢&#xff1f;今天这篇文章将按就来教大家几种修复丢失dll文件问题的方法。 DLL 文件&#xff0c;全…

【永洪BI】超链接

1. 概述 1.1 功能简介 超链接&#xff0c;是将不同内容进行连接的元素&#xff0c;可以在表、图表、文本等组件上设置超链接&#xff0c;在预览时可以查看超链接效果。 产品内的超链接包括&#xff1a;链接到报告、链接到指定网址、导出、刷新、数据。 1.2 应用场景 想要从…

【Python】 如何使用逗号作为千位分隔符打印数字

基本原理 在Python中&#xff0c;打印数字时自动添加千位分隔符可以提高数字的可读性&#xff0c;尤其是在处理大数字时。Python提供了多种方法来实现这一功能&#xff0c;包括使用内置的format()函数、f-string&#xff08;格式化字符串字面量&#xff09;以及locale模块。 …

AI绘图副业创收,热门擦边变现赛道怎么玩?网友:瑟瑟才是人类前进的动力!

大家好&#xff0c;我是设计师阿威 今天给大家介绍一个用 AI 搞擦边的变现赛道 而且可以说是0 成本变现的 现在真的越来越多的人都想 0 成本变现&#xff0c;那么 0 成本到底能不能变现&#xff0c;变现的上下限又是多少&#xff1f; 今天这个案例就可以很好的进行说明 可以…

K8S认证|CKA题库+答案| 5. 创建 Ingress

5 . 创建 Ingress 您必须在以下Cluster/Node上完成此考题&#xff1a; Cluster Master node Worker node k8s master …

python从0开始学习(九)

前言 上一篇文章我们介绍了python中的序列类型和元组类型&#xff0c;本篇文章将接着往下将。 1、字典类型 字典类型是根据一个信息查找另一个信息的方式所构成的“键值对”&#xff0c;它表示索引用的键和对应的值构成的成对关系。它是一个可变数据类型&#xff0c;也就是说它…

Cython学习笔记和例程

Chapter2 &#xff1a;Compiling and Running Cython Code 编译运行Cython代码有好几种方式&#xff0c;没有必要全部掌握&#xff0c;可以根据需要选择合适的方式。这里例举了3种常见方式&#xff0c;基本也够用了。一般方法3创建setup.py是最基础的&#xff0c;自由度也最高…

java+Angular+Nginx+原生HTML+JS+CSS+Jquery融合B/S版电子病历系统云HIS系统源码

javaAngularNginx原生HTMLJSCSSJquery融合B/S版电子病历系统云HIS系统源码 Java版云HIS系统融合电子病历系统&#xff0c;是医学专用软件。医院通过电子病历以电子化方式记录患者就诊的信息&#xff0c;包括&#xff1a;首页、病程记录、检查检验结果、医嘱、手术记录、护理记录…

新手第一次做抖店,应该注意什么?知道这些技巧让你更快拿到结果

大家好&#xff0c;我是电商花花。 新手第一次刚开始接触抖音小店&#xff0c;都会担心自己做不好&#xff0c;操作不到位的想法&#xff0c;怕自己做店长时间不出单。 其实做店担心不出单是很正常的&#xff0c;但是只要我们掌握正确的做店方法和技巧也能很快就做好抖音小店…

文件包含漏洞--pikachu靶场

目录 文件包含 文件包含函数 文件包含漏洞原理 文件包含的分类 LFI-本地文件包含 RFI-远程文件包含 基于pikachu靶场练习 本地文件包含 远程文件包含 防御 文件包含 文件包含是程序员将需要重复调用的函数写入一个文件&#xff0c;对该文件包含时的操作&#xff0c;如…

从容应对亿级QPS访问,Redis还缺少什么?no.29

众所周知&#xff0c;Redis 在线上实际运行时&#xff0c;面对海量数据、高并发访问&#xff0c;会遇到不少问题&#xff0c;需要进行针对性扩展及优化。本课时&#xff0c;我会结合微博在使用 Redis 中遇到的问题&#xff0c;来分析如何在生产环境下对 Redis 进行扩展改造&…

基于yolov8+flask搭建一个web版本的网页模型预测系统

测试环境&#xff1a; anaconda3python3.8 torch1.9.0cu111 ultralytics8.2.2 首先我们将训练好的权重放在weights目录下面 并将名字改成yolov8n.pt&#xff0c;如果不想改可以在代码app.py都把路径改过来即可。然后我们打开 python app.py之后看到 我们点击选择文件支持图…

K8s 二进制部署---下篇(多master节点 负载均衡 高可用)

一 master02 节点部署 master01192.168.11.5kube-apiserver&#xff0c;kube-controller-manager&#xff0c;kube-scheduler&#xff0c;etcdmaster02192.168.11.12kube-apiserver&#xff0c;kube-controller-manager&#xff0c;kube-scheduler&#xff0c;etcdnode01192.1…

Matomo用户行为分析 - 功能篇

在上一篇文章《Matomo用户行为分析 - 安装篇》中我们介绍了分析工具的作用、Saas平台和开源项目的优缺点、Matomo的部署和基本安装使用&#xff0c;让我们对分析工具有个大致的了解&#xff0c;那么本章我们将对Matomo的常见功能进行详细介绍。 常见功能 平台的基本分析能力很…