Less的入门及使用—变量、嵌套规则、混合、运算、避免编译、继承(附代码演示)

Css短板

css作为一门标记性语言，给初学者的第一印象是简单易懂，毫无逻辑，不像编程该有的样子。

语法更新时，浏览器的兼容问题比较麻烦，问题的诞生伴随着技术的兴起，在web发展的这几年，出现了预处理语言，让css彻底变成了一门可以使用变量、循环、继承、自定义方法等多种特性的标记语言

预处理语言的诞生

其中常用的三门语言：Less、Sass、Stylus

1:sass诞生于2007年，Ruby编写，语言功能十分全面，国内外都很受欢迎，它的项目团队也很强大，是一款十分优秀的预处理语言

2 stylus诞生于2010年，来自Node.js社区，语法功能和sass不相伯仲

3:Less诞生于2009年，受Sass影响的一个开源项目，增加了变量，混合，函数等功能，让css更易维护，方便制作主体，扩充

逻辑性得以大大增强

一、less简介

less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
less的中文官网http://lesscss.cn/

二、Less安装

安装

1:在 Node.js 环境中使用 Less ：

        npm install -g less

2:在浏览器环境中使用 Less ：

        <link rel="stylesheet/less" type="text/css" href="styles.less" />

        <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

3:在VSCode中使用Less

        安装Easy LESS 插件

4:在HbuilderX中使用

        搜安装插件

 三、Less语法

1、less中的注释

        以//开头的注释，不会被编译到css文件中

        以/**/包裹的注释会被编译到css文件中

2、less中的变量

css中看到同一个值重复多次，这样代码难维护，使用@来申明一个变量：@pink：pink;

2.1普通变量

// 定义变量1
@color:yellow;
@width:300px;
@height:300px;

#wrap{
    width:@width;
    height: @height;
    border: 1px solid;
    background-color: @color;
    margin: 0 auto;
}

2.2变量作为选择器

@color:red;
@width:300px;
@height:300px;
// 声明selector对应#wrap
@selector:#wrap;
@w:width;
@h:height;
@{selector}{//变量名必须使用大括号包裹
    @{w}:@width;
    @{h}: @height;
    border: 10px double black;
    background-color:@color ;
    margin: 0 auto;
}

2.3变量作为url

@url:"../img/img1.png";
@selector:wrap;
@color:red;
.@{selector}{
    width: 200px;
    height: 200px;
    background-color:@color;
    background: url(@url) no-repeat;
    background-size: cover;
}

2.4变量延迟加载

@var: 0px;
// 变量是块级作用域
.class {
  @var: 10px;
    .brass {
      @var: 20px;
      width: @var;  //30px  读完块级作用域后，再去确定变量值
      @var: 30px;
    }
  width: @var;  //10px
}

3、less中的嵌套规则

1.基本嵌套规则

2.&的使用

*{
    margin: 0;
    padding: 0;
}
ul{
    background-color: #333;
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    width: 400px;
    margin: 50px auto;
    li{
        list-style: none;
        float: left;
        width: 25%;
        text-align: center;
        a{
            text-decoration: none;
			color: white;
        }
        // &表示上一级选择器
        &:hover{
            background-color:tomato;
        }
    }
}

4、less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式(ctrl c +ctrl v),

混合的定义，在less规则，明确指定'.'的形式来定义

4.1、普通混合 （会编译到原生css中）

// 普通混合，会在css中输出
.base{
    width: 100px;
    height: 100px;
    margin-bottom: 10px
}
#box1{
    .base;
    background: pink;
}
#box2{
    .base;
    background: deeppink;
}

4.2、不带输出的混合

// 不会在css中输出输出混合
.base(){
    width: 100px;
    height: 100px;
    margin-bottom: 10px
}
#box1{
    .base;
    background: pink;
}
#box2{
    .base;
    background: deeppink;
}

4.3、带参数的混合

//带参数的混合 
// 行参
.base(@w,@h,@color){
    width: @w;
    height: @h;
    background-color: @color;
    margin-bottom: 10px
}
// 以下传入实参
#box1{
    .base(100px,100px,red);
}
#box2{
    .base(200px,200px,pink);
}

4.4、带参数并且有默认值的混合

4.5、带多个参数的混合

//带参数的混合 
// 行参
.base(@w:100px,@h:100px,@color:yellow){
    width: @w;
    height: @h;
    background-color: @color;
    margin-bottom: 10px
}
// 以下传入实参
#box1{
    .base(100px,100px,red);
}
#box2{
    .base(200px,200px,pink);
}
#box3{
    .base;
}

4.6、命名参数

.base(@w:100px,@h:100px,@color:yellow){
    width: @w;
    height: @h;
    background-color: @color;
    margin-bottom: 10px
}
#box1{
    .base(@color:red);
}
#box2{
    .base(@w:200px);
}
#box3{
    .base;
}

4.7、匹配模式

// 引入minx库，两种方式都可以
// @import url(./minx.less);
@import './minx.less';
#arrows{
    .arrows(R,@w:40px,@C:red)
}

4.8、arguments变量

*{
    margin: 0;
    padding: 0;
}
.border(@w,@style,@c){
    border: @arguments;// 等价于  border: @w @style @c;
  
}
#wrap{
    width: 200px;
    height: 200px;
    background: pink;
    .border(10px,solid,red);
}

5、less运算

在less中可以进行加减乘除的运算，计算的一方的带单位就可以了

@w:100px;
*{
    margin: 0;
    padding: 0;
}
#wrap{
    // 计算的双方，只要一方有单位就可以了
    // +  -  *  /
    width:@w+200;
    height: 200px;
    background: pink;
}

6、less避免编译

～'' less不编译，原封不动，交给css编译

*{
    margin: 0;
    padding: 0;
}
#wrap{
    // ～''  less不编译，原封不动，交给css编译
    width:~"calc(200px + 700px)";
}

7、less继承

性能比混合高

灵活度比混合低

mixin.less

.juzhongMix{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.juzhongMix:hover{
    background-color: red;
}

index.less

*{
    margin: 0;
    padding: 0;
}

@import url(./mixin.less);
#wrap{
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid red;
    #box1{
        // 继承.juzhongMix样式，
        &:extend(.juzhongMix);
        width: 100px;
        height: 100px;
        background-color: pink;     
    }
    #box2{
        // 继承.juzhongMix所有相关的样式
        &:extend(.juzhongMix all);
        width: 50px;
        height: 50px;
        background-color: yellow;
        
    }
}