LESS与CSS结合的简单应用

LESS与CSS结合的简单应用

相关文档教程

1.https://less.bootcss.com/functions/
2.http://lesscss.cn/functions/#misc-functions

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