less的安装与使用【入门基础篇】

最新推荐文章于 2023-11-29 18:13:13 发布

z21198061a

最新推荐文章于 2023-11-29 18:13:13 发布

阅读量472

点赞数

分类专栏：前端文章标签： less css node.js css3

本文链接：https://blog.csdn.net/z21198061a/article/details/105123509

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、less是什么？

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。

2、安装less

在这里推荐使用node.js来安装less，如果没有node.js请百度。

1 通过node安装less

npm install less -g

2 查看less版本，来确定less是否安装成功

lessc -v

返回：lessc 3.11.1 (Less Compiler) [JavaScript]

3、less的简单应用

新建一个简单的页面测试一下：
1 新建index.html

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>test</title>
</head>
<body>
	<div id="app">
		<ul>
			<li>hi</li>
			<li>box</li>
		</ul>
	</div>
</body>
</html>

运行效果：
在这里插入图片描述

2 新建style.less

@width:20%;
#app{
  width:@width;
  height:20%;
  background-color:red;
    ul{
      color:white;
    li{
      line-height:20px;
    }
  }
}

3 执行命令生成style.css

进入项目根目录，并且执行如下命令：（style.less对应要编译的文件，style.css对应编译后的文件）

lessc style.less style.css

在html中引入style.css：

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<!-- 新添加的 -->
	<link rel="stylesheet" href="style.css"/>
	<!-- -->
</head>
<body>
	<div id="app">
		<ul>
			<li>hi</li>
			<li>box</li>
		</ul>
	</div>
</body>
</html>