Less

1. 安装和使用

Less安装和快速入门

2. 一些基本操作

2.1 定义变量

@pink: 1px solid pink;

#wrap {
  @w: 200px;
  width: @w;
  border: @pink;
}

// 编译后
#wrap { width: 200px; border: 1px solid pink; }

2.2 父选择器标识 &

#nav {
  &:hover {
    width: 200px;
  }
  #wrap & {
    color: pink;
  }
}

// 编译后
#nav:hover { width: 200px; }
#wrap #nav { color: pink; }

// 伪类为原始这种必须结合 & 来写sass，而 + - > 这种关联选择的不需要

2.3 混合器

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  .bordered();
}

// 编译后
#nav a { border-top: dotted 1px black; border-bottom: solid 2px black; }

2.4 @规则嵌套和冒泡

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

// 编译后
.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}