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;
}