Less基础之变量Variables

最新推荐文章于 2024-09-11 16:07:59 发布

AsaZyf

最新推荐文章于 2024-09-11 16:07:59 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： Less Less基础 Less变量 Variables

本文链接：https://blog.youkuaiyun.com/AsaZyf/article/details/86532104

Less 专栏收录该内容

5 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>