Less | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第三天

Q:What is less?

A:It is css,with a little more.

Less简介

Less(Leaner Style Sheets 精简样式表) 是一种动态样式语言，属于 css 预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展，Less 既可以在 客户端 上运行 ，也可以借助 Node.js 在服务端运行。

注释

less文件最终需编译成css文件，而其中的注释会不会也被编译呢？ 我们都知道注释两种方式： 其中//编译后，css文件无。 //我是见不得人的注释 而/* */编译后，css文件里面依然存在。 /*编译后css文件依然可以找到我*/

变量

变量的声明通常以@开头，例如要声明一个color变量，则为 @color 变量通常可为属性、属性值、选择器（较少用到）、url等。

延迟加载 这是less需要注意的一点，即一个变量如果被声明了多次则变量的值以最后一次为主，并从当前作用域往外寻找变量。

@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var; //这里是3
    @var: 3;
  }
  one: @var;
}

嵌套

less文件里的嵌套代表了选择器之间的父子关系，提高编码效率，使嵌套关系清晰无需通过html文件来判断。

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

编译成css文件后：

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

&

在嵌套规则中， & 表示父选择器，常用于给现有选择器添加伪类。

.header {
  a {
    color: blue;
    &:hover {
      color: green;
    }
  }
}

其中有关hover的属性为 .header a：hover
除此之外，& 还能用于生成重复类名。

混合

混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方式，可理解为复制粘贴。
普通混合

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

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

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

.bordered(); 通过调用，减少代码量，界面更加简洁，复用性高。其实相当于把.bordered的代码复值粘贴到调用的地方。
带参数的混合
参数需要按顺序排列

.border(@width, @style, @color) {
  border: @width @style @color;
}
div {
  .border(1px, solid, #ccc);
}

当然参数可以设定默认值

.border(@width:10px, @style:solid, @color:pink) {
  border: @width @style @color;
}
div {
  .border(1px, solid, #ccc);
}

arguments变量

.box-shadow(@x: 0, @y: 0, @blur: 1px, @color: #000) {
  -webkit-box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  box-shadow: @arguments;
}
.big-block {
  .box-shadow(2px, 5px);
}

arguments变量包含了所有的变量——@x, @y, @blur, @color

继承

• 继承可让多个选择器应用同一组属性，最终编译为并集选择器
• 其性能比混合高，但灵活性比混合低

nav ul {
&:extend(.inline);
background: blue;
}
.inline {
color: red;
}

避免编译

通过加引号可以避免 Less 编译，直接把内容输出到 CSS 中

.banner .inline .header {
  width: '100px + 100px';//css文件中原封不动
  height: 100px + 100px;
}