Less的基本语法

less的每一个语句后必须使用";"结束,否则可能无法正确的转换成css

1、导入

即在当前less文件中引用其它less文件,被引入的less文件中的内容可以在此less文件中使用。在引用less文件时可以省略扩展名

@import "global"; // global.less 
@import "comm.less";
@import "index.css";

2、注释

less的注释有两种,

一种为单选注释,以“//”开头,“//”后的内容为注释的内容

//  @import 'comm';

另一种为多行注释,以“/*”开头,以“*/”结束,中间的内容为注释的内容

/* 
@import 'comm.less'; */

3、嵌套

嵌套是指子或后代元素的选择器可以定义在父或祖先元素的选择器中

1)嵌套的使用

<ul><li><a href="#"">链接1</a></li><li><a href="#">链接2</a></li><li><a href="#">链接3</a></li>
</ul>
ul{list-style: none;li{   //后代border:1px solid red;height: 30px;>a{  //子color:#fff;}}
}

以上代码转换成css后为以下代码

ul {list-style: none;
}
ul li {border: 1px solid red;height: 30px;
}
ul li > a {color: #fff;
}

2)引用父或祖先选择名称

在内部使用”&“可以引用外部选择器的名称

li{&:hover{>a{color:blue;}}&-a{color: green;}
}

以上代码转换成css后为以下代码

li:hover >a {color:blue;
}
li-a{color: green;
}

4、扩展

扩展使用:extend关键字,通过扩展可以把一个选择器与其它已存在的选择器组成并集,而它自己定义的样式会单独为一个选择器

div{height: 30px;
}
p:extend(div){whidth:30px;
}

以上代码转换成css后为以下代码

div, p {height: 30px;
}
p {whidth: 30px;
}

5、混合(mixin)

即一个选择器中直接引用另一个选择器的名称,可以把另一个选择器中的样式直接复制过来。但要注意,被引用的选择器只能是类或是id选择器

.div{height: 30px;
}
p{.div();width:30px;
}

以上代码转换成css后为以下代码

.div{height: 30px;
}
p {height: 30px;width: 30px;
}

6、声明变量

变量的声明和使用有以下几个特点

1)变量名总是以@开头,定义的变量要以在整个less文件任意地方使用,

2)如果在引用时需要与其它内容拼接,则需要使用@{变量名}的语法来引用。

3)变量可以进行算术运算。

4)如果变量的值本身包含特殊符号,如空格等,可以使用引号括起来。但前面在加上”~“

@width: 10px;
@height: @width + 10px;
@a: acitve;
@color: fff;
@border : ~'1px solid #000';ul{.@{a}{height: @height;line-height: @height;width: @width * 2;color: '#@{color}';border: @border;}
}

以上代码转换成css后为以下代码

ul .acitve {height: 20px;line-height: 20px;width: 20px;color: '#fff';border: 1px solid #000;
}

7、变量作用域

变量可以less文件中定义,这种变量称为全局变量,也可以在一个选择器中定义,这种变量称为局部变量。全局变量可以在整个less文件中使用,但局部变量只能在当前选择器中使用。当全局变量和局部变量重名时,按照就近原则会使用局部变量。在变量的作用域中,变量的声明和使用的顺序没有关系。可以先声明变量再使用,也可以先使用再声明变量

@var : 10px;
.header{height: @var;	@var :20px;img{height: @var;}
}

以上代码转换成css后为以下代码

.header {height: 20px;
}
.header img {height: 20px;
}

8、函数

函数可以通过传入参数,生成不同的结果,参数名与变量的命名规则相同,如果要设置默认值,可以在变量名后使用”:“来定义。函数名只能以”.“或是”#“开头

.fun(@w,@h : 20px,@c){height: @h;line-height: @h;width: @w;border :1px solid @c;
}.@{a}{.fun(10px,20px, #000);
}

以上代码转换成css后为以下代码

.acitve {height: 20px;line-height: 20px;width: 10px;border: 1px solid #000;
}

9、条件结构

函数可以使用when 关键字指定是否执行,如果when的结果为true,函数会被执行,如果为false,函数将不会被执行。

示例

函数名(参数) when (条件表达式)

示例

/* 当参数@load的值为true时,函数才会被执行 */
.fun(@height,@load) when (@load = true){height : @height;line-height : @height;
}.active{width : 100%;.fun(30px,true); /* 执行函数生成代码 */
}

注意:

1)when与小括号之间必须有空格

2)when后可以执行条件比较,如等于(=)、大于(>)、小于(<)、大于等于(>=)、小于等于(<=)

/* 当@height大于等于30时,执行函数 */
.fun(@height) when ((@height >= 30px){ height : @height;line-height:@height
}.active{width:50px;.fun(30px);
}

3)多个括号之间可以使用and(并且)、or(或者)来组合多个条件,也可以使用","(或者)来组合多个条件

/* 当@height大于20 并且 小于 40时,执行函数 */
.fun(@height , @center) when (@height > 20px) and (@height < 40px) {height : @height;line-height:@height
}.active{width:50px;.fun(30px);
}

4)当and和or同进使用时,and的优先级比or高,可以使用括号来提升优先级

/* 当@center为true时,或者@height大于20 并且 小于 4时,执行函数 */
.fun(@height , @center) when (@center = true) , ((@height > 20px) and (@height < 40px)){height : @height;line-height:@height
}.active{width:50px;.fun(30px);
}

5)可以使用not来表示非。

/* 当@height不等于20时,执行函数 */
.fun(@height) when not (@height = 20px){height : @height;line-height:@height
}.active{width:50px;.fun(10px);
}

10、循环

less本身没有专门的循环结构,但可以使用条件结构来实现,即在函数中调用自己,并在函数中改变when的值,直到条件不成立。结束函数的执行。这种结构相当于递归。

示例

.fun(@i) when (@i  <= 4){  width: @i;.fun(@i + 1); /*每次加1再传到函数,当传的值大于4的时候函数结束*/}.active{width:50px;.fun(1);
}

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

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

相关文章

ESM蛋白质语言模型系列

模型总览 第一篇《Biological structure and function emerge from scaling unsupervised learning to 250 million protein sequences 》ESM-1b 第二篇《MSA Transformer》在ESM-1b的基础上作出改进&#xff0c;将模型的输入从单一蛋白质序列改为MSA矩阵&#xff0c;并在Tran…

使用设计模式基于easypoi优雅的设计通用excel导入功能

文章目录 概要整体架构流程代码设计配置类通用API分发器处理器业务逻辑处理service接口策略模型 小结 概要 基于java原生 easypoi结合适配器模式、策略模式、工厂模式设计一个通用的excel导入框架 整体架构流程 代码设计 由上到下&#xff0c;分别讲解代码 配置类 ExcelCon…

Go学习第十六章——Gin文件上传与下载

Go web框架——Gin文件上传与下载 1. 文件上传1.1 入门案例&#xff08;单文件&#xff09;1.2 服务端保存文件的几种方式SaveUploadedFileCreateCopy 1.3 读取上传的文件1.4 多文件上传 2. 文件下载2.1 快速入门2.2 前后端模式下的文件下载2.3 中文乱码问题 1. 文件上传 1.1 …

计算机毕业设计选题推荐-周边美食推荐微信小程序/安卓APP-项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

kafka3.X基本概念和使用

kafka基本概念和使用 文章目录 kafka基本概念和使用 kafka的概念基本概念Kafka的使用 首先kafka的安装kafka的简单实用和理解搭建集群&#xff08;3个节点&#xff09;windows版本环境搭建 本文"kafka的概念"部分是在[初谈Kafka][ https://juejin.im/post/5a8e7f…

VulnHub DC-1

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏…

微信小程序 - 页面继承(非完美解决方案)

微信小程序 - 面页继承&#xff08;非完美解决方案&#xff09; 废话思路首页 indexindex.jsindex.jsonindex.wxml 父页面 page-basepage-base.jspage-base.wxml 子页面 page-apage-a.jspage-a.wxml 子页面 page-bpage-b.jspage-b.wxml 其它app.jsapp.jsonapp.wxss 参考资料 废…

BI是什么?想要了解BI需要从哪些方面入手?

企业为了执行数字化战略&#xff0c;实行数字化转型&#xff0c;实现数据价值&#xff0c;除了需要相关数字化技术及理念、人才等&#xff0c;还需要借助数字化相关应用&#xff0c;例如商业世界中广受企业欢迎的ERP、OA、CRM等业务信息系统&#xff0c;以及上升势头非常迅猛的…

【STM32】STM32中断体系

一、STM32的NVIC和起始代码中的ISP 1.NVIC(嵌套向量中断控制器) (1)数据手册中相关部分浏览 (2)地址映射时0地址映射到Flash或SRAM (3)中断向量表可以被人为重新映射&#xff0c;一般用来IAP中 (4)STM32采用一维的中断向量表 (5)中断优先级设置有点复杂&#xff0c;后面细说 1…

Redis之Lua脚本讲解

这里写自定义目录标题 1 Lua1.1 简介1.1.1 注释1.1.2 变量1.1.3 数据类型1.1.4 控制结构1.1.5 函数1.1.6 模块1.1.7 字符串操作1.1.8 错误处理1.1.9 标准库 1.2 Redis和Lua脚本结合优点1.3 Lua脚本应用和调试1.3.1 缓存更新1.3.2 原子操作1.3.3 数据处理1.3.4 分布式锁1.3.5 Re…

fio performance test

fio参数解释 可以使用fio -help查看每个参数&#xff0c;具体的参数左右可以在官网查看how to文档&#xff0c;如下为几个常见的参数描述 filename/dev/emcpowerb 支持文件系统或者裸设备&#xff0c;-filename/dev/sda2或-filename/dev/sdb 或 -filename/dev/nvme0n1direct…

【排序算法】 归并排序详解!分治思想!

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; 算法—排序篇 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言&#x1f324;️归并排序的思想☁️基本思想☁️归并的思想实现☁️分治法 &#x1f3…

IOC课程整理-20 Spring 应用上下文生命周期

0.目录 1. Spring 应用上下文启动准备阶段 2. BeanFactory 创建阶段 3. BeanFactory 准备阶段 4. BeanFactory 后置处理阶段 5. BeanFactory 注册 BeanPostProcessor 阶段 6. 初始化內建 Bean&#xff1a;MessageSource 7. 初始化內建 Bean&#xff1a;Spring 事件广播器…

计算机毕业设计选题推荐-戏曲文化苑微信小程序/安卓APP-项目实战

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

Springboot 使用JavaMailSender发送邮件 + Excel附件

目录 1.生成Excel表格 1.依赖设置 2.代码&#xff1a; 2.邮件发送 1.邮件发送功能实现-带附件 2.踩过的坑 1.附件名中文乱码问题 3.参考文章&#xff1a; 需求描述&#xff1a;项目审批完毕后&#xff0c;需要发送邮件通知相关人员&#xff0c;并且要附带数据库表生成的…

Linux C/C++ 实现网络流量分析(性能工具)

网络流量分析的原理基于对数据包的捕获、解析和统计分析&#xff0c;通过对网络流量的细致观察和分析&#xff0c;帮助管理员了解和优化网络的性能、提高网络安全性&#xff0c;并快速排查和解决网络故障和问题。 Linux中的网络流量常见类型 在Linux中&#xff0c;网络流量可以…

校园物业报修小程序开发笔记一

背景 校园规模和复杂性&#xff1a; 大型学校和校园通常拥有众多的建筑物、设施和设备&#xff0c;需要有效的维护和报修系统&#xff0c;以满足学生、教职员工和校园管理人员的需求。 学生和员工需求&#xff1a; 学生和员工在校园内可能遇到各种维修问题&#xff0c;如故障的…

ESP8266,手机与电脑之间的TCP通讯

电脑端运行通讯猫调试助手,作为服务端: 电脑端 电脑的IP地址是: 192.168.2.232 手机与电脑之间的TCP通讯 手机端运行网络调试精灵,作为客户端: 手机端 如果从手机端点击"发送"按钮,则也会将"ghhh东方红广场"几个字发送到电脑上(服务端). ESP8266作为客户…

53.MongoDB分片集群高级集群架构详解

MongoDB分片集群架构详解 为什么要使用分片 分片&#xff08;shard&#xff09;是指在将数据进行水平切分之后&#xff0c;将其存储到多个不同的服务器节点上的一种扩展方式。 一个复制集能承载的容量和负载是有限的&#xff0c;遇到以下场景就需要考虑使用分片 存储容量需…

elasticsearch一些重要的配置参数

先看一下官网给我们提供的全部的参数配置项 官网地址 官方文档链接&#xff1a;注意版本是8.1Configuring Elasticsearch | Elasticsearch Guide [8.1] | Elastic​编辑https://www.elastic.co/guide/en/elasticsearch/reference/current/settings.html 重要&#xff08;基本…