Less简明笔记

1. 使用@新建变量

@link-color: #428bca; // sea blue
@link-color-hover: darken(@link-color, 10%);

在css中使用变量:

.link { color: @link-color;}

2. Mixins

首先定义样式:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

以后可在其他代码块中重复使用:

#menu a {
  color: #111;
  .bordered();
}.post a {
  color: red;
  .bordered();
}

3. 嵌套的新写法

原先的

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}

可以改写为嵌套写法:

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

4. 对于某一元素的伪选择器的样式,也可以使用 ‘&’ 嵌套在该元素的代码块中

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容