Less简单了解

最新推荐文章于 2022-03-28 09:06:31 发布

why_su

最新推荐文章于 2022-03-28 09:06:31 发布

阅读量159

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/why_su/article/details/86491127

版权

13 篇文章 0 订阅

订阅专栏

less需要编译成css运行，

①这种写法，一旦行数多起来，看起来不明晰

.box1{

}
.box1 .box2{

}

使用less 简写为嵌套形式：

.box1{
  .box2{
      
  }
}

如果要添加 :hover 的话，需要在前面添加 &

.box1{
  .box2{
    &:hover{

    }
  }
}

②可以使用 @变量名 代替 value值

@color:pink;
.box1{
  color: @color;
}

用 @代替 属性名 的话，需要使用 @{ 属性 } 来显示

@mar:margin;
.box1{
  @{mar}: 0 auto;
}

变量具有延迟加载，等到作用域内执行完毕，才赋值，下面的 width 的值为 2px;

@var:0;
.box1{
  @var: 1px;
  width: @var;
  @var: 2px; 
}

上面的 @var 代表的是 属性值，而不是属性名, 所以不使用 @{ } , 这里box1只设了一个属性值 width

.box1{
  width: 3px;
}

③ 混合 mix in , 抽离出共同代码，@变量名 表示形参，和函数一个思想：

不带参数：

可以写 .hunhe ，但解析成css时会被保留

.hunhe{
  width: 10px;
  height: 10px;
}
.box1{
   .hunhe;
}
.box2{
   .hunhe;
}

写 .hunhe() 解析成css时就不会保留它

.hunhe(){
  width: 10px;
  height: 10px;
}
.box1{
   .hunhe;
}
.box2{
   .hunhe;
}

带参数：

.hunhe(@w,@h){
  width: @w;
  height: @h;
}
.box1{
   .hunhe(10px,10px);
}
.box2{
   .hunhe(20px,20px);
}

参数可以带默认值, 使用冒号 :

.hunhe(@w:10px,@h:10px){
  width: @w;
  height: @h;
}
.box1{
   .hunhe(10px,10px);
}
.box2{
   .hunhe(20px,20px);
}

④ @arguments 视频里一句：还不如直接写呢，笑喷ヾ(◍°∇°◍)ﾉﾞ

原先是这样：每个参数都要写一遍

.hunhe(@width,@style,@color){
  border: @width,@style,@color;
}
.box1{
  .hunhe(1px,solid,black);
}

用 @arguments 可以直接代替要输入的参数：

.hunhe(@width,@style,@color){
  border: @arguments;
}
.box1{
  .hunhe(1px,solid,black);
}

避免编译： ~" " 波浪号和双引号

可以直接计算, 只需一个带单位就好

.box1{
  width: 100 + 100px;
}

⑤ 继承

例如现在 .box1有属性 width,height,color

.box1{
  width: 100px;
  height: 100px;
  color: red;
}

.box2 想要继承这三个属性可以使用 :extend(.box1)

.box2:extend(.box1){

}

也可以使用这种写法 &:extend(.box1)

.box2{
  &:extend(.box1);
}

假如 .box2:hover{ width: 200px; } 要继承 .box2 的 :hover的属性，那就使用 &:extend(.box1 all)

关注