1. 概述
-
Less 是一款比较流行的 css 预处理语言，支持变量、混合、函数、嵌套、循环等特点
-
通俗的说 CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用
-
能够解决 CSS 重复代码较多的问题
2. 编译
2.1 方式 1
-
安装 node
-
安装 less：
npm i -g less -
编译 less：
lessc style.less style.css -
写的 less 代码如下
@width: 980px;
@height: @width + 100px;
@color: skyblue;
#header {
width: @width;
height: @height;
background-color: @color;
}
- 编译成的 css 代码如下
#header {
width: 980px;
height: 1080px;
background-color: skyblue;
}
2.2 方式 2
- 引入（后面就会自动编译了）
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4"></script>
-
注
-
file 协议：×（即不能直接 Alt + B 打开 html 文件）
-
http 协议：√（即得用 open with live server 打开）
-
2.3 方式 3
-
使用 vscode 插件：
Easy Less -
写完 less 代码之后保存，会自动把 less 文件转化为 css 文件
2.4 方式 4
- 上面三种方式不需要掌握，后面会通过 webpack 对 less 进行编译
3. 变量
-
格式：
@变量名：变量值 -
选择器的名字也可以使用变量声明，Url 地址也可以使用变量，如下：
@width: 980px;
@height: @width + 100px;
@color: skyblue;
@mybanner: banner;
@imgurl: "../images/ad/01/";
.@{mybanner} {
width: @width;
height: @height;
background-color: @color;
background-image: url("@{imgurl}/0.png");
}
- 编译后的 css 代码
.banner {
width: 980px;
height: 1080px;
background-color: skyblue;
background-image: url("../images/ad/01//0.png");
}
- 注：变量可以先使用后声明
#header {
width: @width;
}
@width: 980px;
4. 混合
-
混合允许将一个类的属性用于另一个类，并且包含类名作为其属性
-
如果想创建一个混合，且不希望这个混合出现在你的 css 中，则在混合定义后面加
() -
在混合调用后使用
!important关键字将它继承的所有属性标记为!important
// 以下混合定义时加了()，这样就不会出现在css中
.box1() {
color: red;
margin: 10px;
padding: 20px;
}
.box2 {
background-color: red;
.box1() !important;
}
.box3 {
background-color: gold;
.box1; // 等价于.box1();
}
- 混合也可以接受参数，这些参数是混合时传递给选择器块的变量
.border-radius(@redius: 1px, @color: blue) {
border-radius: @radius;
color: @color;
}
.box1 {
.border-radius(10px, red);
}
.box2 {
.border-radius(); // 不传参，使用默认值
}
.box3 {
.border-radius(100px);
}
5. 嵌套（重点）
-
Less 提供了使用嵌套（nesting）代替层叠或者层叠结合使用的能力
-
可以使用嵌套将伪选择器与混合一起使用，重写为一个混合（
&表示当前选择器的父级） -
html 结构
<div class="header">
<div class="nav">
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
</ul>
</div>
</div>
- style.less
.header {
width: 100%;
height: 60px;
background-color: #999;
.nav {
width: 1000px;
margin: 0 auto;
ul {
overflow: hidden;
clear: both;
li {
float: left;
margin: 10px;
// 此处&是li
&:hover {
background-color: green;
}
a {
color: red;
}
}
}
}
}
6. 运算
-
算术运算符 +、·、*、/ 可以对任何数字、颜色或变量进行运算
-
如果可能的话，算术运算符在加、减或比较之前会进行单位换算，计算的结果以最左侧操作数的单位类型为准
-
如果单位换算无效或失去意义，则忽略单位
@font-size: 12px;
@width: 1000px;
@color: #222222;
@height: 500px;
.header {
font-size: @font-size + 20px;
}
.container {
width: @width - 120;
}
.box {
background-color: @color * 3;
}
.box1 {
height: (@height / 2);
}
7. 函数
-
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等，这些函数在 less 函数手册中有详细介绍
8. 作用域
- Less 中的作用域与 css 中的作用域非常类似，首先在本地查找变量和混合，若找不到，则从父级作用域继承
@width: 200px;
.root {
.nav {
@width: 400px;
.li {
width: @width;
}
}
}
- css
.root .nav .li {
width: 400px;
}
- 与 css 自定义属性一样，混合和变量的定义不必在引用之前事先定义
9. 导入
- 可以导入一个
.less文件，此文件中的所有变量就都可以全部使用了，如果导入的文件是.less扩展名，则可以将扩展名省略掉
@import "init.less";