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.rhkb.cn/news/333278.html

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

相关文章

K8S认证|CKA题库+答案| 13. sidecar 代理容器日志

目录 13、使用 sidecar 代理容器日志 CKA v1.29.0模拟系统 下载试用 题目&#xff1a; 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、生成yaml文件 3&#xff09;、官网找模板 4&#xff09;、编辑yaml文件 5&#xff09;、应用yaml文件 ​6&…

H3CNE-8-ARP工作原理

ARP&#xff1a;Address Resolution Protocol 通过目的IP地址请求对方的MAC地址的过程。 数据链路层在进行数据封装时&#xff0c;需要目的MAC地址。 arp -a 查看 arp -d * 清空 主机A发送一个数据包给主机C之前&#xff0c;首先要获取C的MAC地址 数据封装

Day 40 Web容器-Tomcat

Tomcat 一&#xff1a;Tomcat简介 1.简介 ​ Tomcat是Apache软件基金会&#xff08;Apache Software Foundation&#xff09;的Jakarta 项目中的一个核心项目 ​ Tomcat服务器是一个免费的开放源代码的Web应用服务器&#xff0c;属于轻量级应用服务器 ​ Tomcat是WEB容器/WE…

Golang | Leetcode Golang题解之第108题将有序数组转换为二叉搜索树

题目&#xff1a; 题解&#xff1a; func sortedArrayToBST(nums []int) *TreeNode {rand.Seed(time.Now().UnixNano())return helper(nums, 0, len(nums) - 1) }func helper(nums []int, left, right int) *TreeNode {if left > right {return nil}// 选择任意一个中间位置…

诚心分享!主食冻干横向对比:希喂、爱立方、K9等谁最值得入手?

主食冻干到底有必要喂吗&#xff1f;七年铲龄铲屎官告诉你&#xff0c;是真的很有必要喂&#xff01; 这些年随着宠物经济的发展、科学养宠的普及&#xff0c;现在养猫不仅局限在让猫吃饱就行&#xff0c;更多人开始关注到猫的饮食健康。大量的实际喂养案例证明了&#xff0c;传…

冯喜运:5.27黄金短线看震荡,今日黄金原油走势分析

【黄金消息面分析】&#xff1a;黄金作为传统的避险资产&#xff0c;在经济不确定性中扮演着至关重要的角色。近期&#xff0c;国际黄金价格经历了显著的波动。从5月9日的低点2325.19美元/盎司反弹至2340美元/盎司以上&#xff0c;尽管金价曾一度触及2449.89美元/盎司的历史高点…

Baxter机器人摄像头打不开的一个可能的解决办法

操作过程 1.连上机器人 cd ros_ws/ ./baxter.sh2.查看摄像头&#xff08;最多开两个&#xff09; rosrun baxter_tools camera_control.py -l 3.打开指定的摄像头 rosrun baxter_tools camera_control.py -o left_hand_camera -r 1280x800 另&#xff1a;关闭的话 rosrun…

南京“十元手冲咖啡” :流量怎么砸中你?

三包速溶咖啡、一个塑料热水壶&#xff0c;却意外打造出一款爆品。 南京“十元手冲咖啡”突然爆火&#xff0c;起初靠的是出人意料&#xff0c;你以为她要从罐子里擓粉了&#xff0c;她掏出来三条雀巢速溶&#xff1b;你以为她要用机器打水了&#xff0c;她拿出来一个上世纪的…

Docker学习(4):部署web项目

一、部署vue项目 在home目录下创建项目目录 将打包好的vue项目放入该目录下&#xff0c;dist是打包好的vue项目 在项目目录下&#xff0c;编辑default.conf 内容如下&#xff1a; server {listen 80;server_name localhost; # 修改为docker服务宿主机的iplocation / {r…

服务器端口号,如何避免与公共端口冲突

首先&#xff0c;我们需要明确什么是服务器端口号。服务器端口号是计算机操作系统分配给网络应用程序的一个数字标识&#xff0c;用于区分不同的网络服务。每个网络服务都需要一个唯一的端口号来进行标识&#xff0c;以便在通信过程中能够准确找到对应的服务。 为了避免与公共端…

【微积分】Grant Sanderson

梯度&#xff1a;将各个偏导打包 定义&#xff1a;direction of steepest ascent 梯度向量的长度&#xff1a;最速上升方向的陡峭程度 方向导数&#xff1a;偏导的一种拓展 【托马斯微积分学习日记】13.1-线积分_哔哩哔哩_bilibili 概述 16.1line integrals of scalar funct…

2000.1-2022.06.17中国经济政策不确定性指数日度数据

2000.1-2022.06.17中国经济政策不确定性指数数据&#xff08;日度&#xff09; 1、时间&#xff1a;2001.1.1-2022.06.17 2、指标&#xff1a;CNEPU&#xff08;经济政策不确定性指数&#xff09; 3、来源&#xff1a;China Economic Policy Uncertainty Index 4、用途&…

牛客NC164 最长上升子序列(二)【困难 贪心+二分 Java/Go/PHP/C++】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/4af96fa010c44638a7e112abf65f7237 思路 贪心二分 所谓贪心&#xff0c;就是往死里贪&#xff0c;所以对于最大上升子序列&#xff0c;结尾元素越小&#xff0c;越有利于后面接上其他的数&#xff0c;也就可能变…

不用从头训练,通过知识融合创建强大的统一模型

在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;大型语言模型&#xff08;LLMs&#xff09;的开发和训练是一个复杂且成本高昂的过程。数据需求是一个主要问题&#xff0c;因为训练这些模型需要大量的标注数据来保证其准确性和泛化能力&#xff1b;计算资源也是一个…

AI预测福彩3D采取888=3策略+和值012路一缩定乾坤测试5月27日预测第3弹

今天继续基于8883的大底&#xff0c;使用尽可能少的条件进行缩号&#xff0c;同时&#xff0c;今天同样准备两套方案&#xff0c;一套是我自己的条件进行缩号&#xff0c;另外一套是8883的大底结合某位彩友的2码不定位奖号预测二次缩水来杀号。好了&#xff0c;直接上结果吧~ …

P1115 最长子段和

题目描述 给出一个长度为 &#x1d45b;n 的序列 &#x1d44e;a&#xff0c;选出其中连续且非空的一段使得这段和最大。 输入格式 第一行是一个整数&#xff0c;表示序列的长度 &#x1d45b;。 第二行有 &#x1d45b;n 个整数&#xff0c;第 &#x1d456; 个整数表示序列的…

PCL 法向量加权的RANSAC拟合分割平面

目录 一、算法原理1、原理概述2、主要函数二、代码实现三、结果展示四、相关链接本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、算法原理 1、原理概述

【安装】VMware虚拟机安装windows操作系统,VM的相关操作

目录 引出报错&#xff1a;press any key to boot form cd激活调整显示 在VMware上新建虚拟机&#xff0c;并安装Windows1、新建虚拟机2、装载 ISO 镜像3、安装Windows server 20164、开机初始化 虚拟机操作1、虚拟机基本操作2、虚拟机快照3、虚拟机克隆4、VMware Tools 总结 引…

什么是光栅化?

一、 什么是光栅化? 光栅化作用是将几何数据变换后转换为像素呈现在显示设备上的一个过程。几何数据转换为像素&#xff0c; 本质是坐标变换、几何离散化&#xff0c;如下&#xff1a; 其中包含了坐标变换和几何离散化&#xff1a; 二、光栅化完成了什么 3D中&#xff0c;物…

苍穹外卖--sky-take-out(一)

目录 d1 软件开发流程 项目介绍 产品原型 技术选型 前端环境搭建 后端环境搭建 Git版本控制 数据库环境搭建 nginx反向代理和负载均衡 导入接口文档 Swagger 问题 d2 用户登录 代码实现 MD5密码加密 新增员工 需求分析与设计 代码开发 代码完善&#xff08;Threa…