Less基础

less

      less是一门css的预处理语言
              - less是一个css的增强版，通过less可以编写更少的代码实现更加强大的样式
              - 在less中添加了许多的新特性，像对变量的支持，对mixin的支持
              - less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，
                所以浏览器无法直接执行less代码，要执行必须将less转换为css，然后再由浏览器执行
      
              - less中的单行注释，注释中的内容不会解析到css中
              - css中的注释，内容会被解析到css文件中
              
     
    变量，在变量中可以存储一个任意的值
    我们在需要时，任意的修改变量中的值
      
    变量的语法
      声明变量 @变量名:变量值;
      使用变量时，如果是直接使用则以@变量名的形式使用即可
      作为类名，或者一部分值使用时必须以 @{变量名} 的形式使用
      
@a:100px;
@b:#bFa;
@c:box6;

.box5{
    // 使用变量时，如果是直接使用则以@变量名的形式使用即可
    width: @a;
    color: @b;
}

// 作为类名，或者一部分值使用时必须以 @{变量名} 的形式使用
.@{c}{
    width: @a;
    background-image: url("@{c}/1.png");
}

@d:200px;
@d:300px;

div{
    // 就近原则，谁近用谁
    width: @d;
    height: $width;
    // 引用width的值
}

// 继承

.p1{
    width: 100px;
    height: 200px;
}

// :extend() 对当前选择器扩展指定选择器的样式（选择器分组）

.p2:extend(.p1){
    // width: 100px;
    // height: 200px;
    color: red;
}

// 直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制
// mixin 混合
.p3{
    .p1()
}

// 使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixin
.p4(){
    width: 100px;
    height: 100px;
    background-color: #bfa;
}

.p5{
    .p4;
}

// 混合函数  在混合函数中可以直接设置变量
// 定义的时候可以直接指定默认值
.test(@w:100px,@h:200px,@bg-color:red){
    width: @w;
    height: @h;
    border: 1px solid @bg-color;
}

div{
    // 调用混合函数，按顺序传递参数
    // .test(200px,300px,#bfa);
    // .test(@bg-color:red,@w:200px, @h:300px)
    .test();
}

span{
    color: average(red,blue);
}

// 不设html hover 不起作用
html{
    width: 100%;
    height: 100%;
}

// darken 加深

body{
    width: 100%;
    height: 100%;
    background-color: #bfa;
    &:hover{
        background-color: darken(#bfa,100%);
    }
}