less中遇到的一些特殊的写法

Posted 2021-05-25 人鱼之森

1、为了重复使用CSS，例子如下：

.my-inline-block() {
  display: inline-block;
  font-size: 0;
}
.thing1 {
  .my-inline-block;
}
.thing2 {
  .my-inline-block;
}

注：来自less的官网https://less.bootcss.com/features/#variables

 2、Less中的darken

它降低了元素中颜色的亮度。 它有以下参数：

• color ：它代表颜色对象。

• amount ：它包含0 - 100%之间的百分比。

• 方法：它是可选参数，通过将其设置为相对，用于相对于当前值进行调整。

 例子如下：

.myclass1{
   height:100px;
   width:100px;
   padding: 30px 0px 0px 25px;
   background-color: hsl(80, 90%, 20%);
   color:white;
}

.myclass2{
   height:100px;
   width:100px;
   padding: 30px 0px 0px 25px;
   background-color: darken(hsl(80, 90%, 20%), 10%);
   color:white;
}