0
点赞
收藏
分享

微信扫一扫

less常规操作,基本使用

JamFF 2022-04-01 阅读 51

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

相关推荐

less基本使用

关于less的基本使用

Git常规操作

excel常规操作

HDFS常规操作

文件的常规操作

5.liunx操作---常规操作

Linux常规操作命令

0 条评论