目录
一、less中的混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方法。
以案例说明:
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" />
<link rel="stylesheet" href="./css/test01.css" />
<title>Document</title>
</head>
<body>
<div class="main">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
</body>
</html>
less文件
// less文件
* {
margin: 0;
padding: 0;
}
.main {
position: relative;
margin: 10px;
width: 300px;
height: 300px;
border: 1px solid red;
.inner1 {
width: 100px;
height: 100px;
z-index: 1;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: skyblue;
}
.inner2 {
width: 200px;
height: 200px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: skyblue;
}
}
1.1 普通混合
从上述案例中可看到,.inner1 和 inner2 中的居中相关代码是一致的,那么就可以将居中相关代码提取出来,即:
// less文件
.mediate {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: skyblue;
}
* {
margin: 0;
padding: 0;
}
.main {
position: relative;
margin: 10px;
width: 300px;
height: 300px;
border: 1px solid red;
.inner1 {
width: 100px;
height: 100px;
z-index: 1;
.mediate;
}
.inner2 {
width: 200px;
height: 200px;
.mediate;
}
}
使用普通混合的话,自动编译生成的css文件中,也会写入所提取的属性
如果不希望单独提取的属性部分输出到css文件中的话,可以为其添加上(),即:
// less文件
.mediate() {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: skyblue;
}
...
1.2 带参数的混合
可以为提取的属性设置参数以及设置默认值
// less文件
// 为.mediate设置多个参数和默认值
.mediate(@l:0,@r:0,@t:0,@b:0,@c) {
position: absolute;
left: @l;
right: @r;
top: @t;
bottom: @b;
margin: auto;
background-color: @c;
}
* {
margin: 0;
padding: 0;
}
.main {
position: relative;
margin: 10px;
width: 300px;
height: 300px;
border: 1px solid red;
.inner1 {
width: 100px;
height: 100px;
z-index: 1;
.mediate(50%,50%,50%,50%,red);
}
.inner2 {
width: 200px;
height: 200px;
//@c:skyblue 命名参数
.mediate(@c:skyblue);
}
}
/*
什么是命名参数:引用 mixin 时可以通过参数名而不是参数的位置来为 minxin 提供参数值,任何参数都可以通过它的名称来引用,这样就不必按照任意特定的顺序来使用参数
*/
1.3 匹配模式
说明:传值的时候定义一个字符,在使用的时候使用哪个字符,就调用哪条规则
案例练习
// 新建一个borderstyle.less文件
//上边框为红色
.borderstyle(T,@w) {
border-width: @w;
border-style: solid;
border-color: red black black black;
}
// 右边框为红色
.borderstyle(R,@w) {
border-width: @w;
border-style: solid;
border-color: black red black black;
}
// 下边框为红色
.borderstyle(B,@w) {
border-width: @w;
border-style: solid;
border-color: black black red black;
}
// 左边框为红色
.borderstyle(L,@w) {
border-width: @w;
border-style: solid;
border-color: black black black red;
}
// less文件
@import "./borderstyle.less";
.main {
position: relative;
margin: 10px;
width: 300px;
height: 300px;
// 选择所需模式,并填写参数
.borderstyle(B,10px);
.inner1 {
...
}
.inner2 {
...
}
}
/* 编译后的css文件中 */
.main {
position: relative;
margin: 10px;
width: 300px;
height: 300px;
border-width: 10px;
border-style: solid;
border-color: black black red black;
}
1.4 @arguments 变量
@arguments 代表所有的可变参数
注意:
- @arguments 代表所有可变参数,参数的先后顺序就是()括号内的参数的顺序
- 赋值时,值的位置和个数是一一对应的
举例说明
// less文件
.border(@width,@style,@color) {
border: @arguments;
}
.div {
.border(1px,solid,back);
}
/* 编译后的css文件 */
.div {
border: 1px solid back;
}
二、less运算
less中可以进行加减乘除的运算
举例说明
// less文件
.div {
width: (100 + 200px);
}
/* 编译后css文件 */
.div {
width: 300px;
}
三、less避免编译
在运算时,有时候会遇到单位不同的情况,这个时候需要使用到 calc,但在采用 calc 语法时,应该避免 less 的编译,保留原来格式,让浏览器进行计算
因此官方提供的做法:在less中采用calc语法时,需要用引号( '' )将其所在的属性部分括起来,并在最前面添加上 ~ 符号
简单举个例子
less文件中
* {
margin: (100% - 20px);
padding: ~"calc(100%-20px);";
}
经过编译的css文件中
* {
margin: 80%;
padding: calc(100%-20px);;
}
可以看到在单位不同的情况下,margin属性未使用calc语法,因此最后计算出的结果明显是不正确的,而padding属性采用的calc语法并添加上了 '' 以及 ~ ,所以避免less编译
四、less继承
less继承(extend):性能比混合高,灵活度比混合低
- Extend 是 Less 语法中的一个伪类,它可以继承所匹配的全部样式。
- Extend 是为了解决样式表中重复的样式,这一点与其它语言中的继承功能相似。
- Extend 主要用于复用重复的样式类,可附加在选择器上或放置到样式集中
语法:
获得继承选择器名:extend(被继承名){...}
// 继承所有状态
获得继承选择器名:extend(被继承名 all){...}
举例说明(1):less继承
在less文件中
.mediate {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
div:extend(.mediate) {
width: 100px;
height: 100px;
}
编译后的css文件中,可以看到 div 保持了原有的样式,且也继承了mediate中的样式
.mediate,
div {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
div {
width: 100px;
height: 100px;
}
举例说明(2):关于 less继承中的 all 关键字
在less文件中
.mediate {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.mediate:hover {
color: skyblue;
}
/* 使用all关键字 */
.div1:extend(.mediate all) {
width: 100px;
height: 100px;
}
/* 未使用all关键字 */
.div2:extend(.mediate) {
width: 50px;
height: 50px;
}
编译后的css文件中,可以看到div1 中使用了all关键字,因此也继承了.mediate:hover中的样式,而div2未使用all关键字,则未能继承
.mediate,
.div1,
.div2 {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.mediate:hover,
.div1:hover {
color: skyblue;
}
/* 使用all关键字 */
.div1 {
width: 100px;
height: 100px;
}
/* 未使用all关键字 */
.div2 {
width: 50px;
height: 50px;
}