前端技能(七)——less 教程

登录 · 发表于 2026-1-26 05:33:22

一、less简介

1. less是什么？

less是一种动态样式语言，属于css预处置惩罚器的范畴，它扩展了CSS语言，增长了变量、Mixin、函数等特性，使CSS 更易维护和扩展LESS 既可以在客户端上运行，也可以借助Node.js在服务端运行。
less的中文官网:https://lesscss.cn/
2. less编译工具

koala 官网 http://koala-app.com/
3. less中的嵌套规则

1.根本嵌套规则
⑴ css中的标签嵌套的写法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
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-color: pink;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="wrap">
<div class="inner">
</div>
</div>
</body>
</html>

复制代码

⑵ less中嵌套标签中样式设置的写法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/less">
*{
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: pink;
height: 100px;
width: 100px;
}
}
</style>
</head>
<body>
<div id="wrap">
<div class="inner">
</div>
</div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

复制代码

样式如下：

4. 使用koala将less文件编译成css文件

⑴ 先将之前的less样式拆分到css文件夹中的test.less文件中

拆分前的：

拆分后的

test.less

*{
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: pink;
height: 100px;
width: 100px;
}
}

复制代码

test.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/less" href="css/test.less"/>
</head>
<body>
<div id="wrap">
<div class="inner">
</div>
</div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

复制代码

效果为：

⑵ 通过koala将.less文件编译成.css文件

将.less编译后天生的.css文件引入的html文件中

test.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-color: pink;
height: 100px;
width: 100px;
}

复制代码

test.html文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body>
<div id="wrap">
<div class="inner">
</div>
</div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

复制代码

效果如下：

5. less中的解释

以 // 开头的解释，不会被编译到css文件中
以 /**/包裹的解释会被编译到css文件中
6. less中的变量

使用@来声明一个变量：@pink:pink;
1.作为平常属性值来使用: @pink
2.作为选择器和属性名来使用: @{selector的值}
3.作为URL： @{url}
.less倒霉用变量和.less使用变量对比

编译前的.less文件和编译后天生的.css文件对比

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金

前端技能(七)——less 教程

本帖子中包含更多资源

祗疼妳一个