less常规操作,基本使用

JamFF

关注

阅读 51

2022-04-01

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;
  }
}

精彩评论(0)

0 0 举报