08-less预处理器
一、less预处理器
Less(LeanerStyle Sheets 的缩写)是一门 CSS扩展语言,也成为CSS预处理器。
1.插件安装
安装Easy LESS插件就能使写入的.less文件保存时自动生成.css文件
2.用法
1..less中的语法完全兼容css语法。
2.HTML引入时,需要引入的是CSS文件。
3.less自动生成为css文件后,不能直接修改生成的css文件,因为less文件的编译是时时的,刷新保存后,修改的css文件就不存在了。
3.less的嵌套
1.less的嵌套与HTML的结构一一对应。
//less
.father {
.son {
.sun {
font-size: 20px;
}
}
.borther {
color: #09f;
}
}
//less自动生成的css
.father .son .sun {
font-size: 20px;
}
.father .borther {
color: #09f;
}
//html
<div class="father">
父亲
<div class="son">
儿子
<div class="sun">孙子</div>
</div>
<div class="borther">
兄弟
</div>
2.&代表less里的父元素自身。
3.父元素的内层选择中如果没有&符号,就是它的后代;有&符号,就是父元素自身。
// less中的嵌套与HTML结构一致
.father {
// 子代
>.son {
font-size: 50px;
//伪元素
&::before {
content: "哈哈";
}
.sun {
color: green;
font-size: 16px;
// 鼠标经过
// &代表的是less中的上一级元素
&:hover {
color: #09f;
}
}
}
}
// 交集
// &代表的是less中的上一级元素
div {
&.borther {
background-color: #f34;
}
}
4.less的变量
用@定义,谁要用谁就调用。
//定义变量
@color_f34: #f34;
@color_09f: #09f;
@font20: 20px;
@width: 100px;
.father {
width: @width;
.son {
color: @color_f34;
.sun {
color: @color_09f;
}
}
.borther {
font-size: @font20;
}
}
1.定义变量实际上就是将一个值储存在变量名中。
2.调用变量实际上就是使用变量中储存的值。
3.一个变量里面只能储存一个值。
4.变量名要见名知意,不能包含特殊字符,不能以数字开头。
5.less的运算
//定义变量
@color_f34: #f34;
@color_09f: #09f;
@font20: 20px;
@width: 100px;
.father {
width: @width - 50;
// 运算符前后要用空格隔开,先乘除后加减
height: 100px + 200px - 100px * 2 / 4;
.son {
color: @color_f34;
.sun {
color: @color_09f;
border: 1px + 2 solid #222;
}
}
.borther {
font-size: @font20 + 5;
}
}
6.导入less文件
在less文件中导入另一个less文件。
语法:
@import "文件名.less";
注意:@impot后面要有空格,语句结束要加分号喔~
7.less中的混合类
// 混合变量
// 无默认值
.square(@h; @w; @f) {
width: @w;
height: @h;
font-size: @f;
}
.color(@bg; @fc) {
background-color: @bg;
color: @fc;
}
// 有默认值
.square_2(@h: 200px; @w: 200px; @f: 18px) {
width: @w;
height: @h;
font-size: @f;
}
.color_2(@bg: #90f; @fc: #fff) {
background-color: @bg;
color: @fc;
}
//有默认值2
// 高默认是300,宽默认等于高
.square_3(@h: 300; @w: @h; ) {
width: @w;
height: @h;
}
// 调用无默认值的混合变量必须要传入值
.box1 {
.color(#f34, #666);
.square(100px, 100px, 14px);
}
.box2 {
.color(#09f, #ccc);
.square(100px, 100px, 20px);
}
.box3 {
// 调用有默认值得混合变量时,可以不传入值,调用的就是默认值
.square_2();
.color_2();
}
.box4 {
// 调用有默认 值得混合变量后,重新给他赋值,会覆盖掉默认值
.color_2(#666, #fff);
// 有默认值时,可以不全部赋值,没有赋值的就是默认值
.square_2(250px, 250px);
}
.box4 {
.square_3();
}
利用less封装常用函数
// 清除浮动
.clearfix() {
&::after {
content: "";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
}
// 定位居中
.center() {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
// flex居中
.center_f() {
display: flex;
justify-content: center;
align-items: center;
}
/*单行溢出*/
.one-txt-cut() {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*多行溢出*/
.txt-cut(@l) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: @l;
-webkit-box-orient: vertical;
}