less学习笔记

最新推荐文章于 2022-04-04 11:17:39 发布
最新推荐文章于 2022-04-04 11:17:39 发布
阅读量375 收藏
点赞数
分类专栏： # less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42349568/article/details/107581365
版权

一，less的初步认识

LESS是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。 LESS是一种动态样式表语言，扩展了CSS的功能。 LESS也是跨浏览器友好。

CSS预处理器是一种脚本语言，可扩展CSS并将其编译为常规CSS语法，以便可以通过Web浏览器读取。 它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS。
1-1，在写原生的css时，我们是如下图这样写的，和流水账一样，可读性很差。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				position: relative;
				width: 300px;
				height: 400px;
				border: 1px solid ;
				margin: 0 auto;
			}
			#wrap > .inner{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background: pink;
				height: 100px;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="inner"></div>
		</div>
	</body>
</html>

1-2，于是人们就希望css的写法能更具备可读性，让它的层次性更好

		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				position: relative;
				width: 300px;
				height: 400px;
				border: 1px solid ;
				margin: 0 auto;
				#wrap > .inner{
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					background: pink;
					height: 100px;
					width: 100px;
				}
			}
			
		</style>

比如写成上图的样子。可以很清晰地看到inner是在wrap底下的，对于修改代码来说方便很多。
为了实现这一点，人们就搞了一个css的预处理器，相当于一个代码编译转化的工具，先把代码写成这种可读性强的，然后通过这个转化器转化一下就可以使用了。
less就可以理解为这种层次结构更好的代码规则集合。

less的安装

在这里插入图片描述

less的编译

我们的less样式写好了，还需要编译成css文件，才能被使用，代码编辑器可以安装less编译器插件，写好less后，保存代码，就会同步编译出一个css文件。
1-4，正常使用css文件外部引用即可：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/02.css" />
	</head>
	<body>
		<div id="wrap">
			<div class="inner"></div>
		</div>
	</body>
</html>

二，less的注释和变量

2-1，注释的书写：
在这里插入图片描述
编译后：
在这里插入图片描述
2-2，将css中的属性值变成变量，然后赋值。

@color:deeppink;
//将属性值进行变量定义，修改的话，该更改这边即可
*{
	margin: 0;
	padding: 0;
}
#wrap{
	position: relative;
	width: 300px;
	height: 400px;
	border: 1px solid ;
	margin: 0 auto;
	 .inner{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		background: @color;
		//这里用@color变量来代替了
		height: 100px;
		width: 100px;
	}
}

也即是：
使用@来申明一个变量：@pink:pink
1，作为普通属性值来使用：直接使用@pink
2，作为选择器和属性名来使用：#@{selector}的形式
3，作为URL来使用：@{url}
4，变量的延迟加载
2-3，关于变量的延迟加载，就是先编译完后再执行：

@var:0;
.class{
	@var:1;
	.brass{
		@var:2;
		height:@var;    //这个块级作用域中延迟加载：@var=3
		@var:3;
	}
	height:@var;        //这个块级作用域中延迟加载：@var=1
}

三，less的嵌套规则

3-1，基本嵌套规则和&的使用

@color:deeppink;
//将属性值进行变量定义，修改的话，该更改这边即可
*{
	margin: 0;
	padding: 0;
}
#wrap{
	position: relative;
	width: 300px;
	height: 400px;
	border: 1px solid ;
	margin: 0 auto;
	 .inner{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		background: @color;
		height: 100px;
		width: 100px;
		&:hover{
			background: black;    //嵌套规则加个&的作用是消除这边编译后自然产生的一个空格
		}
	}
}

也就是：

#wrap .inner:hover {
  background: black;
}

~~
在这里插入图片描述

四，less中的混合

4-1，如果像下面的代码，有很多重复的部分，就可以把重复的部分提取出来，做成一个类似函数的东西，需要的时候调用一下即可。

@color:deeppink;
*{
	margin: 0;
	padding: 0;
}
#wrap{
	position: relative;
	width: 300px;
	height: 400px;
	border: 1px solid ;
	margin: 0 auto;
	.inner1{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		background: yellow;
		height: 100px;
		width: 100px;
		}
	 .inner2{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		background: @color;
		height: 50px;
		width: 50px;
	}
}

就可以更改为：

*{
	margin: 0;
	padding: 0;
}
//带参数且有初始值@w：宽度，@h：高度，@b：背景色
.inner(@w:100px,@h:100px,@b:deeppink) {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: @h;
  width: @w;
  background: @b;
}
#wrap{
	position: relative;
	width: 300px;
	height: 400px;
	border: 1px solid ;
	margin: 0 auto;
	.inner1{
		.inner(@b:yellow);  //有参数变更就这样写
		}
	 .inner2{
		.inner(50px,50px,);  //默认值的参数就不写
	}
}

4-2，匹配模式
实质上就是把各种情况的css代码写出来，然后利用一个标记去匹配，匹配上哪个代码，就调用哪个代码块。
例如，我们想创建一个三角形：
在这里插入图片描述

#wrap{
	height: 0;
	width: 0;
	border: 100px solid;
	border-color: transparent transparent red transparent;
	overflow: hidden;
}

但若是我们有时需要用到向右的三角形，有时又想用到向左的，还想控制三角形的大小和颜色：
就得带参数（控制大小和颜色），且变更方向（匹配模式）：
先控制大小和颜色：

.triangle(@size,@color){
	height: 0;
	width: 0;
	border: @size solid;
	border-color: transparent transparent @color transparent;
	overflow: hidden;
}


#wrap{
	.triangle(80px,deeppink);
}

想要控制三角形的朝向，则需要用到匹配模式：也就是把所有可能性写出来，加个标识符去匹配：

//箭头朝上
.triangle(T,@size,@color){
	height: 0;
	width: 0;
	border: @size solid;
	border-color: transparent transparent @color transparent;
	overflow: hidden;
}
//箭头朝右
.triangle(R,@size,@color){
	height: 0;
	width: 0;
	border: @size solid;
	border-color: transparent transparent  transparent @color;
	overflow: hidden;
}
//箭头朝下
.triangle(B,@size,@color){
	height: 0;
	width: 0;
	border: @size solid;
	border-color: @color transparent transparent  transparent ;
	overflow: hidden;
}
//箭头朝左
.triangle(L,@size,@color){
	height: 0;
	width: 0;
	border: @size solid;
	border-color:  transparent @color transparent  transparent ;
	overflow: hidden;
}

//选择箭头朝左，匹配上哪个代码 块就调用哪个
#wrap{
	.triangle(L,80px,deeppink);
}

而这个less文件通常是我们代码要修改的部分，为了增强可读性，通常把包含各种情况的css汇总写在另一个less文件中，然后要用它时，进行调用：
即：一个名为triangle.less的文件：

//箭头朝上
.triangle(T,@size,@color){
	height: 0;
	width: 0;
	border: @size solid;
	border-color: transparent transparent @color transparent;
	overflow: hidden;
}
//箭头朝右
.triangle(R,@size,@color){
	height: 0;
	width: 0;
	border: @size solid;
	border-color: transparent transparent  transparent @color;
	overflow: hidden;
}
//箭头朝下
.triangle(B,@size,@color){
	height: 0;
	width: 0;
	border: @size solid;
	border-color: @color transparent transparent  transparent ;
	overflow: hidden;
}
//箭头朝左
.triangle(L,@size,@color){
	height: 0;
	width: 0;
	border: @size solid;
	border-color:  transparent @color transparent  transparent ;
	overflow: hidden;
}

一个直接修改的less文件：

@import "./triangle.less";

//选择箭头朝左，匹配上哪个代码 块就调用哪个
#wrap{
	.triangle(L,100px,deeppink);
}

然而，这个triangle里面还是有不少重复的代码，可以再提取个**重名的混合(@_)**出来：

//这里的@_，必须有，代表重名混合，主混合一旦被调用，重名混合会被先执行一次,
.triangle(@_,@size,@color){
	height: 0;
	width: 0;
	overflow: hidden;
}


//箭头朝上
.triangle(T,@size,@color){
	border: @size solid;
	border-color: transparent transparent @color transparent;
}
//箭头朝右
.triangle(R,@size,@color){
	border: @size solid;
	border-color: transparent transparent  transparent @color;
}
//箭头朝下
.triangle(B,@size,@color){
	border: @size solid;
	border-color: @color transparent transparent  transparent ;
}
//箭头朝左
.triangle(L,@size,@color){
	border: @size solid;
	border-color:  transparent @color transparent  transparent ;
}

4-3,arguments变量


.border(@a,@b,@c){
	border: @argumects;
}

等价于
.border(@a,@b,@c){
	border: @a @b @c;
}

五，less里面可以进行加减乘除的运算

#wrap{
	width:(100+100px);
}
//less中的计算，只需一方带单位即可，它的单位在计算之后会保留下来

六，less的继承

6-1，要达到下图的效果：
在这里插入图片描述
采用混合写出的代码是这样的：


*{
	margin: 0;
	padding: 0;
}

.center(@w,@h,@b) {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: @h;
  width: @w;
  background: @b;
}
#wrap{
	position: relative;
	width: 300px;
	height: 300px;
	border: 1px solid ;
	margin: 0 auto;
	.inner{
			&:nth-of-type(1){
				.center(100px,100px,yellow)
			}
			&:nth-of-type(2){
				.center(50px,50px,red)
			}
	}
}

但是这种写法编译出来的css是这种格式的：

* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid ;
  margin: 0 auto;
}
#wrap .inner:nth-of-type(1) {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 100px;
  width: 100px;
  background: #ffff00;
}
#wrap .inner:nth-of-type(2) {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 50px;
  width: 50px;
  background: #ff0000;
}

有太多重复的代码了，
我们希望编译出来是这样的：

* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid ;
  margin: 0 auto;
}
//把共用的代码提取出来,采用组合选择器
#wrap .inner:nth-of-type(1),#wrap .inner:nth-of-type(2){
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
#wrap .inner:nth-of-type(1) {
 
  height: 100px;
  width: 100px;
  background: #ffff00;
}
#wrap .inner:nth-of-type(2) {
  height: 50px;
  width: 50px;
  background: #ff0000;
}

这种情况下，就需要使用less的继承：

//继承不可带参数
.center {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

*{
	margin: 0;
	padding: 0;
}

#wrap{
	position: relative;
	width: 300px;
	height: 300px;
	border: 1px solid ;
	margin: 0 auto;
	.inner{
			&:extend(.center);
			// 相当于组合选择器.center和#wrap .inner（规则采用。cennter的）
			&:nth-of-type(1){
				height: 100px;
				width: 100px;
				background: yellow;
			}
			&:nth-of-type(2){
				height: 50px;
				width: 50px;
				background: red;
			}
	}
}

也就是你得把公共代码放到那个类里面。
另外，如果这样定义：

//继承不可带参数
.center {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.center:hover{
	background: green;
}

按上面的写法，只会继承.center里面的东西，而不会继承hover，但是，如果加个all，就可以全部继承了。

	&:extend(.center all);
			// 相当于组合选择器.center和#wrap .inner（规则采用。cennter的）

也就是说，继承就是定义一个无参数的类，需要时配合组合选择器使用。

七，避免编译

*{
	margin: 100*10px;
	padding: ~"calc(100px+100)";
	//~""引号内部的转化成css时不计算编译，这种计算浏览器可以进行。calc方法
}
笑道三千
关注
专栏目录
Less学习笔记
毫无技术含量的博客
10-17 686
简介 Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 Less 可以运行在 Node 或浏览器端。 目前CSS预处理语言主要有SASS、SCSS、Less、Stylus。相比于其他的预处理语言，Less在功能的丰富性上略输一筹，相应的学习成本也较低，基本满足了咱们对于CSS编程式开发的需求。 因为在工作中接触到vu...
LESS学习笔记
叶小白的博客
04-28 347
less语法
less学习笔记教程
hello_list的博客
04-04 839
less学习笔记，快速上手
Less 学习笔记
qq_38031539的博客
07-01 344
一、准备工作： 安装配置less 打开命令面板输入使用 npm install -g less 下载kaola 网址 ：http://koala-app.com/ 注： koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容wi
less深入学习日记--01
weixin_45532305的博客
03-13 252
在以往中，一直没有深入利用less的便利性。只是在用less的嵌套在编写css。 这篇文章，就是在css的基础上，学习less的种种。 什么是less Less 是一门 CSS 预处理语言，可以为网站启用可自定义，可管理和可重用的样式表，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 使用less有什么好处 LESS支持创建更清洁，跨浏览器友好的CSS更...
less深入学习日记--02
weixin_45532305的博客
03-23 162
less嵌套规则 允许子项在父项中当作属性来编码子项的css代码 .container { h1 { font-size: 25px; color:#E45456; } p { font-size: 25px; color:#3C7949; } } 输出为css时是： .container h...
Less-层级结构
堇年
10-06 1772
如果在某一个选择器的{}中直接写上了其它的选择器, 会自动转换成后代选择器 例如以下代码: .box1 .son &的作用, 是告诉less在转换的时候不用用后代来转换, 直接拼接在当前选择器的后面即可 .box1 { width: 400px; height: 300px; position: relative; background-color: p...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值