1.css的弊端
- CSS需要书写大量的看似没有逻辑的代码，冗余度高
- 不方便维护，不利于复用
- 没有很好的计算能力
2.Less介绍
简单说：Less是CSS预处理语言，扩展了CSS的动态性
CSS的扩展语言，也成为CSS的预处理器。在CSS基础上引入了变量、运算以及函数等功能，简化了CSS的编写。
常见CSS预处理器：Sass、Less、Stylus
3.Less使用
后缀名是less,在less文件中写less语句
学习：
- less变量
- less编译
- less嵌套
- less运算
3.1 less变量
变量值是可以改变的，在CSS中一些颜色和数值经常使用
语法：
@变量名:值;
变量命名规范：
- 必须加@前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感，color和Color是两个变量名
3.2 less编译
需要把less文件编译生成css文件，这样html页面才可以使用
vscode的插件：easyless
写完less文件，ctrl+s保存后就会生成css文件
html
<!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>Document</title>
<link rel="stylesheet" href="./12.less基础.css">
</head>
<body>
<div>绿色的</div>
</body>
</html>
less:
@color:green;
@font14:14px;
body{
background-color: @color;
}
div{
font-size: @font14;
}
生成的css:
body {
background-color: green;
}
div {
font-size: 14px;
}
3.3 less嵌套
可以向下边这样直接嵌套：
less:
@color:green;
@font14:14px;
body{
background-color: @color;
}
div{
font-size: @font14;
a{
color: red;
}
}
编译成css:
body {
background-color: green;
}
div {
font-size: 14px;
}
div a {
color: red;
}
遇到交集、伪类、伪元素选择器
- 内层选择器的前面没有&符号，则它被解析为父选择器的后代
- 如果有&符号，就被解析为父元素自身或父元素的伪类
@color:green;
@font14:14px;
body{
background-color: @color;
}
div{
font-size: @font14;
a{
color: red;
//伪元素、伪类、交集选择器（div.banner这种）前加&
&:hover{
color: black;
}
&.side{
color: aqua;
}
}
}
.nav{
&::before{
content: '';
}
}
编译成css:
body {
background-color: green;
}
div {
font-size: 14px;
}
div a {
color: red;
}
div a:hover {
color: black;
}
div a.side {
color: aqua;
}
.nav::before {
content: '';
}
3.4 less运算
任何数字、颜色或变量都可以参与运算。less提供了+、-、*、/算数运算
注意：
- 运算符左右两侧敲空格分开
- 除法运算加括号
- 两个数参与运算，如果只有一个数有单位，则最后结果根据以这个数的单位为准
- 两个数参与运算，两个数都有单位，且不一样的话，最后结果以第一个数的单位为准
less:
@border: 5px + 5;
div {
width: 200px - 50;
height: 200px;
border: @border solid red;
background-color: #666 - #222;
}
img {
width: (82 / 50rem）;
height: (82 / 50rem）;
}
css:
div {
width: 150px;
height: 200px;
border: 10px solid red;
background-color: #444444;
}
img {
width: 1.64rem;
height: 1.64rem;
}
