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

Posted 人鱼之森

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了less中遇到的一些特殊的写法相关的知识,希望对你有一定的参考价值。

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;
}

  

以上是关于less中遇到的一些特殊的写法的主要内容,如果未能解决你的问题,请参考以下文章

VS Code中自定义Emmet代码片段

项目总结二:关于项目中一些功能的优化

使用 'less' 命令时在 Unix 中显示特殊字符

leetcode_1292. Maximum Side Length of a Square with Sum Less than or Equal to Threshold_[二维前缀和](代码片段

创建自己的代码片段(CodeSnippet)

less