Less基础之变量Variables

使用Less进行变量定义与应用

最新推荐文章于 2025-08-29 12:40:10 发布

原创最新推荐文章于 2025-08-29 12:40:10 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Less #Less基础 #Less变量 #Variables

Less 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Less中创建和使用变量。首先，通过新建Variables.less文件并使用koala工具进行编译，实现CSS文件的实时更新。接着，讲述了如何在Variables.less中定义变量，并展示了在CSS中如何调用这些变量，最后通过编写HTML结构，观察变量应用后的效果。

1.新建Variables.less并打开koala添加文件目录，编译Variables.less（会生成对应css文件，当在less进行修改时，css会对应改变）

koala下载地址：链接

2.在Variables.less定义变量

3.使用变量

CSS会对应变化：

编写HTML，查看效果

tips：快速生成HTML代码

header.header+div.banner+div.recommand+div.courses+footer.footer 【按下tab键生成】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="Variables.css" />
	</head>
	<body>
		<header class="header"></header>
		<div class="banner"></div>
		<div class="recommand"></div>
		<div class="courses"></div>
		<footer class="footer"></footer>
	</body>
</html>