less使用方法_less ::selection-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_60178319/article/details/123970563

这篇博客介绍了Less预处理器的基本概念，包括变量(@color, @m)、选择器(@selector)的定义和使用。文章通过实例展示了如何设置margin、padding、颜色等样式，并利用&符号进行嵌套选择器操作。此外，还详细讲解了Mixin混和功能，如.juZhong()，以及如何在不同组件中调用和传递参数。最后，演示了如何创建自定义三角形边框并应用到实际项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@color: pink;
@m: margin; //margin属性
@selector: #warp; //warp是盒子名
* {
  @{m}: 0; //等同于margin:0,需要@{}包裹
  padding: 0;
}
@{selector}{   //@{selector}等同于 #warp,需要@{}包裹
  width: 300px;
  height: 400px;
  background-color: @color;  //@color 前面定义的pink
  #box1{
    background: palevioletred;
    &:hover{  //当鼠标移入box1颜色改变
      background:indianred;
    }
  }
}

//当两个变量具有相同的元素  Mixin 混和
.juZhong(@w:10px,@h:20px,@c){  //可以传入默认值，当调用不传的时候不会报错
  margin:auto;
  width: @w;  //宽度
  height: @h;
  color: @c;
}
.father{
  display: flex;
  .son{
    .juZhong(100px,100px,pink) ; //调用外部定义的
        &:nth-child(1){
        width: 100px; 
        }
  }
}

//当需要自定义的某些参数时候
 // 以下是在style文件夹中
.triangle(@_){
  width: 0px;
  height: 0px;
  overflow: hidden;
}
.triangle(R,@w,@c){
  border-width:@w ;
  border-style: dashed solid dashed dashed;
  border-color: transparent @c transparent transparent;
}
.triangle(L,@w,@c){
  border-width:@w ;
  border-style: dashed  dashed solid dashed;
  border-color: transparent transparent  @c transparent;
}
//以下是在项目css中调用
@import './style.less';  
#warp .sjx{
  .triangle(R,40px,yellow)  //只要写一个，就会去匹配之前的。
}