LESS与CSS结合的简单应用

最新推荐文章于 2024-09-11 23:09:46 发布

原创

最新推荐文章于 2024-09-11 23:09:46 发布 · 400 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #LESS

本文探讨了如何将LESS预处理器与CSS结合使用，通过引用的相关文档教程和展示的LESS代码示例，揭示了LESS在简化CSS编写和提高效率方面的优势。

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

LESS与CSS结合的简单应用

LESS代码

@fontColor: #efefef;

@bgColor: pink;
@padding: 20px;
@borderColor: green;
@shadowColor: hotpink;

body {
  //color: @fontColor;
  //background: @bgColor;
}

.boxShadow(@style , @c) when (iscolor(@c)) {
  box-shadow: @style @c;
}

.boxShadow(@style ,@alpha) when (isnumber(@alpha)) {
  box-shadow: @style rgba(0, 0, 0, @alpha);
}

.myBox {
  box-shadow: 0 0 10px saturate(@shadowColor, 50%) inset;
  border: 1px solid lighten(@borderColor, 30%);
  div {
    .boxShadow(0 0 5px, 30%);
    padding: @padding;
  }
}

.myBox1 {
  box-shadow: 0 0 10px lighten(@shadowColor, 50%);
  border: 3px dashed saturate(@borde