Less使用

最新推荐文章于 2024-09-16 16:16:58 发布

云胡不喜？

最新推荐文章于 2024-09-16 16:16:58 发布

阅读量326

点赞数

CC 4.0 BY-SA版权

分类专栏： css3 文章标签： less css

本文链接：https://blog.youkuaiyun.com/qq_33242126/article/details/81947986

css3 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种LESS预处理器的使用方法，通过定义变量和混合选择器来创建可复用的按钮样式，并展示了如何在实际项目中调用这些样式。

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

1.base.less

@base-color: #84C795;
@dis-color: #b5b5b5;
@hover-color: rgb(103, 161, 117);
@bg-color: #F1F1F1;
@font-color: #514F4E;

.button (@width, @height, @fontSize) {
    width: @width;
    height: @height;
    border: 0;
    background: @base-color;
    color: #fff;
    font-size: @fontSize;
    outline: none;
    cursor: pointer;
    border-radius: 5px;
    &:hover {
        background: @hover-color;
    }
}

2.style.less-使用

.bank-nextBtn {
  margin-left: 15px;
  .button(@width: 100px, @height: 40px, @fontSize: 16px);
}
.back-btn {
  margin-left: 15px;
  font-size: 12px;
  color: @font-color;
  &:hover{
    cursor:pointer;
    color:@base-color;
  }
}