less定义&基本语法

less定义
    less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，
    增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
    LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。

less的编译工具
    1kaola
    2Visual Studio Code 可以自行安装插件

less中的注释
       以//开头的注释，不会被编译到css文件中
       以/**/包裹的注释会被编译到css文件中(css和less通用)  

less中的变量

    1.作为普通属性值只来使用：直接使用@variable

@color：red;
/*@color的值是red*/
/*类似于js中的var申明的变量类似*//*less @color：red; 类似 js var color = red;*/

    2.作为选择器和属性名：#@{selector的值}的形式

@{a}:.color;
/*将属性名或者选择器名作为变量要使用@{变量名}:变量名名字;的语法来编写*/
@a{}
/*@a{}等价于.color{}*/

    3.作为URL：@{url}
    4.变量的延迟加载(和js的作用域类似)

@a:1;
.div{

    @a:2;
    .span{

         @a:3;
        .i{
            width:@a;//@a = 3;
        }
        width:@a; //@a = 3;
    }
    width:@a; //@a = 2;
}
//less的变量延迟有点类似于js中的变量局部的变量向外部依次访问，访问不到则报错；

less中的嵌套规则
    1.基本嵌套规则
    2.&的使用

.div{
    .span{
        &:hover{//编译为.span:hover;
            
        }
    }
}

less中的混合
    定义：混合就是将一系列属性从一个规则集引入到另一个规则集的方式
    1.普通混合 

//要多次使用的代码
.div{
    width:100px;
    height:200px;
    color:red;
}

.div1{
    .div;//复制使用.div内的样式，并且使用
    padding:100px;
}
.div2{
    .div;//复制使用.div内的样式，并且使用
    margin:100px;
}
//这就是less中的混合，他有点类似于js的函数对象，但是less的调用时的功能是会将内部的样式复制给当前
//弊端：当定义的重复使用的样式代码(类似于函数)会被编译到css文件中，大量使用会影响文件的内存大小；

     
    2.不带输出的混合

//要多次使用的代码
.div(){//注意：【div带括号了】
    width:100px;
    height:200px;
    color:red;
}

.div1{
    .div;//复制使用.div内的样式，并且使用
    padding:100px;
}
.div2{
    .div;//复制使用.div内的样式，并且使用
    margin:100px;
}
//弊端：会将文件写死，不利于后期开发
//优点：相对于一般混合，不带输出的混合定义的公共内容不会被解析到css文件中。

    3.带参数的混合

//要多次使用的代码

.div(@width){//中的形参变量需要申明；（js的变量在函数执行上下文前自动申明变量）
    width:@width;
    height:200px;
    color:red;
}

.div1{
    .div(100px);//注意调用混合的规范，带有实参
    padding:100px;
}
.div2{
    .div;//
    margin:100px;
}
//类似于js的实参与形参
//相对于完美
//优点：相对于一般混合，不带输出的混合定义的公共内容不会被解析到css文件中。

    4.带参数并且有默认值的混合

//要多次使用的代码

.div(@width,@height,color){//多个变量之间使用(,)逗号隔开
    width:@width;
    height:@height;
    color:@color;
}

.div1{
    .div(100px,200px,red);//调用时形参与实参要对应，不然会报错，解决办法，给形参加上默认值
    padding:100px;
}
.div2{
    .div(200px,300px,black);//
    margin:100px;
}
//相对于完美
//优点：相对于一般混合，不带输出的混合定义的公共内容不会被解析到css文件中。

    5.带多个参数的混合

//要多次使用的代码

.div(@width,@height,color){//多个变量之间使用(,)逗号隔开
    width:@width;
    height:@height;
    color:@color;
}

.div1{
    .div(100px,200px,red);//调用时形参与实参要对应
    padding:100px;
}
.div2{
    .div(200px,300px,black);//
    margin:100px;
}
//相对于完美
//优点：相对于一般混合，不带输出的混合定义的公共内容不会被解析到css文件中。

    6.命名参数
    7.匹配模式
    8.arguments变量

//要多次使用的代码

.div(@solid,@red,@px){
    border:@arguments;//适用于这种css简写模式
}

.div1{
    .div(solid,red,100px);
    padding:100px;
}

    9.在less/css中引入另一个文件css文件要使用@import[引入公共文件]

//引入公共文件(外部文件)
@import:"./1.css";