less基本语法

Posted 2020-08-21

//声明编码格式
@charset "utf-8";
//less 里定义变量的话 一定要用@开头 例如 @变量名:值

@test_width:300px;

.box{
    width: @test_width;
    height:@test_width;
    background-color: yellow;
    .border;
}

//混合,直接把border里的内容给了.box
.border{
    border:solid 5px pink;
}
.box2{
    .box;
    margin-left: 100px;
}
//混合 - 可带参数的
.border_02(@border_width){
    border: solid yellow @border_width;
}
.test_hunhe{
    .border_02(20px)
}
//混合，默认带值
.border_03(@border_width:10px){
    border: solid green @border_width;
}
.test_hunhe_03{
    .border_03();
}
//混合的例子
.border_radius(@radius:5px){
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    border-radius:@radius;
}
.radius_test{
    width: 100px;
    height: 40px;
    background-color: #e60;
    .border_radius(10px);
}
//匹配模式
//普通写法
.sanjiao{
    width:0;
    height: 0;
    overflow: hidden;
    border-width: 10px;
    border-color: red transparent transparent transparent;
    border-style: solid;
    //兼容IE写法
    border-style:dashed dashed solid dashed;
}

//匹配模式写法

.triangle(top,@w:5px,@c:#ccc){//朝上 边框宽度 默认颜色
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: solid dashed dashed dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){//朝下 边框宽度 默认颜色
    border-width: @w;
    border-color: @c transparent transparent transparent;
    border-style: dashed dashed solid dashed;
}
.triangle(left,@w:5px,@c:#ccc){//朝左 边框宽度 默认颜色
    border-width: @w;
    border-color: transparent  @c transparent transparent;
    border-style: dashed dashed dashed solid;
}
.triangle(right,@w:5px,@c:#ccc){//朝右 边框宽度 默认颜色
    border-width: @w;
    border-color: transparent transparent transparent @c;
    border-style: dashed dashed dashed solid;
}
//normal
.sanjiao2{
    width: 0;
    height: 0;
    overflow: hidden;
    .triangle(top,100px,#3a9);
}
//更简化的写法
.triangle(@_,@w:5px,@c:#ccc){
    width: 0;
    height: 0;
    overflow: hidden;
}
.sanjiao3{
    .triangle(bottom,100px);
}
//匹配模式 - 定位

.pos(r){
    position: relative;
}
.pos(a){
    position: absolute;
}
.pos(f){
    position: fixed;
}

.pipe{
    width: 200px;
    height:200px;
    background-color: #3a9;
    .pos(r);
}

//运算
@test_01:300px;
.box_02{
    width: @test_01 + 20; //320
}

//嵌套规则

//小实例,ul里有li,li里有a和span,css写法
// .list{}
// .list li{}
// .list a{}
// .list span{}

//less写法
.list{
    width: 600px;
    margin: 30px auto;
    padding: 0;
    list-style: none;
    li{
        height: 30px;
        line-height: 30px;
        background-color: pink;
        margin-bottom: 5px;
    }
    a{
        float: left;
        //&代表他的上一层选择器
        &:hover{
            color: red;
        }
    }
    span{
        float: right;
    }
}

//@arguments包含了所有传递进来的参数。如果不想单独处理每一个参数的话可以像这样写
//此法所用不多
.border(@w:30px,@c:red,@xx:solid){
    //普通写法
        //border:@w @c @xx;
    //@arguments写法
        border:@arguments;
}
.test_arguments{
    .border(5px,#3a9,dotted);
}

//避免编译
  //有时候需要输出不正确的css语法或者less不认识的语法
  //输出这样的值可以在字符串前加上一个~

.test_03{
    width: calc(300px - 30px); //这样写less会自动计算括号里的值 输出为 width: calc(270px);
    width: ~‘calc(300px - 30px)‘; //原封不动输出width: calc(300px - 30px),适用于滤镜等
}

//!important关键字，和混合模式混合使用，但是不建议使用，可以只做调试用
.test_important{
    .border!important;
}