Less语言笔记

最新推荐文章于 2024-09-13 23:36:48 发布
最新推荐文章于 2024-09-13 23:36:48 发布
阅读量45 收藏
点赞数
文章标签： less 笔记 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73107280/article/details/131829087
版权
Less是一种CSS预处理器，它引入了变量、嵌套规则、函数等特性，简化了CSS的编写，减少了冗余。Less文件通过编译生成CSS，支持注释、分层、变量和混合（函数）等功能，提高了样式表的可维护性和复用性。
摘要由CSDN通过智能技术生成

Less是什么

在开发的过程中，会有很多选择器的层级和相同的内容这样会显得CSS文件写的样式会显得很冗余，于是就有了Less，Less是为了简化CSS的书写形式而诞生的一种语言,但是Less文件最终也会产生CSS文件，Less也能写CSS

Less基本操作

Less语法的内容有点像编程语言的基本语法，因此这样就会比较容易学习，在学习的过程中多与编程语言进行对比着来看

下面给个最基本的格式，这里是在js标签下使用，vscode也有插件，还有一些软件（Koala）可以编译，但是不管是插件也好，js也好，本质都是为了产生CSS文件，进而使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title></title>
		<style type="text/less">
			/*这里就写less语法*/
		</style>
	</head>
	<body></body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.3/less.min.js"></script>

Less分层

Less文件

#main {
	width: 30px;
	height: 90px;
	color: red;
	.son { //这和符合标签的双标签书写形式，标签里面可以套标签，样式也可以套样式，这样这里的.son也就相当于是#main下面的
		width: 30px;
		height: 30px;
		background-color: blue;
	}
}

编译后的CSS文件

#main {
	width: 30px;
	height: 90px;
	color: red;
}
#main .son {
	width: 30px;
	height: 30px;
	background-color: blue;
}

可以看出在Less分层里面写的默认是在指父子关系，但是有一类伪类选择器，例如hover

 #main {
 	width:30px;
	height: 90px;
	&:hover { //例如&指代前面一层的选择器，然后后面跟要的伪类选择器，这样就灵活了很多
		width: 40px;
	}
	&>div { //这是代表最近一层的子元素的样式
		background: color;
	}
 }

Less注释

Less的注释和编程语言JavaScript和CSS是一样的，用/**/表示多行注释，//表示行内注释

Less变量

有了变量也可以简化很多的事情，变量可以装入指定的内容，然后进行操作

  1. 变量的声明
格式：
@变量名:值
  1. 变量的使用
格式：
@变量名，这是CSS普通值使用变量的情况下
@{变量名}，这是CSS属性名和选择器名使用变量的情况下（需要在变量名两边加个花括号）

Less函数

在CSS中有很多重复的样式是多余的，在编程语言中，可以利用函数去多次重复调用代码块，在Less中也有类似函数的使用，在Less中的函数叫做混合

  1. 不带参数的混合（函数）

    	#fun(){ //这里的函数名要写成选择器的样子，一般写成类选择器和ID选择器
		width:200px;
		height:200px;
		background: blue;	
	}
	.dm {
		#fun()
	}
	.dm1 {
		#fun()
	}

  2. 带参数的混合(函数)

	#argfun(@width,@height,@color){ //这里完全可以和JavaScript里面的函数理解，形参
		width:@width;
		height:@height;
		background: @color;
	}
	.dm {
		#argfun(200px,200px,blue) //实参传入
	}
	.dm1 {
		#argfun(100px,200px,red)
	}
	.dm2 {
		#argfun(@height:200,@width:100px;@color:red) //指定参数名传值，如果不指定就是按照形参的顺序进行传入
	}
  1. 默认值参数的混合（函数）
#normalFun(r,@w,@h){ //这里写个r是用来做标示的,类似flag
	height: @h;
	width: @w;
	background: red;
}
#normalFun(b,@w,@h){ //这里填个b也用来做标示的，类似flag
	height: @h;
	width: @w;
	background: blue;
}
.dm {
	#normalFun(r,200px,200px); //传入标示r
}
.dm1 {
	#normalFun(b,100px,200px); //传入标示b
}

4.多个参数的传值

 .fun(@1,@2,@3){
	border: @arguments; //就是把传进的参数全部放这里
	border: @1 @2 @3; //这个效果和上面这个效果一样
}
.dm {
 	width: 200px;
 	height: 200px;
 	.fun(1px,solid,red);
}

Less模块

在编程语言中可以通过模块的形式扩展自己的包，在Less里面也可以导入指定的Less文件，然后使用Less文件里面的变量和混合（函数）

//在index.less文件下的内容
#argfun(@width:200px,@height,@color){ //定义一个函数(混合)
    width:@width;
    height:@height;
    background: @color;
}
@color:green; //定义一个变量

	//主文件less下的内容
	@import "./index.less";
	.dm {
		#argfun(200px,200px,@color); //利用导入进来的函数和变量
	}
	.dm1 {
		#argfun(100px,200px,red);
	}

Less运算

在CSS中，值是不支持直接运算的，但是在Less中，CSS属性的值是支持直接运算的

.render(){
	background: red;
}
.dm {
	width: 100px+50px;//在less中，不仅仅是可以加还可以乘和除，减
	height: 150+50%;//相加的数字中,必须要有一个数字是带单位的,这样才能把最终的值带上指定的单位,比如这里就是算的200%
	.render();
}

Less继承

在CSS中，有很多重复的样式，在Less中除了可以用混合（函数）解决，还可以使用继承解决，继承是指拿指定选择器中的属性和值放到当前选择器中

.dm1 {
	width: 200px;
	height: 200px;
	background: blue;
}
.dm {
	&:extend(.dm1);
}

编译后的源码：

.dm1,dm { //最终会编译成这种多个选择的形式
	width: 200px;
	height: 200px;
	background: blue;
}
Penge.
关注
less学习笔记
DSelegent的博客
08-21 850
less学习笔记
前端学习笔记-less
05-26
在前端开发领域，LESS（层叠样式表，Low-level Style Sheets）是一种预处理器，它扩展了CSS语言，增加了变量、嵌套规则、运算符、函数等特性，使得CSS编写更加简洁、可维护性更强。本笔记将深入探讨LESS的重要概念、...
Less学习笔记
sinat_50265804的博客
10-22 694
超级详细的less教程
less笔记
米 柴的博客
12-01 606
快速了解less
less完整笔记
weixin_46724415的博客
04-04 1629
css预处理器--less
less学习笔记教程
hello_list的博客
04-04 830
less学习笔记，快速上手
less语法笔记
weixin_44741485的博客
01-29 168
less语言 less是css的一种扩展语言，用来动态设置css样式，让css语法写作更简单，调整响应式更方便使用 1.引入js文件 < script src=“js/less-1.3.3.min.js”>< /script> 2.需要创建css文件，但是扩展名必须是less 3.用link标签引入css文件 < link href=“css/style.less” rel=“stylesheet/less”> 注意：less和sass只能在服务器地址下运行 4.安装在服
08 vue3之认识bem架构及less sass 和scoped
qq_37550440的博客
09-13 141
08 vue3之认识bem架构及less sass 和scopedbem架构 他是一种css架构oocss 实现的一种 （面向对象css） ，BEM实际上是block、element、modifier的缩写，分别为块层、元素层、修饰符层，elementUI 也使用的是这种架构
Linux通配符*、man 、cp、mv、echo、cat、more、less、head、tail、等指令、管道 | 、指令的本质 等的介绍
最新发布
Farewell_me的博客
09-13 774
Linux通配符*、man 、cp、mv、echo、cat、more、less、head、tail、等指令、管道 | 、指令的本质 等的介绍Linux通配符*、man 、cp、mv、echo、cat、more、less、head、tail、等指令、管道 | 、指令的本质 等的介绍。
前端技术(七)——less 教程
kejizhentan的博客
09-08 954
less是一种动态样式语言，属于css预处理器的范畴，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS 更易维护和扩展LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。
Playwright 测试：如何在云端使用 Browserless 运行？
wellshake的博客
09-09 1203
Playwright 的优势是什么？Browserless 如何与 Playwright 配合使用？在那里您可以获得有关 Browserless 和 Playwright 自动化的所有信息！
STM32学习笔记（二、初识stm32单片机）
tommorrowwill的博客
09-10 738
首先stm32是意法半导体公司（ST）使用ARM公司的Cortex-M为核心生产的32位的单片机。其中，ST---意法半导体公司，即SOC厂商。M---为Microelectronics的缩写，即微型处理器。32---表示控制器为32位的。103---表示F系列的子系列。
C++学习笔记----6、内存管理（五）---- 智能指针（3）
weixin_71738303的博客
09-11 1069
与指向特定类型的原始指针可以转化为不同类型的指针一样，shared_ptr保存特定的类型可以转化为一个另一种类型的shared_ptr。转化shared_ptr的函数是const_pointer_cast()，dynamic_pointer_cast(),static_pointer_cast()和reinterpret_pointer_cast()。前面简要提过，当拥有共享属主的智能指针，例如shared_ptr不在活动范围或者被重置时，只有它是最后指向的智能指针时才能释放其指向的资源。
【C++学习笔记】数组与指针（三）
qq_38196449的博客
09-09 1176
0（空字符）
Webpack学习笔记
m0_74375748的博客
09-09 1415
定义静态模块：指的是编写代码过程中的,html,css,js,图片等固定内容的文件打包：把静态模块内容，压缩，整合，转译等（前端工程化）less/sass转成css代码把ES6+降级成ES5支持多种模块标准语法使用：webpack打包默认出口是dist下的main.js。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Penge.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值