less常规操作，基本使用

最新推荐文章于 2022-04-01 18:52:45 发布

一蓑烟雨，一任平生

最新推荐文章于 2022-04-01 18:52:45 发布

阅读量351

点赞数

文章标签： vue.js javascript css3 less

本文链接：https://blog.csdn.net/m0_52952413/article/details/123897360

版权

1，嵌套

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

2，变量

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

3，混合Mixins

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered();
}
输入所需属性的类在其它规则可集中使用这些属性

4，转义

任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出，除非 interpolation。
@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}
从 Less 3.5 开始，可以简写为：
@min768: (min-width: 768px);
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}