LESS笔记

1.Less是基于JS编译的，不能直接使用的样式表

2.Less可以定义变量，在作用域中使用，并且部分变量可进行运算

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

 

　　输出：

#header {
  color: #6c94be;
}

3.可以在一个类名中引用另一个类名来复用它的样式

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

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

4.为了代码的可读性可以进行类名声明时嵌套

　　未嵌套前：

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

　　嵌套后：

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

5.在类名嵌套声明时可以使用“&”符号来表示它的父级

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

6.进行运算时的规律

// numbers are converted into the same units
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is 1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // result is 4px

// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%

　　当运算不能转换时，以第一个单位为准

@base: 2cm * 3mm; // result is 6cm

7.颜色运算时规律

@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355

8.Less内置了多种函数用于转换颜色、处理字符串、算术运算等。

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // 将0.5转换为50%
  color: saturate(@base, 5%);    //将颜色饱和度增加5%
  background-color: spin(lighten(@base, 25%), 8);  //亮度降低25%,色相增加8
}

9.作用域问题，和JS一样，就近原则

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

10.选择器也可以预定义

// Variables
@mySelector: banner;

// Usage
.@{mySelector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

　　输出后

.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

11.URLs预定义和调用

// Variables
@images: "../img";

// 用法
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

12.在一个Less中可以引用另一个Less，但是小心会有属性复写问题

// library
@base-color: green;
@dark-color: darken(@base-color, 10%);

// use of library
@import "library.less";
@base-color: red;   //base-color被重写，dark-color也被覆盖为dark-red

13.继承属性Extend，必须被写在最后

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

　　上例也可以写成

nav ul:extend(.inline) {}

 

　　输出后：

nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}

14.继承外部使用!important的时候所有属性都将加上!important

.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
}
.unimportant {
  .foo(1);
}
.important {
  .foo(2) !important;
}

　　输出后：

.unimportant {
  background: #f5f5f5;
  color: #900;
}
.important {
  background: #f5f5f5 !important;
  color: #900 !important;
}

15.类名后面加括号只能挡模板，不能被输出使用

.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}

　　输出后：

.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}
The