less 基础
学习目标
1.理解什么是less
2.熟练应用less的嵌套语法
3.熟练定义less的变量
4.熟练应用less的计算
5.熟练应用less的混合
第一章 Less入门
1.1 节 什么是Less
less是一种动态样式语言,属于css预处理器的范畴,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展LESS 既可以在 客户端 上运行 ,也可以借助Node.js在服务端运行。
less的中文官网:http://lesscss.cn/
1.2 节 Less入门应用
在之前我们通过CSS编写一块内的样式时经常使用包含选择器父选择器 子选择器
来划定样式的范围。但是当css代码很多的时候,代码就会显得很乱,难以维护。less是Css的预编译器,可以很轻松的解决这个问题,它支持代码缩进的方式选择子选择器。如下语法所示:
1)编写入门程序
<!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>
<style type="text/less">
*{margin:0;padding:0;}
#app{
height:400px;
background-color: blue;
.adv{
width:100px;
height:100px;
background-color:pink;
}
}
</style>
<script src="./less/less.min.js"></script>
</head>
<body>
<div id="app"><div class="adv"></div></div>
</body>
</html>
**注意:**一定要引入less.min.js,浏览器并不识别less语法,less.min.js帮我们把less语法转为css语法。
第二章 Less嵌套语法
2.1 节 父子级嵌套
less支持父子级嵌套,示例如下:
<!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>
<style type="text/less">
#app {
height:400px;
background-color: pink;
overflow: hidden;
position: relative;
.adv{
width:100px;
height:100px;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
background-color: blue;
}
}
</style>
<script src="./less/less.min.js"></script>
</head>
<body>
<div id="app"><div class="adv"></div></div>
</body>
</html>
2.2 节 平级嵌套
Less除了支持父子嵌套,还支持平级嵌套,语法如下:
less支持平级嵌套,示例如下:
<!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>
<style type="text/less">
#app {
height:400px;
background-color: pink;
overflow: hidden;
position: relative;
.adv{
width:100px;
height:100px;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
background-color: blue;
&:hover{
background-color: yellow;
}
}
}
</style>
<script src="./less/less.min.js"></script>
</head>
<body>
<div id="app"><div class="adv"></div></div>
</body>
</html>
第三章 Less 的变量与计算
Less支持定义变量,支持加、减、乘、除运算。
定义变量语法:
- @变量名:变量值
示例:
<!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>
<style type="text/less">
@width:100px;
#app {
height:400px*2;
background-color: pink;
overflow: hidden;
position: relative;
.adv{
width:@width*2;
height:100px;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
background-color: blue;
}
}
</style>
<script src="./less/less.min.js"></script>
</head>
<body>
<div id="app"><div class="adv"></div></div>
</body>
</html>
第四章 Less中的混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
语法如下:
4.1 节 普通混合
普通混合示例:
<!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>
<style type="text/less">
*{
margin:0;
padding: 0;
}
#app{
height:400px;
background-color: blue;
}
.juzhong{
width:100px;
height: 100px;
background-color: red;
margin: 10px auto;
}
.adv1{
.juzhong();
}
.adv2{
.juzhong();
}
</style>
<script src="./less/less.min.js"></script>
</head>
<body>
<div id="app">
<div class="adv1"></div>
<div class="adv2"></div>
</div>
</body>
</html>
4.2 节 带参数的混合
带参数混合示例
<!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>带参数混合</title>
<style type="text/less">
*{
margin:0;
padding: 0;
}
#app{
height:400px;
background-color: blue;
}
.juzhong(@w,@h){
width:@w;
height: @h;
background-color: red;
margin: 10px auto;
}
.adv1{
.juzhong(100px,100px);
}
.adv2{
.juzhong(200px,200px);
}
</style>
<script src="./less/less.min.js"></script>
</head>
<body>
<div id="app">
<div class="adv1"></div>
<div class="adv2"></div>
</div>
</body>
</html>
4.3 节 有默认值的混合
有默认值的混合示例如下:
<!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>有默认值的混合</title>
<style type="text/less">
*{
margin:0;
padding: 0;
}
#app{
height:400px;
background-color: blue;
}
.juzhong(@w:100px,@h:100px){
width:@w;
height: @h;
background-color: red;
margin: 10px auto;
}
.adv1{
.juzhong();
}
.adv2{
.juzhong(300px,300px);
}
</style>
<script src="./less/less.min.js"></script>
</head>
<body>
<div id="app">
<div class="adv1"></div>
<div class="adv2"></div>
</div>
</body>
</html>
4.4 节 命名参数
命名参数混合示例如下:
<!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>命名参数</title>
<style type="text/less">
*{
margin:0;
padding: 0;
}
#app{
height:400px;
background-color: blue;
}
.juzhong(W,@N){
width:100px;
height: @N;
background-color: red;
margin: 10px auto;
}
.juzhong(H,@N){
width:@N;
height: 100px;
background-color: red;
margin: 10px auto;
}
.adv1{
.juzhong(W,300px);
}
.adv2{
.juzhong(H,300px);
}
</style>
<script src="./less/less.min.js"></script>
</head>
<body>
<div id="app">
<div class="adv1"></div>
<div class="adv2"></div>
</div>
</body>
</html>
第五章 总结
- 理解Less的作用
- 熟练应用Less嵌套语法
- 熟练应用Less的变量与计算
- 熟练应用Less的混合