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;

}

巴特西