less
1、概述
Less (Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言。less是一种动态样式语言,属于css预处理器的范畴,它扩展了css语言。
特点:在css的基础上增加了变量、混合、函数等新特性,使得css更容易维护和扩展。less既可以在客户端运行,也可以借助node.js在服务器端运行。
2、使用
2.1 服务器端和命令行使用less
(1)安装
- 方式1:全局安装
npm install less -g
- 方式2:局部安装
npm i less --save-dev
(2)使用命令将less编译成css
lessc xxx.less xxx.css
2.2 浏览器使用less
(1)引入less文件
<link rel="stylesheet/less" type="text/css" href="styles.less" />
(2)引入less.js文件
引入下载好的less.js或者less.min.js文件
<script src="less.js" type="text/javascript"></script>
或者使用cdn引入
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>
这种方式在引入less文件的时候,默默的转换为了css文件,所以不用手动转换
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试less</title>
<!-- <link rel="stylesheet" href="../css/test01.css"> -->
<link rel="stylesheet/less" type="text/css" href="../css/test01.less" />
</head>
<body>
<div class="outer">
<div class="middle">
<div class="inner">
</div>
</div>
</div>
<script src="../js/less.min.js" type="text/javascript"></script>
</body>
</html>
- less文件
.outer{
position: relative;
width: 500px;
height: 500px;
background-color: pink;
.middle{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left:0;
margin: auto;
width:300px;
height:300px;
background-color: skyblue;
.inner{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left:0;
margin: auto;
width: 100px;
height: 100px;
background-color: lightgreen;
}
}
}
2.3 编译工具插件转换less为css
vscode:下载easyLess插件
作用:每次写完less文件保存后就会在当前目录下自动生成一个编译好的css文件。使用时引用这个css文件即可。
3、语法
详细学习建议直接看【官网】
当然我也总结了一份【less语法简单总结】