Less基础入门

合集 - CSS(4)

1.CSS基础2024-12-102.CSS3新特性2024-12-11

3.Less基础入门2024-12-11

4.Sass基础入门2024-12-11

收起

1. 概述#

• Less 是一款比较流行的 css 预处理语言，支持变量、混合、函数、嵌套、循环等特点

• 通俗的说 CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用

• 能够解决 CSS 重复代码较多的问题

2. 编译#

2.1 方式 1#

• 安装 node

• 安装 less：npm i -g less

• 编译 less：lessc style.less style.css

• 写的 less 代码如下

@width: 980px;
@height: @width + 100px;
@color: skyblue;

#header {
	width: @width;
	height: @height;
	background-color: @color;
}

• 编译成的 css 代码如下

#header {
	width: 980px;
	height: 1080px;
	background-color: skyblue;
}

2.2 方式 2#

• 引入（后面就会自动编译了）

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4"></script>

• 注

  • file 协议：×（即不能直接 Alt + B 打开 html 文件）

  • http 协议：√（即得用 open with live server 打开）

2.3 方式 3#

• 使用 vscode 插件：Easy Less

• 写完 less 代码之后保存，会自动把 less 文件转化为 css 文件

2.4 方式 4#

• 上面三种方式不需要掌握，后面会通过 webpack 对 less 进行编译

3. 变量#

• 格式：@变量名：变量值

• 选择器的名字也可以使用变量声明，Url 地址也可以使用变量，如下：

@width: 980px;
@height: @width + 100px;
@color: skyblue;
@mybanner: banner;
@imgurl: "../images/ad/01/";

.@{mybanner} {
	width: @width;
	height: @height;
	background-color: @color;
	background-image: url("@{imgurl}/0.png");
}

• 编译后的 css 代码

.banner {
	width: 980px;
	height: 1080px;
	background-color: skyblue;
	background-image: url("../images/ad/01//0.png");
}

• 注：变量可以先使用后声明

#header {
	width: @width;
}

@width: 980px;

4. 混合#

• 混合允许将一个类的属性用于另一个类，并且包含类名作为其属性

• 如果想创建一个混合，且不希望这个混合出现在你的 css 中，则在混合定义后面加()

• 在混合调用后使用!important关键字将它继承的所有属性标记为!important

// 以下混合定义时加了()，这样就不会出现在css中
.box1() {
	color: red;
	margin: 10px;
	padding: 20px;
}

.box2 {
	background-color: red;
	.box1() !important;
}

.box3 {
	background-color: gold;
	.box1; // 等价于.box1();
}

• 混合也可以接受参数，这些参数是混合时传递给选择器块的变量

.border-radius(@redius: 1px, @color: blue) {
	border-radius: @radius;
	color: @color;
}

.box1 {
	.border-radius(10px, red);
}

.box2 {
	.border-radius(); // 不传参，使用默认值
}

.box3 {
	.border-radius(100px);
}

5. 嵌套（重点）#

• Less 提供了使用嵌套（nesting）代替层叠或者层叠结合使用的能力

• 可以使用嵌套将伪选择器与混合一起使用，重写为一个混合（&表示当前选择器的父级）

• html 结构

<div class="header">
	<div class="nav">
		<ul>
			<li><a href="#">导航1</a></li>
			<li><a href="#">导航2</a></li>
			<li><a href="#">导航3</a></li>
		</ul>
	</div>
</div>

• style.less

.header {
	width: 100%;
	height: 60px;
	background-color: #999;
	.nav {
		width: 1000px;
		margin: 0 auto;
		ul {
			overflow: hidden;
			clear: both;
			li {
				float: left;
				margin: 10px;
				// 此处&是li
				&:hover {
					background-color: green;
				}
				a {
					color: red;
				}
			}
		}
	}
}

6. 运算#

• 算术运算符 +、·、*、/ 可以对任何数字、颜色或变量进行运算

• 如果可能的话，算术运算符在加、减或比较之前会进行单位换算，计算的结果以最左侧操作数的单位类型为准

• 如果单位换算无效或失去意义，则忽略单位

@font-size: 12px;
@width: 1000px;
@color: #222222;
@height: 500px;

.header {
	font-size: @font-size + 20px;
}

.container {
	width: @width - 120;
}

.box {
	background-color: @color * 3;
}

.box1 {
	height: (@height / 2);
}

7. 函数#

• Less 内置了多种函数用于转换颜色、处理字符串、算术运算等，这些函数在 less 函数手册中有详细介绍

• 函数手册地址

8. 作用域#

• Less 中的作用域与 css 中的作用域非常类似，首先在本地查找变量和混合，若找不到，则从父级作用域继承

@width: 200px;

.root {
	.nav {
		@width: 400px;
		.li {
			width: @width;
		}
	}
}

• css

.root .nav .li {
	width: 400px;
}

• 与 css 自定义属性一样，混合和变量的定义不必在引用之前事先定义

9. 导入#

• 可以导入一个.less文件，此文件中的所有变量就都可以全部使用了，如果导入的文件是.less扩展名，则可以将扩展名省略掉

@import "init.less";