2024-01-17 less 基本用法【变量嵌套函数混合】

拂晓东夕

于 2024-01-17 17:02:19 发布

阅读量447

点赞数 8

文章标签： less 前端

本文链接：https://blog.youkuaiyun.com/weixin_48364327/article/details/135655086

版权

本文介绍了LessCSS预处理器的基本用法，包括变量的使用、混合样式、嵌套规则以及自定义函数示例，展示了如何通过Less扩展CSS并提高代码复用性。

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

less 基本用法

变量

@color:"#fff";

.nav{
    color:@color;
}

混合

.common{
    height:10px;
    width:10px;
}

.post{
    color:red;
    .common()
}

.common 不参与编译 只调用其中的样式

嵌套

.header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

函数

.funcEqu(@className, @item,@width) {
  .@{className} {
    width: @width;
    top: 50%;
    @{item}: 0;
    transform: translate(0, -50%);
    height: 60px;
    border-radius: 3px 0 0 3px;
  }
}

.funcEqu(btn-right-table, right,100px); 
.funcEqu(btn-left-table, left,200px);