less学习

less是一种css预编译工具,极大的提高了我们编写代码的效率

注释:

//这是不想暴露的注释
/*
这是想暴露的注释
*/

变量:

使用@声明变量,如@color:red 使用时直接使用@color

  • 普通属性值直接使用
  • 作为属性、选择器名、URL时需添加{}(一般不将属性或者选择器作为变量)
@property:width;
@selector:#inner;
#box{
    @{property}: 100px;
    height: 100px;
    background-color: red;
    @{selector}{
      width: 50px;
      height: 50px;
      background-color: blue;
    }
  }
  • 变量具有延迟加载和块级作用域
//less
@var:0;
#box{
    @var:2;
    #inner{
        @var:3;
        width: @var;
        @var:4;
     
    }
    width: @var;
  }
//编译结果
#box {
  width: 2;
}
#box #inner {
  width: 4;
}

嵌套:

使用&与父级为平行关系

#box{
    width: 100px;
    height: 100px;
    background-color: red;
    #inner{
      width: 50px;
      height: 50px;
      background-color: blue;
      &:hover{
          background-color: yellow;
      }
    }
  }

上边例子为inner添加hover,如果不使用&则inner和:hover是与#box和#inner相同的上下级关系,不添加&的编译结果为:

#box {
  width: 100px;
  height: 100px;
  background-color: red;
}
#box #inner {
  width: 50px;
  height: 50px;
  background-color: blue;
}
#box #inner :hover {
  background-color: yellow;
}

混合

当有重复代码时,可以使用混合,混合就是将一系列属性移植到另外的容器

  • 不带输出的混合
//混合创建方式 如果不加括号会在css 中出现,也称其为普通混合
.hunhe(){
    width: 50px;
    height: 50px;
    background-color: blue;
    &:hover{
        background-color: yellow;
    }
}
#box{
    width: 100px;
    height: 100px;
    background-color: red;
    #inner{
     .hunhe;
    }
    #inner1{
        .hunhe;
    }
  }

编译结果:

#box {
  width: 100px;
  height: 100px;
  background-color: red;
}
#box #inner {
  width: 50px;
  height: 50px;
  background-color: blue;
}
#box #inner:hover {
  background-color: yellow;
}
#box #inner1 {
  width: 50px;
  height: 50px;
  background-color: blue;
}
#box #inner1:hover {
  background-color: yellow;
}

  • 带参数的混合
.hunhe(@width,@height,@color){
    width: @width;
    height: @height;
    background-color: @color;
    &:hover{
        background-color: yellow;
    }
}
#box{
    width: 100px;
    height: 100px;
    background-color: red;
    #inner{
     .hunhe(100px,100px,blue);
    }
    #inner1{
        .hunhe(50px,50px,green);
    }
  }

参数也可以设置默认值

.hunhe(@width:10px,@height:10px,@color:pink){
    width: @width;
    height: @height;
    background-color: @color;
    &:hover{
        background-color: yellow;
    }
}
#box{
    width: 100px;
    height: 100px;
    background-color: red;
    #inner{
     .hunhe(100px,100px,blue);
    }
    #inner1{
        .hunhe(50px,50px,green);
    }
  }
  • 命名参数
    当形参和实参不在同一位置时,可以使用命名参数指定
.hunhe(@width:10px,@height:10px,@color:pink){
    width: @width;
    height: @height;
    background-color: @color;
    &:hover{
        background-color: yellow;
    }
}
#box{
    #inner1{
    //hunhe 有三个参数,但是只想指定color
        .hunhe(@color:green);
    }
  }
  • 匹配模式

可以使用import './utils.less'的方式引入其他less 文件

现在需求可以生成不同方向三角形

//index.less
@import './utils.less';

#box{
    #inner{
        .triangle(L,40px,red);
    }
  }
//utils.less
//使用@_方式在调用.triangle混合的时候会调用该混合
.triangle(@_){
    width: 0px;
    height: 0px;
    overflow: hidden;
}
.triangle(L,@width,@color){
    border:@width solid;
    border-color:transparent @color transparent transparent; 
}
.triangle(R,@width,@color){
    border:@width solid;
    border-color:transparent @color transparent transparent; 
}
.triangle(T,@width,@color){

    border:@width solid;
    border-color:transparent @color transparent transparent; 
}
.triangle(B,@width,@color){
    border:@width solid;
    border-color:transparent @color transparent transparent; 
}
  • arguments

less 混合也有arguments

.border(@width,@type,@color){
    border:@arguments
}
#box{
    #inner{
        .border(10px, solid, red)
    }
  }

计算

less 里可以进行正则运算

//less
#box{
    #inner{
        width: (100 + 100px);
    }
  }
//编译结果
#box #inner {
  width: 200px;
}

继承

先看一个例子:

#box{
    .inner{
        width: 50px;
        height: 50px;
        position: absolute;
         &:nth-child(1){
            background-color: yellow;
        };
        &::nth-child(2){
            background-color: yellowgreen;
        }
    }
   
  }

inner和inner1有相同的相似的地方,所以我们把相同的地方写成混合

.mixin{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;

}


#box{
    .inner{
       .mixin();
   
        &:nth-child(1){
            background-color: yellow;
        };
        &::nth-child(2){
            background-color: yellowgreen;
        }
    }
   
  }

编译完成的css

#box .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
#box #inner:nth-child(1) {
  background-color: yellow;
}
#box #inner::nth-child(2) {
  background-color: yellowgreen;
}


也可以使用继承,使用extend进行标识下边集合会继承该混合属性

.mixin{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;

}

#box{
    .inner:extend(.mixin){
        &:nth-child(1){
            width: 50px;
            height: 50px;
            background-color: yellow;
        };
        &::nth-child(2){
            width: 50px;
            height: 50px;
            background-color: yellowgreen;
        }
    }
   
  }

现在想往所有继承标签上添加hover事件

.mixin{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    &:hover{
        background-color: brown;
    }
}

如果直接这样写,inner是不会继承hover的只有mixin继承,这个时候需要添加标识符all

.mixin{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    &:hover{
        background-color: brown;
    }
}


#box{
    .inner:extend(.mixin all){
        &:nth-child(1){
            width: 50px;
            height: 50px;
            background-color: yellow;
        };
        &::nth-child(2){
            width: 50px;
            height: 50px;
            background-color: yellowgreen;
        }
    }
   
  }

继承会将所有的元素带上该集合的样式,如果是直接调用则只有该集合下有,如上下边的例子

#box{
    .inner{
    	//1.使用混合调用
    	.mixin();
    	//2.使用继承
    	&:extend(.mixin all);
        &:nth-child(1){
            width: 50px;
            height: 50px;
            background-color: yellow;
        };
        &::nth-child(2){
            width: 50px;
            height: 50px;
            background-color: yellowgreen;
        }
    }
   
  }

第一种方法编译结果为#box .inner 附带.mixin混合的属性,
第二种方法编译结果为#box .inner,.mixin,#box inner:nth-child(1),#box inner:nth-child(2)携带混合的属性

避免编译

#box{
   .inner{
       width:~"100 + 100px";
   }
  }
#box .inner {
  width: 100 + 100px;
}

less虽然具有表明css结构的目的,但是在开发中需要注意尽量减少嵌套三层以上的样式,会造成性能的降低

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值