DEFINITELY MAYBE

SASS/LESS语法简明对比

Thu, 26 Feb 2015 14:36:00 +0000

前言

网页的布局和样式是由css来决定的，当网站规模比较大元素比较多的时候，css的量级也会变得很庞大，css代码将变得难以维护，于是就出现了css预处理器，通过加入一些类似编程语言的特性，让编写css变得更高效更易于维护。和less一样，sass也是一种流行的css预处理器。sass总体上和less差不多，但是比less使用者更多，因为其对css兼容性更好。

以下结合sass官方文档和less做一个简单的对比，每一小节如果两者用法有区别则用表格列出方便对比。

运行sass

首先推荐一个sass在线编译器，可以用这个做测试

命令行

在本地命令行里运行sass，需要首先安装ruby（这里就不多做介绍了），ruby装好用gem安装sass包：

gem install sass

然后就可以使用sass了，比如：

sass foo.scss foo.css

上面的命令将foo.scss文件编译为foo.css样式文件；文件后缀名scss意思是sassy css，强调sass对css代码的完全兼容

sass的编译选项：nested（默认值）、expanded、compact、compressed （可以望文生义一下）

设置编译选项：

sass --style compressed foo.sass foo.css

可以自动检测文件或文件夹变动并生成编译后的css

自动检测文件：

sass --watch foo.scss:foo.css

自动检测文件夹：

sass --watch app/sass:app/css

sass语法和scss语法可以互相转换：

sass-convert style.sass style.scss

sass-convert style.scss style.sass

sass和scss

sass语法写起来更简洁，去掉了大括号和分号，而使用缩进和换行来处理语义间隔；这点类似coffeeScript或者python，看下面的sass的例子：

.some-class
  color: red
  background-color: #fff

scss全称是sassy css，写起来跟更接近css，除此之外它和sass没有区别；上面的代码用scss写出来是这样的：

.some-class {
  color: red;
  background-color: #fff;
}

可以看出，在没使用sass的扩展特性情况下，scss写法和css没有区别

以下不做特别说明则sass均使用scss的书写方式

变量

变量定义：$my-color: #fff; （less用@定义和调用变量）

变量调用：

div {
  color: $my-color;
}

作为字符串

变量用于字符串，使用#{$var-name}调用，和less的@{var-name}类似：

$my-attr: "color";

// 使用变量
div {
  #{$my-attr}: #fff;
}

注意上面的#{$my-attr}会被编译为color，但如果是less则会保留"color"的双引号，变成"color": #fff

变量作用域

变量作用域是和层级相关的，内嵌的变量不能被外层的变量看到；除非为内嵌的变量加上!global全局声明，如：

#mine {
  $width: 5em !global;    // 全局变量
  width: $width;
}

#div {
  width: $width;
}

设置默认值

使用!default为变量设置默认值，这样如果前面有赋值则不会使用该值，如果没有赋值则使用该值作为变量的值

$content: '1st val';
$content: '2nd val' !default;
$new-content: '3rd val' !default;

注释

和less一样，可以使用css的块注释/* comments */，也可以使用一般编程语言中都用到的行注释// commments

块注释会被输出到css中，行注释不会

块注释不会被输出到compressed css中，除非块注释的第一个字符是!，如：

/*! this is final output */

运算

运算和less没有区别

div {
  padding: (5px * 2);
  width: (100px + 400px);
}

父元素和嵌套

父选择符&

和less一样，sass允许层级嵌套，并且可以引用父元素；在less中引用父元素使用&，在sass中引用父元素也是用&

&在less和sass中使用上的区别如上表所描述的，less可以将&插入到一个名字中的任何位置：

.some-class {
  my-&-free: {
    color: red;
  }
}

上面这样的事情sass是做不到的，sass中&只能作为名字的前缀：&-some-content，而不能是foo-&-bar

合并值

对于font这样的符合属性，可以使用namespace font来实现

.some {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
}

用sass可以这样写：

.some {
  font {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

名字空间也可以是已经赋了值的：

.some {
  font: fantasy, 30em {
    weight: bold;
  }
}

上面的形式编译成css是这样的（保留已赋值部分，块里面的属性则每条单独用font-xxx的方式添加）：

.some {
  font: fantasy, 30em;
  font-weight: bold;
}

@midia嵌套

和less一样，@media可以嵌套在css规则集内部，也可以嵌套在另一个@media的里面（类似less的@media冒泡）

继承

sass和less都包含选择器继承，但是用法上稍有区别；less使用:extend()伪类作为继承方式，而sass中使用@extend xxx;语句

仅用于继承的选择器：place holder selectors

仅用于继承的选择器，不作为css输出（less中有仅用于继承的mixin）：

.some-ct %some-class {
  color: red;
}

.mine {
  @extend %some-class;
}

编译成css为：

.some-ct .mine {
  color: red;
}

less和sass在继承内嵌选择器上的区别

less可以继承复杂选择器，而sass的继承对象不能是复杂选择器如.a .b或者.a + .b，因此less和sass在内嵌选择器的匹配规则上区别较大：

less在继承上的匹配是精确匹配，继承的时候必须指定继承的内嵌选择器的名字空间（父选择器）；而sass在匹配上则是尽量满足更多的可匹配选择器，包括自动去内嵌选择器中去寻找可能的匹配，比如：

.some-ct .some-class {
  color: red;
}

.mine {
  @extend .some-class;
}

编译为：

.some-ct .some-class, .some-ct .mine {
  color: red;
}

自动匹配了内嵌的.some-class，并做了替代。注意这里@extend .some-class如果放在less里（:extend(.some-class)）是匹配不到.some-ct .some-class的，只有:extend(.some-ct .some-class)才可以匹配到。而在sass里只能采取这种方式（@extend .some-class;而不是@extend .some-ct .some-class），原因是sass里不能继承.a .b或.a + .b这种带层级的选择器，因此如果用@extend .some-ct .some-class就会报错。

.some-ct .some-class {
  color: red;
}

.mine {
  @extend .some-ct .some-class;
}

上面的代码会直接报错：can't extend nested selectors

另外，当继承目标选择器的时候，自身是在一个内嵌选择器序列中，则如果继承目标也是在内嵌序列中，则会发生合并序列，如下：

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}

编译后：

#admin .tabbar a,
#admin .tabbar #demo .overview .fakelink,
#demo .overview #admin .tabbar .fakelink {
  font-weight: bold; }

如果两者序列中包含重合的部分，则会合并重合的部分：

#admin .tabbar a {
  font-weight: bold;
}
#admin .overview .fakelink {
  @extend a;
}

编译后：

#admin .tabbar a,
#admin .tabbar .overview .fakelink,
#admin .overview .tabbar .fakelink {
  font-weight: bold; }

多重继承

@extend .a;
@extend .b;

// or
@extend .a, .b;

!optional

继承出错时可以避免报错：如当一个a元素去继承一个h1.xxx的元素，这时会因为a和h1冲突无法继承而报错；加上!optional;可以避免报错。

#context h1.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; }

a.important {
  @extend .notice !optional;
}

在media内部使用继承

和less一样，在@media内部使用@extend只能匹配到该media块内部的选择器，而不能匹配到外部的选择器

@at-root指令

将@at-root { … }的规则放到根层级去

@at-root { … }
@at-root (without: media) { … } 放到@media指令外面去
@at-root (without: media supports) { … } 放到@media和@supports指令外面
@at-root (without: rule) { … } 不带上父选择器
@at-root {with: rule} { … } 带上父选择器
@at-root (without: all) { … } 放到所有指令和规则外

mixin

less中只要是简单类选择器或者id选择器就可以拿来作为mixin在别的地方调用，调用方式也是简单的mixin();，而sass中使用了两个关键字，@mixin和@include，其中@mixin用于声明一个mixin，而@include用于调用一个mixin

和less一样，sass也可以向mixin传递参数，也可以设置默认参数值

独立规则集

向mixin传递的参数为独立规则集时，less和sass有点区别，less是当做一个参数传递的，在定义mixin时需要声明一个形参，并在mixin内部调动该形参即可，比如：

.desktop-and-old-ie(@rules) {
  @media screen and (min-width: 1200) { @rules(); }
  html.lt-ie9 &                       { @rules(); }
}

header {
  background-color: blue;

  // 这里直接将{ background-color: red; }这个独立规则集传递给了mixin
  .desktop-and-old-ie({
  background-color: red;
  });
}

而同样的.desktop-and-old-ie(@rules)的在sass里是这样声明的：

@mixin desktop-and-old-ie {
  // 使用@content调用独立规则集
  @media screen and (min-width: 1200) { @content; }
  html.lt-ie9 &                       { @content; }
}

header {
  background-color: blue;

  // 这里直接将{ background-color: red; }这个独立规则集传递给了mixin
  // 注意和less的区别，没有括号
  @include desktop-and-old-ie {
  background-color: red;
  };
}

注意传递独立规则集给mixin的时候，该独立规则集（这里是延用less的名词，在sass里这个叫做block content）内部的变量和mixin的作用域是定义该独立规则集的外围作用域，例如：

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { color: $color; }
}

这里@include colors { color: $color; }的$color不会去找mixin内部的$color:blue而是找独立规则集外围的作用域$color:white，因此编译出来的css如下：

.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}

函数

预置函数

less和sass中都提供了各种预置函数，比如lighten()，darken()等，调用的方法也是一样的，直接调用就可以了，比如：

div {
  color: lighten(#000, 10%);
}

自定义函数

less使用mixin达到和函数类似的效果，而sass使用@function关键字来定义自定义函数：

@function sum($a, $b) {
  @return $a + $b;
}

.some-class {
  $a: 10px;
  $b: 20px;
  width: sum($a, $b);
}

注意@function中使用@return返回结果

上面的例子在less中可以这样实现：

.sum(@a, @b) {
  @sum: @a + @b;
}

.some-class {
  @a: 10px;
  @b: 20px;
  .sum(@a, @b);
  width: @sum;
}

建议：在定义函数时为了方便与变量或者mixin区别开来（避免名字冲突），可以给函数加前缀，比如你是3dobe公司的，定义sum函数，可以使用-3dobe-sum作为函数名

函数的参数

调用的时候使用命名参数方式调用，则参数顺序可以打乱，如myFunc($var2: val2, $var1: val1);；这点和less的mixin调用里明确参数名字的调用方式是一致的

导入（import）

和sass一样，也是使用@import来导入文件

四种直接编译为css @import的情况

导入文件后缀名为.css
文件路径以http://开头
文件路径为url(…)
@import声明带有media query

这四种形式分别如下所示：

@import "foo.css";
@import "http://foo.com/bar";
@import url(foo);
@import "foo" screen;

编译后：

@import url(foo.css);
@import "http://foo.com/bar";
@import url(foo);
@import "foo" screen;

条件语句

less使用guards进行条件判断（包括mixin guards和css guards），sass使用@if、@else语句进行判断：

$test: true;

div {
  @if ($test) {
    color: green;
  } @else {
    color: red;
  } 
}

等于符号和less的差别：less是=，而sass是==

循环

less里的循环是使用when判断条件，在mixin里先更新条件然后继续调用自身来实现的，类似一般编程语言中的while结构；而sass里实现循环则使用@for、@while或者@each关键字：

@for指令

@for $i from 1 through 10 {
  .class-#{$i} {
    background-color: darken(#eee, 10% * $i);
  }
}

@for循环有两种格式：

@for $var from <start> through <end> { ... }
@for $var from <start> to <end> { ... }

两者区别在于through会包括最后的<end>而to则不会包含最后的<end>

@while指令

$i: 0;
@while $i < 10 {
  $i: $i + 1;
  .class-#{$i} {
    background-color: darken(#fff, 10% * $i);
  }
}

@each指令

@each $i in 1,2,3,4,5,6,7,8,9,10 {
  .class-#{$i} {
    background-color: darken(#fff, 10% * $i);
  }
}

语法：@each $var in <list or map> { ... }

这里<list or map>是SassScript的两个类型：

list：(item1, item2, item3, ...)，也可以是多值列表：(item1a, item1b, item1c), (item2a, item2b, item2c), ...；list除了用逗号,分隔，还可以用空格分隔，如0 2px 0 2px，注意空格的优先级高于逗号，如1 2, 3相当于(1 2), 3

list可以使用list functions做处理

来个多值列表的例子：

@each $animal, $color, $cursor in (puma, black, default),
                (sea-slug, blue, pointer),
                (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

编译出来的css如下：

.puma-icon {
  background-image: url("/images/puma.png");
  border: 2px solid black;
  cursor: default;
}

.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
  border: 2px solid blue;
  cursor: pointer;
}

.egret-icon {
  background-image: url("/images/egret.png");
  border: 2px solid white;
  cursor: move;
}

map：(key1: val1, key2: val2, key3, val3)；map可以用map functions，也可以当做(key1 val1, key2 val2, key3 val3)的list，调用list function

比如：

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

其他指令

@debug 输出一个表达式的值，比如@debug 10em + 12em;

@warn 输出一条警告信息，比如@warn "this is a warning"

@error 抛出一条错误信息，比如@error "this is a error"

LESS之旅：简明教程

Tue, 03 Feb 2015 17:53:00 +0000

说明：下图是我根据less 2.3.1官方文档画的less知识点脑图，看这个图可以对less的基本语法和概念有一个大致的了解和初步印象，当然也可以略过脑图直接看下面的文字；如果想看更加详细的脑图（全部结点都展开）可以点图片下面的链接

–» 点击查看详细大图 «–

在正式介绍less之前，推荐一个Less在线测试器：lesstester，可以将less在线转换成css代码，使用起来很简单，把less代码贴到编辑区，按ctrl+enter编译出来的css就会出现在右边。如果代码有问题则右边会报错，也有可能默默的把错误吞了什么也不提示。下面正式开始less之旅

1. 注释（Comments）

和css不同，less可以使用行注释// ...，而css只能使用块注释/* ... */

2. 变量（Variables）

在一个地方管理常用的值。

2.1 变量用于数值管理

定义变量：@var-name: value; （变量只能定义一次）

使用变量：用变量替换值，注意加@符号attribute: @var-name;，如：

@my-color: #fff;
body {
  color: @my-color;
}

使用变量可以使css变得易于维护，因为css里一般相同的值可能重复很多遍，抽离出来做为变量将很大程度方便修改

LESS的变量是延迟加载（lazy loading）的，即定义变量的语句可以是在使用变量之后，使用前不一定要预先声明

同一作用域内的同一变量定义如果重复了，后面定义的会覆盖前面定义的

变量插值（Variable Interpolation）除了用于数值管理，还可以用于选择器名称、属性名、URLs以及@import语句；注意用于选择器名、属性名、URL、@import语句（其实也是替换URL）都要在两边加大括号@{var-name}如：

2.2 变量用于选择器名

// 用于选择器名
@test-class-name: classA;
#header {
  color: blue;
  .@{test-class-name} {   // 即.classA
    color: red;    
  }
}

2.3 变量用于属性名

// 用于属性名
@property-name: color;
#footer {
  @{property-name}: blue;
  background-@{property-name}: #999;
}

2.4 变量用于URLs

// 变量定义URL前缀
// 注意一定要加双引号
@images: "../img";

// 用法
body {
  color: #444;
  background: url("@{images}/white-sand.png");
  // 也可以去掉url("")里的双引号
  // background: url(@{images}/white-sand.png);
}

2.5 变量用于Import语句

@themes: "../../src/themes";

// 用法
@import "@{themes}/my-theme.less"
body {
  color: #444;
  background: url("@{images}/white-sand.png");
  // 也可以去掉url("")里的双引号
  // background: url(@{images}/white-sand.png);
}

3. 运算（Operations）

任何数值、颜色、变量都可以运算

示例如下：

/*变量运算*/
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

@var: 1px + 5;  /*结果为6px*/

/*颜色和数值运算*/
color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

4. 函数（Functions）

Less提供了一些用于处理颜色、字符串和算术运算的函数

例子如下：

@base: #f04615;
@width: 0.5;

.some-class {
  width: percentage(@width); /*percentage转换为百分数即50%*/
  color: saturate(@base, 5%); /*饱和度+5%*/
  background-color: spin(lighten(@base, 25%), 8); /*亮度提升25%，接着色相增加8*/
}

5. 混合（Mixins）

mixin: 将一系列属性从一个规则集引入另一个规则集，方式如下：

.bordered {
  border: 1px solid black;
}

.mixin-class {
  color: #000;
  .bordered();
  // 或者不加括号“()”，如下：
  // .bordered;
}

编译出来是这样的（即相当于将.bordered里的规则复制到.mixin-class里了）：

.bordered {
  border: 1px solid black;
}

.mixin-class {
  color: #000;
  border: 1px solid black;
}

可以混入的选择器只有类选择器和id选择器，混入id选择器的例子：

#some-id {
  color: red;
}
.mixined {
  #some-id;
}

5.1 创建一个不能被输出的mixin

要让某个mixin只用来混入（纯粹用来做mixin的），而不用来作为单独的一个css规则集输出到编译好的css中，则在该mixin的选择器名字后面加上括号()即可，如：

#output {
  color: red;
}
#not-output() { // 注意这里加了括号
  border: 1px solid black;
}
.mixined {
  #output;
  #not-output;
}

编译出来的css如下：

#output {
  color: red;
}
.mixined {
  color: red;
  border: 1px solid black;
}

可以看到上面的#not-output选择器，如愿的没有出现在编译出来的css当中

5.2 mixin中内嵌选择器

mixin中嵌套的子选择器可以一并混入到目标选择器中，如下代码所示，将上面的代码稍作修改：

#output {
  color: red;
  .inner {
    background-color: red;
  }
}
.mixined {
  color: red;
  border: 1px solid black;
}

这里.inner是会混入的，结果是增加了一条#output .inner的规则，即#output .inner { background-color:red; }，编译结果如下：

#output {
  color: red;
}
#output .inner {
  background-color: red;
}
.mixined {
  color: red;
  border: 1px solid black;
}

5.3 使用名字空间

对于需要混入某个内嵌的选择器的规则，则混入的时候需要使用名字空间，如：

#outer {
  .inner {
    color: red;
  }
}
.mixined {
  #outer > .inner; // 混入.inner的规则
}

注意以下这些方式（是否带括号，以及是否带>或者空格）效果是一致的：

#outer > .inner;
#outer > .inner();
#outer .inner;
#outer .inner();
#outer.inner; // 两名字之间的空格居然可以去掉！
#outer.inner();

根据上面的规则我发现一个比较奇葩的现象：

.a.b {
    color: blue;
}

.a {
    .b {
        color: green;
    }
}

.d {
    .a.b; // 或者改成.a > .b结果都一样
}

编译出来的css居然是：

.a.b {
  color: blue;
}
.a .b {
  color: green;
}
.d {
  color: blue;  // 这条有点莫名其妙
  color: green;
}

结果很奇怪，向less项目提了条issue，希望后续能搞明白怎么回事，估计是个bug；总之尽量不要这么写就是了 看issue的回复，这个不是bug而是设计的feature

下一节嵌套规则也会讲到名字空间（名字空间和访问器）

5.4 mixin后面加上!important

在mixin调用语句的后面加上 !important ，将mixin的规则都加上!important

.mix {
  color: red;
}

.some-class {
  .mix !important;
}

编译成css的结果如下：

.mix {
  color: red;
}
.some-class {
  color: red !important;
}

5.5 带变量参数的mixin

mixin里可以加入变量参数，如下：

.border-radius(@radius) {
  -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
      border-radius: @radius;
}

在混入的时候可以向这个变量传值：

#header {
  .border-radius(4px);
}

可以为@radius设置默认值，比如

.border-radius(@radius: 4px) {
  -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
      border-radius: @radius;
}

在用于混入的选择器右边加括号，但是不向括号里加变量参数，可避免在编译的css里输出这些规则，只是用于做mixin，即上面所述的创建一个不能被输出的mixin

在调用mixin的时候，多个参数可以使用分号;或者逗号,隔开，推荐使用分号;因为逗号会和css的列表混淆：

当使用了逗号，但没有用分号，则逗号按mixin分隔符号来解析
当同时使用了逗号和分号，则分号按mixin分隔符号来解析，逗号当做css list的分隔符号，例如：

.name(1, 2, 3; something, else); // 相当于传递了2个变量，一个是"1,2,3"的值列表，一个是"something,else"的值列表
.name(1, 2, 3); // 传递了3个变量，分别是1, 2和3
.name(1, 2, 3;); // 传递了1个变量，即"1,2,3"的值列表
.name(@param1: red, blue); // 传递了1个变量

上面所说的css list典型的应用是用于transition这个属性：

.transition(@property: all, @time: 1s, @timing: ease-in-out) {
  -moz-transition: @property @time @timing;
  -webkit-transition: @property @time @timing;
  -o-transition: @property @time @timing;
  transition: @property @time @timing;
}

a {
  // 如果要对color和opacity这两个属性运用transition，必须这样
  .transition(color, opacity; .5s);
  
  // 如果像下面用逗号分隔会产生与期待不符的结果
  // .transtion(color, opacity, .5s);
}

上面编译出来的两个结果分别是：

/* 分号调用方式：*/
a {
  -moz-transition: color, opacity 0.5s ease-in-out;
  -webkit-transition: color, opacity 0.5s ease-in-out;
  -o-transition: color, opacity 0.5s ease-in-out;
  transition: color, opacity 0.5s ease-in-out;
}

/* 逗号调用方式（错误）：*/
a {
  -moz-transition: color opacity 0.5s;
  -webkit-transition: color opacity 0.5s;
  -o-transition: color opacity 0.5s;
  transition: color opacity 0.5s;
}

mixin还可以进行重载（类似函数重载），调用的时候会匹配所有可以匹配的mixin，把它们的规则都应用进来：

.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding: 2) {
  color-2: @color;
  padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}
.some .selector div {
  .mixin(#008000);
}

编译出来的css代码：

.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}

mixin在声明的参数列表里指定了参数名称，在调用的时候如果使用带参数名的调用方式，则不用考虑参数顺序：

.mixin (@width, @style, @color) {
  border: @width @style @color;
}

// 调用的时候打乱参数顺序
.a {
  .mixin(@color: red; @width: 1px; @style:solid);
}

5.6 特殊的@arguments变量

@arguments包含所有调用mixin时传递进来的参数，包括默认参数，如：

.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);
}

编译成为：

.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
     -moz-box-shadow: 2px 5px 1px #000;
          box-shadow: 2px 5px 1px #000;
}

5.7 不定数量参数

...用于指代后面省略不定数量参数，从0-N：

.mixin(...) {        // 匹配 0-N 个参数
.mixin() {           // 匹配正好 0 个参数
.mixin(@a: 1) {      // 匹配 0-1 个参数
.mixin(@a: 1; ...) { // 匹配 0-N 个参数
.mixin(@a; ...) {    // 匹配 1-N 个参数

另外，如果直接将...加在某个参数名的后面，则后面不定数量的参数都保存在这个变量中，这里以@rest作为不定数量参数名举个例子：

.mixin(@a; @rest...) {
   // @rest 保存了 @a 之后的所有参数
   // @arguments 仍然是保存了保存的参数，包括@a 和 @rest的值
}

5.8 mixin的模式匹配

根据传入的值与mixin声明的值是否一致来进行匹配（注意，不是与声明的变量名比较，因为变量名匹配任何值），或者根据传入的参数数量与声明的参数数量进行匹配（即前面讲的mixin重载）

.mixin(dark; @color) { // 注意这里第一个形参是个值，不是变量名
  color: darken(@color, 10%);
}
.mixin(light; @color) { // 注意这里第一个形参是个值，不是变量名
  color: lighten(@color, 10%);
}
.mixin(@_; @color) {
  display: block;
}

// 以下为匹配上面某种模式的调用
@switch: light;

.class {
  .mixin(@switch; #888); // 即mixin(light, #888); 在上面找light的匹配mixin
}

编译结果为：

.class {
  color: #a2a2a2; // lighten(#888, 10%)的结果
  display: block;
}

5.9 像使用函数一样使用mixin

因为mixin里定义的变量在调用mixin的选择器里是可见的，所以可以在调用mixin的地方使用这些变量：

.average(@x, @y) {
  @average: ((@x + @y) / 2);
}

// 调用上面的取平均
.div {
  .average(16px, 50px); // 计算16px和50px的平均值
  padding: @average; // 使用.average这个mixin里的@average变量（作为.average的返回值）
}

被调用的mixin里定义的变量不会覆盖调用者的规则里定义的同名变量，但是会覆盖调用者的外面一层定义的同名变量

在mixin A里定义的minxin B可以作为mixin的返回变量使用，例如：

.unlock(@value) { // 外层 mixin
  .doSomething() { // 内层 mixin
    declaration: @value;
  }
}

#namespace {
  .unlock(5); // 解锁内层的 doSomething
  .doSomething(); // 解锁以后内层的mixin就可以使用了
}

编译以后的css：

#namespace {
  declaration: 5; 
}

6. Guards

Guards只能给mixin或者css选择器添加，声明一种匹配条件和策略

6.1 mixin guards

这里的mixin guards实际上是给mixin做一个访问控制，类似if/else，但是为了保留css声明性语言的特质，以类似@media的 media query的语法达到访问控制的效果

一个mixin guards的例子：

.mixin (@a) when (lightness(@a) >= 50%) {   // 使用when关键字声明mixin guards，另外使用了lightness函数取亮度
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

上面的例子同时用到了mixin可以重载的特性，只要是参数可以匹配就会将内容都混入进来，比如以下代码调用上面的mixin：

.class1 { .mixin(#ddd); }
.class2 { .mixin(#555); }

上面的代码编译成css为：

.class1 {
  background-color: black;
  color: #dddddd;
}
.class2 {
  background-color: white;
  color: #555555;
}

guard比较运算符 >, <, >=, <=, =

true是唯一表示真值的值，其他类型不能通过类型转换为true，比如

.mixin(@val) when (@val = true) {
  color: red;
}
.mixin(@val) when (@val) {
  color: blue;
}

.some-class {
  .mixin(1);  // 1不是true
  .mixin(true); // 符合guard的条件
}

还可以在参数之间进行比较：

.max (@a; @b) when (@a > @b) { width: @a }
.max (@a; @b) when (@a < @b) { width: @b }

.some-class {
  @a: 100;
  @b: 200;
  .max(@a, @b);
}

guard逻辑运算符 and, ,逗号（相当于or运算）, not

几个例子：

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
.mixin (@a) when (isnumber(@a)) and (@a > 10, @a < -10) { ... }
.mixin (@a) when not (isnumber(@a)) { ... }

类型检查函数

基本类型检查函数：

iscolor
isnumber
isstring
iskeyword
isurl

数值单位检查：

ispixel
ispercentage
isem
isunit

default() 默认处理

default函数用于处理匹配不到特定条件的情况，这是可以使用默认的样式，类似if/else里else的情况，或者switch/case里的default

.mixin (@a) when (@a > 0) { ...  }
.mixin (@a) when (default()) { ... } // 匹配第一条条件没有匹配上的情况，即@a <= 0的情况

6.2 css guards

可以给css选择器添加guards，和给mixin添加guards的方式差不多，在1.5.0之前给css添加guards的方式和1.5.0及后续版本方式略有不同，新版本内部实现了一个语法糖，给css选择器建立一个立即执行的mixin

1.5.0之前的方式：（其实就是声明一个mixin，并在声明后面立即调用一次）

.my-optional-style() when (@my-option = true) {
  button {
    color: white;
  }
}
.my-optional-style();

1.5.0的方式：（内部实现成一个立即执行mixin）

button when (@my-option = true) {
  color: white;
}

如上面代码所示，这样mixin guards和css guards的声明方式就统一了

结合父选择器&可以有效组织多个guards

button {
  & when ( ... ) { ... }
  & when ( ... ) { ... }
  // ... 继续添加
}

7. 循环调用

使用guards可以创造一种循环调用，在mixin的内部调用mixin自身，比如：

.loop(@n) when (@n > 0) {
  .loop((@n - 1));
  width: (10px * @n);
}

// 调用
.some-class {
  .loop(10);
}

编译出来的css：

.some-class {
  width: 10px;
  width: 20px;
  width: 30px;
  width: 40px;
  width: 50px;
  width: 60px;
  width: 70px;
  width: 80px;
  width: 90px;
  width: 100px;
}

一个常见的例子是创造一系列宽度的column：

.generate-columns(@n, @i:1) when (@n >= @i) {
  .column-@{i} {
    width: (@i * 100% / @n);    // 这里也可以改成 width: percentage(@i / @n);
  }
  .generate-columns(@n, (@i+1));
}

// 初次调用
.generate-columns(4);

编译结果：

.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

8. 独立规则集

独立规则集（不带css选择器）可以赋值给某个变量，作为参数传递给某个需要接受参数的mixin，或者直接当做一个mixin被调用。独立规则集的内部可以包含css规则、内嵌的规则以及media query等内容。

8.1 作为变量

将一组规则集声明为某个变量的值（也可以说这就是一个独立规则集的定义方式），然后在其他地方调用该值（像调用mixin一样调用独立规则集）

// 作为变量的独立规则集
@detached-ruleset: {
  background: red;
};    // 注意，这里的分号一定不能少，否则编译出错

// 在某个css选择器里调用这个规则集
.top {
  @detached-ruleset();  // 注意，这里的括号一定不能少，否则编译出错
}

变量赋值语句后面的分号;一定不能少，调用变量的时候，后面类似调用mixin的括号()一定不能少，否则都会编译出错。

独立规则集除了包含一组规则，还可以包含内嵌的规则集，如：

@my-ruleset: {
  .my-selector {
    background-color: black;
  }
};

8.2 作为参数传递

.desktop-and-old-ie(@rules) {
  @media screen and (min-width: 1200) { @rules(); }
  html.lt-ie9 &                       { @rules(); } // 这里使用了&符号指代父选择器(后面会做介绍)
}

header {
  background-color: blue;

  // 这里直接将{ background-color: red; }这个独立规则集传递给了mixin
  .desktop-and-old-ie({
    background-color: red;
  });
}

{ background-color: red }这样的独立规则集就像js的对象字面量一样可以传递给mixin作为实参；这里将特定的media query和某些不兼容的浏览器作为一个整体抽象出来单独设置针对它们的样式，省略了每次都去分别设置media query和不兼容浏览器的麻烦

上面的less编译出来的结果如下：

header {
  background-color: blue;
}
@media screen and (min-width: 1200) {
  header {
    background-color: red;
  }
}
html.lt-ie9 header {
  background-color: red;
}

8.3 结合media query冒泡

@my-ruleset: {
  .my-selector {
    @media tv {
      background-color: black;
    }
  }
};

@media (orientation:portrait) {
    @my-ruleset();
}

编译出来的css如下；

@media (orientation: portrait) and tv {
  .my-selector {
    background-color: black;
  }
}

独立规则集内部的.my-selector选择器内嵌的media query @media tv在独立规则集被调用的地方冒泡到外层和@media (orientation: portrait)组合成@media (orientation: portrait) and tv

8.4 调用返回值

前面说到调用mixin的返回值是该内部mixin的变量或者内嵌mixin（将这些变量或内嵌mixin解锁变为可用），而独立规则集在调用的时候只返回内部的mixin，而不返回其内部定义的变量

// 定义一个独立规则集，内部包含一个内嵌mixin和一个变量
@detached-ruleset: { 
  @color: black;
  .mixin() {
      color: @color;
  }
};

// 调用该独立规则集，规则集内的mixin可用，而变量则不能使用（没有被返回）
.caller {
  @detached-ruleset(); // 调用独立规则集是不调用内部mixin的，但是会让内部mixin变得可用
  .mixin(); 
  background-color: @color; // 编译出错
}

8.5 规则作用域

独立规则集在其定义域内的变量，在独立规则集内部是可见的（独立规则集获得了该作用域的访问权）；在独立规则集的调用域内变量也是可见的，但是优先级低于定义域的变量

@detached-ruleset: {
  caller-variable: @callerVariable; // 变量callerVariable在定义域里没有定义
  .callerMixin(); // callerMixin在定义域里没有定义
};

selector {
  // 使用独立规则集
  @detached-ruleset(); 

  // 上面的变量和mixin在调用域里定义了
  @callerVariable: value;
  .callerMixin() {
    variable: declaration;
  }
}

上例中独立规则集里用到的变量和mixin是在调用域里定义的，它们在独立规则集的内部是可见的。

@variable: global;
@detached-ruleset: {
  // 使用全局的@variable即global，因为其在detached-ruleset定义时可见
  variable: @variable; 
};

selector {
  @detached-ruleset();
  @variable: value; // 调用域的@variable会被忽略，因为独立规则集的定义域已经有可见的@variable了
}

上例中定义域已经有@variable被定义可使用了，所有在调用域里定义的@variable会被直接忽略掉

在引用独立规则集时（如@ruleset-a: @ruleset-b定义@ruleset-a为@ruleset-b的引用），独立规则集不会获取该作用域的访问权；只有在独立规则集被定义或调用时，才会获得当前作用域的访问权

@ruleset-1: { scope-detached: @one @two; };
.one {
  @one: visible;
  .two {
    @ruleset-2: @ruleset-1; // copying/renaming ruleset，这时的作用域并不会被获取到 
    @two: visible;
  }
}

.usePlace {
  .one > .two();  // 这一步让@two和@ruleset-2在此作用域可见
  @ruleset-2(); // 由于@one不可见，所以报错
}

上例的例子，在@ruleset-2: @ruleset-1;的时候没有获取到@one所在的作用域，而在.usePlace中也没有调用.one()，所以@one在调用@ruleset-2时是不可见的，因此编译会报错，如果在.usePlace中加上一个.one();调用语句，则编译没有问题，编译结果为：

@ruleset-1: { scope-detached: @one @two; };
.usePlace {
  scope-detached: visible visible;
}

解锁的概念：调用一个mixin会将该mixin内的变量、mixin以及独立规则集解锁，在调用的作用域里变得可见：

#space {
  .importer1() {
    @detached: { scope-detached: @variable; }; // 定义独立规则集
  }
}

.importer2() {
  @variable: value; // 在这个作用域里解锁的独立规则集可以看见这个变量
  #space > .importer1(); // 解锁mixin importer1，即解锁该mixin里的内容，包括独立规则集@detached
}

.usePlace {
  .importer2(); // 解锁mixin import2，同时解锁mixin importer1
   @detached(); // 调用已解锁的@detached独立规则集
}

以上less编译为css：

.usePlace {
  scope-detached: value;
}

9. 嵌套规则（Nested Rules）和父选择器

9.1 嵌套规则

嵌套规则模仿html的标签嵌套结构，将选择器按层级进行嵌套：

.parent {
  color: @parent-color;
  .child {
    color: @child-color;
  }
}

9.2 父选择器

&符号表示父选择器（用在嵌套规则中，常用于表示伪类），如：

a {
  color: #000;
  // 注意，如果这里不写&表示的意义将大不同
  &:hover {
    color: #fff;
  }
}

另一个常用的场景是用&做父类的类名的替换：

.btn {
  &-primary {
    background-color: blue;
  }
  &-success {
    background-color: green;
  }
}

注意：加入&的选择将不被视为内嵌的选择器，而是和父选择器平级；上面的例子即内层选择器&-primary的规则编译结果不会变成.btn .btn-primary，而是.btn-primary，与.btn是同一层级的

多个&：子选择器中还可以反复使用&，如& > &或者& + &等，其实相当于就是变量替换，只不过只能表示替换为父选择器的名字

另外注意&表示所有父选择器及父选择器之间的层级关系，比如在.grand中嵌套一个.parent，在.parent中引用的&将被替换为.grand .parent

组合（爆发）对于逗号分隔的父元素，&将代替逗号分隔的选择器其中的任何一个，如：

p, a, ul, li {
  & + & {
    border: 1px solid blue;
  }
}

这里& + &会被编译为p + a, p + ul, ...这4x4=16种组合，会给这16种组合都应用指定规则

9.3 名字空间和访问器（Namespaces & Accessors）

（不要将它与CSS @namespace以及namespace选择器搞混了）

引入某个mixin时，如果mixin在另一个选择器内部，可以将该选择器作为名字空间，将mixin作为该名字空间里的mixin引入，如：

/*非#bundle空间内定义的.button规则*/
.button {
  border: none;
}

/*在#bundle空间内定义的.button规则*/
#bundle {
  .inner {
    .button {
      display: block;
      border: 1px solid black;
      background-color: grey;
    }
    &:hover {
      background-color: white
    }
  }
}

#header a {
  color: orange;
  #bundle > .inner > .button();
}

#header a {
  color: orange;
  #bundle > .inner > .button();
}

上面的#bundle > .inner > .button()也可以去掉>或()，如#bundle .inner .button;

这里的名字空间是二层，一般根据需要可以是任意层

注：如果不是引用该名字空间的mixin #bundle .inner .button，而是直接.button()则优先使用外层定义的.button的规则，即border:none;

另外名字空间中（外层选择器中）定义的变量@var不能被用在该名字空间以外

注：名字空间和访问器仅能用于mixin，不能用于独立规则集，内嵌独立规则集有另外的引入方式：先通过.outter();或#inner();的方式（调用mixin）解锁内嵌的@inner独立规则集（变量），然后再调用它@inner();；如果不想同时引入outter里的规则，可以在定义outter时将其声明为不输出的mixin

9.4 作用域Scope

以上所谓名字空间有其对应的作用域Scope，与js中的作用域概念类似。在查找变量或mixin的时候，会沿着作用域链依次向上查找（本作用域没有，则查找父作用域），如：

@my-color: red;

.some-class {
  @my-color: blue;
  #header {
    color: @my-color; // 结果为blue
  }
}

9.5 MediaQuery的嵌套和冒泡

@media也可以嵌套，如下：

.some-class {
  @media screen {
    /*...*/
    @media (min-width: 768px) {
      /*...*/
    }
  }

  @media tv {
    /*...*/
  }
}

编译成css的结果如下：

@media screen {
  /*...*/
}

@media screen and (min-width: 768px) {
  /*...*/
}

@media tv {
  /*...*/
}

之所以叫media query冒泡，如上所例子所示，内嵌的@media在编译成css的时候从内部冒泡到外层，作为外层@media的交集的一部分，通过and [...]的方式，将less层面的嵌套式media query变成了css的扁平的无交集的media query；这样内嵌的media query总是会冒泡到顶层来

10. 继承（Extend）

相比翻译成扩展我更喜欢把这里extend翻译成继承，与OOC SS的理念更契合，也很好理解

extend是一个Less伪类，它会合并它所在的选择器和它所匹配的引用。

如果.a:extend(.b)，那么.b的选择器会变为.b, .a {...}，这就是extend的编译方式

比如这段代码：

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

.inline {
  color: red;
}

也可以使用这种继承形式：

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

.inline {
  color: red;
}

两者效果是一样的，编译出来的结果如下：

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

10.1 all关键字用于继承

加上all关键字表示欲继承的类的所有实例（这里实例的概念指.classA.classB是.classA的一个实例），如:extend(.b all)表示:extend(.x.b)、:extend(.y.b)等等

.c:extend(.d all) {
  // 匹配".d"的所有实例，比如".x.d"或者".d.x"
}
.c:extend(.d) {
  // 匹配".d"选择器的唯一实例
}

注意extend all的工作方式是部分替代式的，即如果.cls:extend(.a all)作用到.a.b上，并不是粗暴的添加.cls到.a.b的规则集上去（.a.b, .cls { ... }）而是将.a.b中的.a替代为.cls再添加到.a.b规则集上去，即.a.b, .cls.b { ... }，例子如下：

.a.b {
  color: orange;
}

.cls:extend(.a all) {
  border: 1px solid black;
}

编译结果为：

.a.b,
.cls.b {  // 注意新加的选择器是对.a.b中的.a进行部分替换的结果
  color: orange;
}
.cls {
  border: 1px solid black;
}

10.2 多重继承

两种形式，一种使用,逗号分隔，一种使用多个:extend

.e:extend(.f) {}
.e:extend(.g) {}

// 上面的代码与下面的做一样的事情
.e:extend(.f, .g) {}

// 上面的代码还有下面这种形式，效果都是一样的
.e:extend(.f):extend(.g) {}

注意 :extend()后面不能再跟上其他伪类了，但是第一个:extend之前可以有其他伪类，比如:hover:extend(.a)

10.3 继承嵌套的选择器

.parent {
  tr {    // 扩展目标
    color: blue;
  }
}

.some-class {
  &:extend(.parent tr);
}

编译结果为：

.bucket tr,
.some-class {
  color: blue;
}

10.4 精确匹配

匹配的精确性体现在多个方面：

体现在类选择器上，:extend(.a)不会匹配到.a.b，也不会匹配到*.a或者div.a，只会匹配到单独的.a
体现在伪类的顺序上，比如:extend(a:visited:hover)和:extend(a:hover:visited)就是不同的，虽然a:visited:hover和a:hover:visited选择的元素是一致的
nth表达式，如:extend(:nth-child(n+3))就不能匹配到:nth-child(1n+3)，虽然:nth-child(n+3)和:nth-child(1n+3)是一致的

在属性选择器的引号上则比较宽松，可以是单引号、双引号或者没有引号：

[title=identifier] {
  color: blue;
}
[title='identifier'] {
  color: blue;
}
[title="identifier"] {
  color: blue;
}

.noQuote:extend([title=identifier]) {}
.singleQuote:extend([title='identifier']) {}
.doubleQuote:extend([title="identifier"]) {}

编译结果：

[title=identifier],
.noQuote,
.singleQuote,
.doubleQuote {
  color: blue;
}
[title='identifier'],
.noQuote,
.singleQuote,
.doubleQuote {
  color: blue;
}
[title="identifier"],
.noQuote,
.singleQuote,
.doubleQuote {
  color: blue;
}

10.5 当带有变量的选择器名遇到继承（Selector Interpolation with Extend）

可以给带有变量（变量插值）的选择器名添加:extend伪元素

但是extend()里面传递的参数不能是变量，extend()匹配的选择器名也不能是变量（匹配不到）

看下面的例子就好理解了：

// 第一种，要匹配的目标选择器带变量插值
@variable: .bucket;
@{variable} { // interpolated selector
  color: blue;
}
.some-class:extend(.bucket) {} // does nothing, no match is found

// 第二种，匹配所传递的选择器参数是变量插值
.bucket {
  color: blue;
}
.some-class:extend(@{variable}) {} // interpolated selector matches nothing
@variable: .bucket;

// 第三种，要进行extend的选择器带变量插值
.bucket {
  color: blue;
}
@{variable}:extend(.bucket) {}
@variable: .selector;

只有第三种扩展是可以匹配到的

10.6 当@media遇到extend

在@media声明块里面的extend只匹配该@media内部的选择器，如：

@media print {
  .screen-class:extend(.selector) {}
  // 上面的:extend只匹配下面的这个.selector
  .selector {
    color: #000;
  }
}
// 不会匹配外面这个.selector
.selector {
  color: #f7f7f7; 
}

在@media声明块的里的extend也不匹配内嵌@media块里的选择器，如：

@media screen {
  .screen-class:extend(.selector) {}
  @media (min-width: 1023px) {
    .selector { // 上面的:extend匹配不到这里的.selector
      color: #000;
    }
  }
}

编译成css是这样的：

@media screen and (min-width: 1023px) {
  .selector {
    color: #000;
  }
}

在@media外面的extend会匹配到@media内部所有可匹配的选择器，如：

@media screen {
  .selector {
    color: #fff;
  }
  @media (min-width: 1023px) {
    .selector { // 上面的:extend匹配不到这里的.selector
      color: #000;
    }
  }
}

// top-level会继承@media中所有.selector的规则
.top-level:extend(.selector) {}

编译成css是这样的：

@media screen {
  .selector,
  .top-level {
    color: #fff;
  }
}
@media screen and (min-width: 1023px) {
  .selector,
  .top-level {
    color: #000;
  }
}

10.7 Duplication Detection

less目前还没有做重复检测，所以继承的时候如果有重复的话不会自动清除，例如：

.alert-info,
.widget {
  /* declarations */
}

.alert:extend(.alert-info, .widget) {}

这里.alert-info, .widget的规则是一样的，但是.alert仍然会重复继承两者的规则，编译成css如下：

.alert-info,
.widget,
.alert,
.alert {
  /* declarations */
}

10.8 应用场景

和子类继承父类的应用场景相同，选择器的继承就是为了获取所继承的选择器的规则，并有选择的进行改写。但是改写的话因为css后声明的规则覆盖前声明的规则，所以子类应该放在父类的下面，如下所示（html结构为<a class="bear">Bear</a>）：

.animal {
  background-color: black;
  color: white;
}
.bear {
  &:extend(.animal);
  background-color: brown;
}

另一个场景是作为mixin的代替方法，可以用于某些mixin解决不了或者效果不好的场合：extend的实现方式是用逗号分隔开那些重复规则的选择器，可以比使用mixin生成更少的css代码；extend的选择器可以是复杂的选择器，比如li.list这样的，而mixin的选择器只能是id选择器或者类选择器（以及前面带名字空间修饰，比如#some-id > mixin）

11. 合并(Merge)

像transition、background这样的属性的值是由多个属性合并起来的值列表，并且像box-shadow这样的属性还可以用逗号,分隔多个值列表，合并提供一种手段方便向这些属性列表添加新的值，可以是逗号,分隔，也可以是空格分隔

11.1 逗号分隔

在需要逗号分隔的属性后面加一个加号+方便后续添加更多值列表

.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}

编译结果：

.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

11.2 空格分隔

在需要空格分隔的属性后面加+_方便后续添加更多值

.mixin() {
  transform+_: scale(2);
}
.myclass {
  .mixin();
  transform+_: rotate(15deg);
}

编译结果：

.myclass {
  transform: scale(2) rotate(15deg);
}

12. 导入（Importing）

可以在less中导入另一个.less文件，然后这个文件中的所有变量都可用了，另外导入less文件时.less扩展名可以省略，如：

@import "library"; // library.less
@import "typo.css";

css的@import语句必须放在所有css规则的顶部，然而less没有这个要求

12.1 扩展名

.less文件作为less文件引入
.css文件作为css导入
其他扩展名/没有扩展名均作为less文件导入

作为css文件导入时，不会对@import语句做处理，而是将该语句直接输出到最终css文件中，让浏览器去做处理（即as-is的方式）

12.2 导入选项

为了给予开发者更多的导入选择，使用@import (<keyword>) "filename";语句导入less/css

可用的选项关键词如下：

reference 导入less文件，但是不输出其样式
inline 导入文件但是不处理，直接输出，一般用来导入一些less不兼容的css（不标准的，或者hacked css）
less 将导入的文件当做less处理，不管扩展名是什么
css 将导入的文件当做css处理，不管扩展名是什么
once 只引入一次（默认行为）该文件
multiple 多次引用该文件
optional 当文件未找到时继续编译

12.3 reference

用法：@import (reference) "foo.less"

引入的less文件中的规则集不会直接输出到output，而只能作为mixin或者被继承（:extend）

12.4 inline

用法： @import (inline) "not-less-compatible.css"

一般用来导入一些less不兼容的css文件，less只兼容常用的标准css，有些地方的注释已经一些css hack是less处理不了的，因此这些css可以使用inline直接导入并输出到最终css文件中

12.5 less

用法： @import (less) "foo.css"

把foo.css当做less引入进来

12.6 css

用法： @import (css) "foo.less"

上面的语句会直接编译成如下css输出到最终的样式表中：

@import "foo.less";

12.7 once

用法： @import (once) "foo.less"

只引入一次，第二次声明引入该文件会自动忽略；这是@import语句的默认行为

12.8 multiple

用法：@import (multiple) "foo.less"

允许多次引入同一文件

12.9 optional

用法：@import (optional) "foo.less"

当使用optional时，该引入文件是可选的，若文件存在则引入之，若不存在也不会报错，而是直接忽略之

银河系跑步指南

Sat, 03 Jan 2015 20:11:01 +0000

从准备考研的那年夏天开始跑步到现在研究生即将毕业，陆陆续续已经三年多。当初只是当做一种强身健体的手段，后来慢慢演变成了习惯，不跑会觉得不爽。被帝都的雾霾憋在屋里一段时间后开始在健身房跑，跑了也快一年了。期间对跑步速度成绩从不怎么关心，每次都是按自己的节奏跑半小时结束。曾经去过奥森跑五公里，那边算是帝都跑者的一个圣地了，跑完很畅快。作为一个前端码农，15年打算调整一下自己的技能树结构，点亮跑步这个除编码以外的第二技能。有机会再去认真跑一次马拉松（大一的时候曾经去跑过一次北马的十公里）。

虽然陆陆续续跑了那么多年，但是我从没把跑步当做一件很正式的事情，只是去跑。但是查过相关资料后发现，其实有不少有趣的值得去了解的信息。跑步是一项复杂的工程（当然要说简单也很简单，这算是最简单最没有门槛的一项运动了吧）。如果你像我一样打算把跑步这件事认真当回事，然后有跑马拉松比赛的预期，而且像我一样基本算是一个刚刚跨入这一领域的菜鸟，那么以下这些知识我认为非常有必要认真了解一下，作为起步前的准备。（注：以下知识均收集自网络）

码农改不了的习惯，干事之前先读文档 - -

跑步的好处和坏处

跑步的好处是公认的，跑步大概是最百益无害的运动了，不过如果把跑步当做竞技体育的话，就不得不面对可能的运动损伤了，最多见的大概是膝盖伤吧，这也是现在大多跑鞋在缓冲和支撑上做文章的主要原因，帮你的膝盖分担多余的冲击力。保护好膝盖，适当加量，使用正确的跑姿，剩下的只要注意好脚下的坑别掉坑里就可以了 - -。

好处：

瘦身，减肥，塑形（跑20分钟开始烧脂，长期30分钟有效果）
作为码农，跑步让你有机会接触更多优质妹子（原因参见上条）
跑步能运动到你全身几乎每一块肌肉
跑步能让你拥有健康而强大的心血管系统，增强你的呼吸系统、消化系统
提升耐力（让你编码更持久）
跑步大概是清理心绪最好的运动（被产品需求折磨的无比烦躁的时候可以来跑个20圈）
操作起来最不复杂的运动（天生就会跑）
…

坏处：

基本没有坏处，过量运动、不正确跑姿或者热身不充分可能造成运动损伤。

跑步的时间和地点选择

时间：

推荐下午四五点、傍晚或者晚上。主要考虑以下因素：

空气质量。早上空气质量不太好，特别是靠近植物的地方。如果非要选择早晨的话最好是等太阳出来一会儿，植物都进行光合作用了再跑。
身体状态。太早起来，身体各部分器官还处于没睡醒的状态，这时候跑步可能对身体造成损害。

地点：

只要有路的地方都可以跑。不过路也是有讲究的，不同的路面对身体的冲击不同（后面会介绍怎样有效避免跑步的运动损伤）。一般来说越软的跑道对膝盖的冲击越小，以下按从软到硬的路面排序：塑胶跑道 < 柏油马路 < 水泥路跑步机的跑道我个人感受是比塑胶跑道还要软一点。另外在操场跑圈可能会伤一边膝盖，因为总是朝着一个方向跑嘛，这个就是跑的量越大会越明显。我自己倒是没有明显感觉到，但是周围有人有这样的体会。

装备

所谓工欲善其事，必先利其器。作为一个码农，工具的重要性不用我多说。选择合适的运动装备就是选择趁手的工具，会让运动更健康舒适，而且更有范儿。咱们从鞋子开始比划。

跑鞋：

跑鞋可谓跑步的关键道具了。关于挑选跑鞋，可以参见这篇慢跑鞋入门知识，以及慢跑鞋选择指引，以及每个跑者都需要的四双跑鞋，也可以看看知乎上对挑选跑鞋这个问题的回答。

总的来说，第一双跑鞋挑选一款合脚的缓冲跑鞋就ok，推荐asics和mizuno家的跑鞋，因为大家用了都说好，另外我自己买的asics家的gel系列，跑起来非常爽快。一般跑5km以内对跑鞋要求不是太高，能起到缓冲作用就ok了，如果一次跑的量比较大，比如10km，那么挑选一款合适的跑鞋对你的健康就非常重要了。鞋子的尺码也非常重要，各个品牌的鞋子尺码不是太一样，特别网购的时候一定要搞清楚，另外鞋子宁可大一点也不能买小了。

各大品牌尺码对照表：

–> 各品牌尺码对照表 <– (图太大了就不嵌进来了，直接点进去看)

以下是挑选跑鞋的科学方法：

在Mizuno的测试网站测试一下你适合哪款跑鞋
当然不是让你只买Mizuno的牌子！这里有个大神整理的跑鞋矩阵表，在里面找对应的同类型的鞋子就可以了。（这个表我是没下下来 - -）
如果上面的步骤抛出了异常（比如表没下下来 - -），可以参考这一步（异常处理）。了解自己的脚型，是内翻还是外翻？高足弓、正常还是低足弓？然后参考下面的表格去挑选合适的跑鞋吧。

脚型与鞋型参考表（仅供参考）

穿衣

跑步衣服的要求基本就那么几点：

裤子不能磨大腿，上衣不能磨腋窝（和乳头）
快干、排汗，排汗要求更优先

最忌讳穿棉质衣服，很吸汗，但是排汗性能糟糕，湿了就是一坨黏在身上，风一吹很容易感冒。在此基础上，建议能骚尽量骚（此时不骚更待何时）

冬天穿什么衣服

冬天穿什么衣服跑步这个太有讲究了。冬天跑步广为流传的三层穿法：

第一层也就是最里面穿一件速干、排汗的内衣。为了保暖可以穿压缩衣，比如skins，under Armour， 2XU，CW-X，x-bionic以及耐克/阿迪。（据说，喜欢更强支撑性的可以考虑CW-X，更喜欢舒适性和恢复性的那就Skins，追求性价比就UA。个人暂时还没有体会 - -）初跑者可以选择性价比之神迪卡侬的压缩衣，非常实用，等进阶了以后再上高级装备。 ps：迪卡侬的跑步装备还是挺全面的，而且价格很平民化。

压缩衣的功能：

压缩：压缩性的作用就是能够提高肌肉的力量，缓解乳酸堆积，使得运动更加持久。如果上身肉多的话可以起到固定作用，避免无效振动引起额外负担。
支撑：我个人觉得这个作用是最重要的，当长时间跑步造成疲劳时，跑姿就会不由自主的变得不协调，压缩衣可以在这个时候对核心肌群和后背等部位起到支撑作用，保持身体正直。
贴身：优秀的贴合性，裸奔的感觉~在寒冷大风的天可以避免冷风直接冲击到皮肤表面，在冬天尤其实用。
导汗：压缩衣的导汗性和透气性十分出色，在夏天可以将汗水迅速排出，避免在体表聚集汗水引起不适。在冬天汗水排出后会在衣服表面风干，而衣服同时起到了隔离层的作用，避免汗水被冷风风干时带走体表温度。可谓冬暖夏凉~
恢复：以Skins为代表的压缩衣在运动后还有辅助肌肉快速恢复的功能，甚至可以穿着它睡觉。

另一个理论解释：

压缩衣效果是末端压缩，迫使远端血液回流，换言之就是你做运动肌肉充血，血液循环降低，压缩衣降低充血程度，从而促进血液循环。这样乳酸堆积会减少，肌肉酸胀疲惫期会延后，跑步距离提高。同理可得做器械时短裤短袖压缩衣，对上下半身肌肉回复有改善。

貌似现在户外打篮球、踢足球的也有不少都是里面穿层压缩衣，外面套个T恤和短裤，一来不冷，二来专业，三来装13 - -

第二层穿件抓绒的运动服，如果天气不是太冷到这一层就够了，这一层主要是为了保暖。有专门为跑步设计的抓绒运动服，背面和口袋会有反光条，提高夜跑可见性，另外会有一些隐藏口袋设计方便收纳物品。
第三层穿一件轻便的风衣皮肤衣，冬天挡风还是挺重要的。皮肤衣挡风挡雨，关键几乎没有重量，就像你的第二层皮肤，跑起来不会觉得有负担，另外有些皮肤衣可以直接收成一个小包方便携带。

注意冬天跑步也不要穿太多，跑着跑着就会暖起来，穿多了跑十分钟就会后悔的。

知乎上对冬天跑步怎么穿衣一个参考答案：

0以上：外面穿一层运动服就行了，里面可以光腿，也可以穿压缩裤。运动服最好紧身一点，不然跑起来会往里灌风。
0——-零下10：以两层着装为主，里面穿贴身的排汗衬衣衬裤（北面、狼爪都有卖）外面穿迪卡侬199的纯棉运动套装（上衣带帽子）。我不习惯带手套，这个温度区间刚开始跑起来都会觉得有点冻手，但跑一阵就好了。如果怕冷的可以戴薄手套。
零下10——零下20：这个温度跑步已经很虐了，主要是用口呼吸过程中凉风吸进肚子里会很难受。如果全程用鼻呼吸又支持不了太高的心率，建议戴一个薄护脸，不要太厚，太厚影响呼吸。当然你有滑雪的那种鼻口处开口的护脸也可以。穿衣的话前面VEN说的三层穿衣法是正确的选择。我一般里层还是排汗的衬衣衬裤，中层穿薄抓绒，外层穿冲锋衣和冲锋裤。唯一缺点就是冲锋裤跑起来双腿摩擦产生的声音太大，而且又不耐磨。这个温度穿正常的跑鞋已经会觉得冷了，我的经验是穿一双厚一点的羊毛袜，虽然不如专业跑步袜子舒服，但是10KM还不至于磨脚。
零下20以下：说实话我很少在这个温度跑步，因为冬天下班以后的温度最冷也就是零下20左右。等再冷的天我就猫冬不跑了。为此我特意请教了某百公里越野跑完赛的选手的冬训经验。在零下20℃以下的天气下跑步，穿衣还是三层穿衣法，不过中层要用厚抓绒，外层可以用冲锋衣，偶尔也可以穿滑雪服。（滑雪服就是太沉，而且穿滑雪服跑的话一定要把透气的拉链都打开，免得潮气排不出去）。还穿常规的跑步鞋的话，肯定是要冻脚的，这个时候注意跑步的过程中脚趾发力的感觉，增加血液循环吧。

夏天穿什么衣服：

夏天穿衣服同样注意衣服的排汗、快干就可以了，背心T恤压缩衣都可以搞起。短裤可以穿跑步专用的，或者打乒乓球那种短裤，篮球短裤就算了，甩来甩去的，磨腿而且不轻便。

针对妹子的装备：

专业运动文胸是妹子的必备装备，不然跑起来会各种乱颤…专业文胸有很好的支撑和绑定作用，防止下垂和变形，建议大熊妹子买cw-x、2XU之类，小胸妹子随意 - - 耐克阿迪这种运动内衣平时跳跳操还行，跑步还是算了。

（以上摘自知乎）

其他装备：

帽子（冬天戴薄一点的线帽，保暖）
魔术头巾（冬天当围脖戴，保暖）
手套（冬天保暖，不要太厚，跑长了时间会热）
头带/发带（防止额头出汗，这个我深有体会。之前跑步总是跑一会就得抬手擦汗，有时候汗流到眼睛跟耳朵里，那叫一个难受）
护腕（用来擦汗）
臂带（用来装手机）
心率表、心率带
…

带上跑步App

跑步app还是挺多的，随便一搜一大把。我理想的跑步app应该兼具定位、记录、分享的功能。像有些app就只能记录gps定位的成绩，跑步机上跑出来的结果就没法记录了。所以我现在去外面跑基本用咕咚，在健身房就拍照传到去动上并手动记录一下跑量。最近用了下于嘉在用的悦跑圈，感觉还不错，室内室外都能用，界面也很不错，打算暂时先用它了。欢迎加我好友，昵称Mr.Raindrop :)

ps: 从网上看的结果是大部分国外的跑步app地图都有偏移，国内的定位都比较准确。

做好热身和拉伸

不做行么？

跑前一定要做好热身，而且要做充分。热身可以让身体进入运动状态，有效防止运动损伤；拉伸还可以使身体更匀称，拉伸小腿可以防止小腿变粗（跑前跑后都要拉伸）。

运动前慢跑个几分钟可以提高全身体温，使血液（携氧）更好循环流通，防止接下来的运动损伤，使身体系统能承受更激烈的锻炼动作。运动前局部热身把锻炼部位的肌肉低频低强度伸缩一下可以让锻炼高频运动部位体温提高，使血液更好的流向局部肌肉以供氧，防止运动损伤。

怎么做热身/拉伸？

可以参看这个跑步训练营的跑前热身/拉伸教学视频，个人觉得这一套视频都还挺有意思，从装备到热身到跑姿都做了简单介绍，非常实用，墙裂推荐。另外知乎这个答案也可以作为参考。

关于热身和拉伸还有另一种说法：

跑前做动态拉伸，跑后做静态拉伸。所谓动态拉伸就是各种踢腿、纵跳、并脚跳之类的弹跳。

力量训练

平时可以做一些腰腹力量训练和膝盖力量训练。跑步最考验的是膝盖，锻炼膝盖力量是减少膝盖损伤的好办法，一般可以采取深蹲、靠墙90度蹲等方法，需要长期坚持。做力量训练一方面提高局部肌肉的力量，让跑步的时候该用劲儿的部位能用上劲儿，另一方面可以让跑步的姿势更稳定，不会跑的东倒西歪左右晃动。

怎么跑？

继续推荐跑步训练营视频。

接着上来自顶级马拉松跑者Ryan Hall的专业指导：

这三个视频中Ryan Hall所讲解的技术要领是：

身体向前，身体正直（不可前倾后倒）
脚尖自然落地，每一个动作都放松
手臂放低并向前摆动，手臂与肩膀向后扩以展开胸部使呼吸顺畅
臀部收在身体正下方（跑步时感觉臀部在身体下方滚动）
头部向前，并保持在肩膀正上方，不左右偏

继续参照Ryan Hall的训练视频，注意看他跑步的姿势。

其他参考要领：

外足弓先着地（包括足跟外侧一起落地）不是足跟先着地。有些时候也可以前脚掌先着地，但不会足跟先着地
摆动腿要向后勾腿（小腿肚子贴近大腿后侧），这样是为了增加步幅
蹬伸腿要送髋，让髋关节自然发生旋转，简单说腿蹬直屁股收紧
从来没有主动摆臂，看着是摆臂的动作其实只是躯干旋转带动肩关节也发生了旋转，手臂的位置可以屈肘在胸前也可以垂放身体两侧
跑步时收紧下腹和臀部，免得时间长了腰和膝盖疼
胸式呼吸（但是跑动时主要靠腹斜肌参与呼吸）
身体重心稍微前倾，头颈和下巴收回，头始终看前方不能左右晃动
每步的腾空时间要短，脚掌是将自己向前贴着地面推进
酸痛可以有，但你要接纳它，接纳它就是打开自己，打开自己酸痛就远离你了
跑步的强度控制在是有些累，但是可以坚持，不要一次把自己冲爆了

（以上观点摘自知乎对正确的慢跑姿势是怎样的？这个问题的讨论）

一般见到比较多的关于跑姿的讨论是脚跟/全脚掌/前脚掌/脚尖着地的问题。不推荐脚跟着地，因为直接冲击膝盖，虽然目前跑鞋技术可以减轻这种冲击，但是这仍然是不好的习惯。推荐足弓着地，或者前脚掌先着地，这对小腿力量有一定的要求，初跑者可以先用全脚掌着地，慢慢过渡。跑的时候多体会体会一些要领，比如尽量向外收肩就能自然保持比较正直的姿态。

科学训练

正常跑

大多数跑友可能一开始是冲着强身健体或者减肥瘦身的目的来跑步的，可能跑到后来就是为了享受跑步的乐趣。这种情况训练的时间和量都可以比较随意，按自己的习惯、时间和身体状况来就可以了。对于跑步减肥的，一般来说要达到瘦身效果至少得跑30分钟，因为20分钟开始燃烧脂肪，再跑10分钟就比较有效果了。

备战马拉松

首先了解几个概念：

配速：跑1km需要的时间。常见的6’/5’/4’/km 换算成速度就是10/12/15km/h
配速跑: 按照自己的（马拉松）配速跑，基本不变速

备战比赛需要提前3~6个月制定一个适合自己的训练计划：

平时训练 - 可以强化马拉松配速跑，一周最少跑四天（隔一天跑一次，最后一天跑个LSD），最多跑六天。我现在的平时跑是7~8km，一般5km是ok的
周末LSD跑 - 周末可以跑个长点的LSD（Long Slow Distance），LSD可以逐渐加量。LSD的配速通常要比马拉松配速慢20~60秒/km（或者用能边跑边讲话的速度），LSD参考跑量：10-12-15-18*2-20（半马）-22-25-28-30-32*2-35*2-38
轻松跑 - 用来在长跑日和其他强度训练之后协助排酸，跑个三四十分钟就行，也可以多跑点（马拉松训练跑量是基础，每周增加中长距离轻松跑跑量可以有效提高马拉松成绩，参考数据每周15-25km轻松跑）
马拉松配速跑 - 和轻松跑比较类似，但是严格按照马拉松的配速跑，不能随意变速。一般前后各3~5km热身和冷却，中间8~15km严格按配速跑。目的是让身体记住这个速度，这样以后在这个速度上跑的自然更省力。

LSD建议2周加一次量，上面的*2表示该LSD距离需要完成2次

也可以参考跑步训练的一些知识及技巧，里面介绍了各种跑法和训练方式，非常具有参考价值（想跑马拉松的可以看看，一般爱好者无所谓）。

asics官网有个My Asics可以根据你的性别年龄跑步距离等为你量身定制一个训练计划，可以导出pdf或者直接导出到google日历或者outlook日历里，个人感觉还挺方便实用的。用asics出的appMy Asics可以随时查看自己的训练计划，完成某天的训练内容。ps My Asics的界面好而功能都让我比较满意，就是定位准不准还有待观察。

小提示：

跑前补充点水分和能量（碳水化合物为佳），5km以上中途也要注意补水
刚开始最好跑塑胶或者土路等软一点的路面以保护膝盖和脚
一定要买双缓冲跑鞋保护膝盖和脚踝
跑前热身一定要做充分
不要忘了跑前跑后都要做拉伸运动（小腿变粗就不好玩了）
至少跑30分钟才能起到瘦身效果
不要贪跑量，提升需要循序渐进
出去跑的话要关注空气质量
路跑的话可以靠马路左边逆行，避免老是回头看车
夜跑的话衣服要显眼，最好有反光条
整理一个音乐列表（有些跑友不推荐，因为可能干扰你的跑步呼吸节奏，自行斟酌）

我的一些前端学习经历

Mon, 29 Sep 2014 11:20:12 +0000

应Qiu神的邀请分享一下前端学习经验，这里对前端知识体系架构就不做总结了，各位大神们的总结已经相当到位了，我就贡献几个个人认为还比较有用的链接，然后主要分享一下我在前端学习过程中的个人感受吧，如果能帮到想要入门的FE初学者（我就姑且假定为本文的读者受众类型了），让他们少走点弯路，每走一步都知道自己下一步的方向，这是最好了。各位大神的总结和分享详见Qiu神整理的FE-learning。

先说下，前端这个东西每个人都可以有适合自己的学习方法，这篇仅作参考，写的有点乱，各位凑合看。

缘起

我是属于误打误撞进了前端，之前一直往做游戏的方向去来着，搞过游戏网站，玩过游戏引擎，比如unity，unreal这种商业引擎，捣鼓了几个游戏原型，不过自打研一进了实验室，直接就被导师派去写了js，导师给了我半个月时间让我写个基于百度地图api的数据展示页面，虽然这个时间还是相当宽裕的，不过之前没怎么写过js，也不会用地图api，于是我就一边啃着《Javascript权威指南》（犀牛书）一边参考实验室前人留下的“代码”，总算是把功能都写出来了。那个页面算我的js入门作了，也是我前端学习路线的开始。

现在想来，虽然指派了去做前端，但是一直做下去并做好还是得靠兴趣维持，当然前端是一个趣味性十足的技术领域，而且社区每天都很“热闹”。

项目，下一个项目

我个人认为前端的学习，初学阶段你可以完全脱离开书本，以项目驱动。虽然我个人是从犀牛书开始啃的，不过如果你没有充足的时间，或者觉得啃大部头乏而无味的话，还是别像我这样。当然了如果决定啃书最好是把书里的例子都跟着敲一遍的。我上研之前没接触过js，4月份还没开学呢就直接被导师甩了个百度地图api的项目到脸上，接着就是各种ERP，地图数据展示，虽然换着花样来一点不重样，不过基本上都是前端的活，SSH和android开发也打过酱油，整个实验室就我一个人写前端敢信？富客户端SPA时代的后端就是一个restful接口，代码量基本都在前端啊，写的我一个人怎一个爽字了得…期间跟着导师感受了一把创业，每天从7点搞到晚上10点，也算是经历了一段快速成长期。

掌握一门技术先掌握它的大体框架，想一个能实现的点子，做一个能跑就行的demo，再去完善它的细节，等到demo完成了，对这门技术有了一个感性的认识，再去啃书，收获会大很多。我从开始原生js写到jquery，再到extjs，再到angularjs，从导师指定技术，到自己做技术选型，一个项目接着一个项目的练，就跟打怪升级似的。当然没有项目就去自己创造项目，动手实现自己的想法是件有乐趣和成就感的事。

收集癖和知识管理

前端学习有个特点，很多东西都很零碎，分散，需要你自己去整理、归纳和总结。在微博、知乎上follow了众多的大神，你不仅仅是为了听八卦，大神们的只言片语有时候留下的是无尽的余味，很有可能不经意间提到的一个词就成为你下一个学习的目标。收集这些信息，善用google，提问，思考。就像游戏里的收集要素，前端学习也是充满搜集要素的一个“游戏”，只不过你需要一个知识管理工具来充当物品栏和仓库，我所知道的大牛们无一不是知识管理工具的重度使用者。以前用的oneNote，那时候还没绑定到云存储，现在基本上用evernote，笔记已经累计到1200+篇。书签一直打算用delicious，因为它是基于tag管理的，但一直没用起来。当然重点不在于这些工具，但是趁手的工具可以提高你的学习效率。最关键当然是随时保持旺盛的学习欲望，你的目标是了解有关前端的一切（当然不是所有都要掌握，因为毕竟你的精力有限，而且现实的说这也不太可能）。

跟对神

这个可控性貌似不大…跟对老大这个就不多说了，一定程度要看造化。不过话说回来，多跟身边的高手交流是王道，这个高手不一定要多高，但是一定要对技术有热情。研一的时候热情高涨，每天7点进实验室门，然后发现有个家伙居然比我还早到。后来发现这家伙上午就走了，下午又来了，而且导师对此习以为常，原来这家伙晚上不睡觉通宵写代码，上午才跑回去睡。后来经常和这位神讨论问题，每次感觉经验值蹭蹭蹭的往上涨。然后实验室还有一位神，被前面这位通宵神形容为“只能望其项背，一直在追赶，从来没赶上”，两位神的特点都是什么都了解一点，所以什么都能跟你讨论得起来，我有段时间做了个读书计划，从c/c++到vc/mfc再到unix网络编程，最后一路看到java核心技术和MSDN上的C#编程指南，和神们也能扯得很high了。

总之就是这两位神把我拉进了坑，或者说从一个坑跳进另一坑，虽然两位神都不是搞前端的，不过技术之间总有相通之处。

读书

读书，多读书，读好书。在刘未鹏的博客里看到过一个公式，你第一个月的工资等于之前买过（读过）的技术书价格总和（这里说的技术书指那些经典的公认的好书）。讨论这个公式的正确性似乎没什么意义，然而它的合理性是毋庸置疑的，那就是多读经典技术书。最极端的一个例子，google的徐宥在我的大学里面说他扫荡了图书馆的整个TP312书架…对于前端的经典书籍，后面列了一个我收集的前端书列（如果有遗漏的前端经典好书，还请留言告诉我），有条件可以尝试刷一遍这些书，我也是在找完整的时间去啃完它们。之前说的，前端知识点松散，收集零散的知识点，从博客里快速学习等，这些只是前端学习的一个方面，如果你要想深入理解一个知识体系，了解它的来龙去脉，对它建立系统认识，读经典书还是必不可少的。

我从最开始啃完犀牛书，然后接着去看了其他一些和前端干系不大的经典技术书，再后来通过实验室的项目和自己弄的一些小项目逐渐对前端领域比较上路以后，又看了《Javascript模式》、《Javascript设计模式》、《编写可维护的Javascript》，后来了解到node并开始用node搞点小玩意儿，又看了本《NodeJS up and run》和《Mongodb权威指南》，不过感觉前者略坑。那会儿朴灵那本深入浅出（晒书么么哒）还没出，后来出了就去图书馆借来看完，这么看下来感觉还不错，不过感觉看的还是偏少了，还需要继续刷（参照上面的书列）。

前端的定位

前端的定位关乎到你需要吸收什么样的知识和技能，决定在技术世界里你对什么需要格外敏感。如果你认为前端仅仅停留在切页面，实现交互和视觉的要求，那你对前端的认识还停留在初级阶段。阿里终面的时候我问了考官这么个问题：前端技术日新月异，范围越扩越宽，标准越来越丰富，似乎任何一个触角都能伸出很远。怎么给前端一个合适的定位？考官给我分析了半天，然后总结成一句话，就是用户和网站的联结者，用户体验的创造者（原话不是这样，但大体是这个意思）。也就是说前端的终极目标其实就是创造用户体验，提升用户体验，以用户体验为中心。不管你是从交互设计上下手，还是从性能优化出发，或者改进工作流提升工作流效率，最终都是为了创造和提升用户体验，最终都要体现到用户体验这一点上来。我认为这个总结非常有道理（当然“用户体验”这个词太宽泛了，并且不仅仅是前端工程师的范畴，比如开发后台的时候对一个数据处理过程进行优化，提升了整体性能，这也是对用户体验的一个提升）。

现在的前端工程师做到一定阶段不可避免会接触到很多比切页面、实现视觉要求、实现交互等更深入的问题，比如前端自动化、图像编程、性能优化等等，再往后推一点就是PHP/JSP/ASP/nodeJs，过去后端模板一般属于后端的范畴，现在随着前端架构的演进，可能会让你去写后端模板的代码，需要用到后端语言（PHP/Java/C#等），这就是所谓大前端（然而这与前端的定位并不是相背离的，大前端处理的依然是与用户接触的部分，仍然是对用户体验的优化）。可能最常见或者被谈论最多的就是node，其实这几种技术选型都可以，bat三家据说百度用PHP比较多，阿里用node比较多。

玉伯在他的博客里提过所谓全端是横向的，全栈是纵向的。全端即所有的终端说白了都是前端，因为都关乎到用户体验，直接和用户接触。适应多终端的开发，要求你在web前端的基础上，可能还要去扩展android开发和ios开发的知识，好在由于hybrid开发方式的流行，对使用native语言开发的技能会要求的不那么深入。

全栈可以说是最适合初创公司的一种发展类型，广义上认为是从前端干到后端，从开发干到运维，这种就不说了，一般人应该不会想要去往这个方向发展，想要成为这种意义上的full-stack dev的，可能用不着来看我这篇文章了；而狭义上的全栈特指使用js语言从前端写到架设在nodeJs上的后端，前后端统一语言，统一编程模型，甚至公用同一套代码。更多了解全栈开发可以看看玉伯这篇说说全栈工程师。

以上是我对前端以及衍生出来的技术路线的一些浅薄理解，学习一个领域掌握它的整体上的走向和趋势还是挺重要的。另外如果想要对前端学习方向、职业成长路径有一个整体的认识，推荐看看拔赤总结的这篇前端开发十日谈。

最后

贡献几个对前端学习、面试有帮助的链接：

编写可维护的Javascript纪要

Sat, 13 Jul 2013 20:12:51 +0000

第一部分：编程风格

在大型项目开发中，因为项目可读性规范性的需要（就像《编写可维护性的Javascript》一书作者Nicholas Zakas大神所说，他们团队所有成员写出的代码就像是经同一个人之手写出的一样），风格约定要大于个人喜好这一点毋庸置疑，不过什么样才是好的编程风格约定？下面推荐一些实践中沉淀下来的代码规范和最佳实践：

缩进

缩进问题和编辑器问题一样是一个因为个人喜好和其他不管值得不值得争执的理由而存在争议的问题，目前存在两个流派，空格流和tab流。个人比较习惯于tab（4个空格距离），在这个问题上团队有协商的余地，不过关键还是两个字：一致。
一行截断成两行后，第2行开头缩进2个tab距离。

// 截断缩进用2个tab
var str = "abcdefghijkl" +
        "mnopqrstuvwxyz";

=号后面截断到下一行的开头要和前一行=号后面的第一个字母左对齐。

// =截断和上一行=号对齐
var s1 = s2
       = s3;

函数用小写开头（Camel case），构造函数用大写开头(Pascal case)。
语句块的写法：()两边留空格，{}两边留空格。

// 块语句的空格规范
if (flag === true) {
    alert('Yep!');
} else {
    alert('Nop!');
}

和NULL做比较

只在期待null值的时候和null做比较，比如在一个函数里返回一个null作为期待返回的对象的值。这时可以使用if (res === null) 或者 if( res !== null)来做判断。其他情况尽量不要用null来做检测。注意这里用的是===而不是==号来比较，因为undfined==null的结果是true，而null和undefined有着天壤之别，后面会提到。
尽量避免在代码中使用undefined，undefined表示变量未被初始化，或者变量未声明，也表示值是undefined的变量。而typeof运算符在检测以上三种情况时返回的都是undefined

// 不好的用法：和undefined比较
var cat;
if(cat === undefined) {
    doSomething();
}

尽管上面的代码能够正常运行，但是好的方式是下面这种：

// 好的用法，初始化为null
var cat = null;
if(cat === null) {
    doSomething();
}

这里不存在如上所述undefined的多种可能的混淆情形。

类型、属性判断

分清楚typeof和instanceof的适用情形

判断引用类型（比如Array和Date）时，不要用typeof，因为它返回总是object；应该用instanceof操作符，比如instanceof Array
instanceof不能跨帧使用，因为不同的帧的同名构造函数缺省为不同的构造函数，而typeof是可以跨域使用的。

in的妙用：

检测某个DOM元素是否包含某个方法： if(“querySelctorAll” in document)
跨帧该怎么检查是否是数组？（注意前面已经说过instanceof不能跨帧使用）使用Object.prototype.toString这个函数，或者使用ECMAScript5引入的Array.isArray()方法：

// 判断对象类型是否为数组
function isArray(val){
     if(typeof Array.isArray === 'function'){
          return Array.isArray(val);
     } else {
          return Object.prototype.toString.call(val) === '[object Array]';
     }
}

判断某个对象是否包含某个属性prop：不使用obj[‘prop’] == null/undefined，而是使用prop in obj（注意in会遍历原型链，如果只是判断是否是实例方法，则使用下面的hasOwnProperty方法）

hasOwnProperty是Object唯一不会遍历原型链的方法

判断某个实例属性用hasOwnProperty，但是因为IE8及更早版本的DOM并非继承自Object，调用DOM的hasOwnProperty方法时应先做判断：

// obj为一般对象
if (obj.hasOwnProperty('prop')) {
    ;// ...
}
// obj为DOM对象
if('hasOwnProperty' in obj && obj.hasOwnProperty()) {
    ;// ...
}

变量提升

到目前为止javascript没有引入块语句作用域，所以有些块语句里声明的变量可能会带来语义上的混淆。因此好的实践是将函数作用域或者对象作用域内所有声明的变量按照隐式变量提升的方式显式放到代码的开头部分。

第一句总是声明所有的局部变量
合并成一个var声明语句，这样成本更低，代码更短，下载更快。

// 所有局部变量合成为一个var声明语句
var s1, s2, s3,
    str1 = 'abcde',
    obj = { 1:'abc', 'xx':'oo' };

==和===比较

对象obj和数字做==比较时，会调用valueOf自动转换成数字进行比较，比如Boolean对象true和2比较 true==2返回false，因为true会首先转换成1
字符串和数字比较时，字符串使用Number()转换成数字，比如”0×19″ == 25
javascript的==隐式转换比较混乱，推荐总是使用===和!==提高代码可读性和可维护性

临时包装对象的特性

给变量用内置类型的字面量赋值以后，每次使用这个变量会产生一个临时包装对象，但是这个包装对象是每次用后即弃的。

// 临时包装对象用后即弃
var str = "abc";
str.flag = true;
console.log(str.flag);    // undefined

上面代码给str添加了一个flag属性并赋值为true，但是这个str临时包装对象赋完值立即弃掉了。因此下一句打印是打印不出这个属性的值的。如果使用new操作符来显式创建这个对象，结果还是一样的：

// 不好的写法：显式new一个内置类型包装对象
var str = new String("abc");
str.flag = true;
console.log(str.flag);    // undefined

上面的代码可能对开发者产生疑惑，因为第一句貌似是给str赋值了一个String对象。因此，为了避免不必要的代码歧义，建议不要使用new来创建内置类型对象。

第二部分：编程实践

前端代码应该尽量避免html/css/javascript代码之间的依赖性，提高各自的独立性。

避免使用css的express表达式：（因为浏览器会高频率的计算该表达式，严重影响性能。）

/* css里使用express表达式严重降低性能 */
.box {
    width: expression(document.body.offsetWidth + 'px');
}

不应在javascript代码中直接修改css样式，而是将所有css样式放在css文件中，并组织在类中，只在javascript代码中修改DOM的className属性，通过类的添加和删除来改变元素样式。
避免0级DOM绑定（在html中直接给元素onxxx属性赋值）： 1.可能onclick=”doSomething”的这个doSomething函数还没有加载，此时会报错或者点击没有响应； 2.加深了两个UI层（html和javascript）的耦合性，典型的紧耦合代码
一个全兼容的事件绑定函数：

// 全兼容的事件绑定函数
function addListener(target, type, handler) {
    if (target.addEventListener) {
        target.addEventListener(type, handler, false);
    } else if (target.attachEvent) {    // IE
        target.attachEvent('on' + type, handler);
    } else {
        target['on' + type] = handler;
    }
}

不要去破坏别人的模块。这里推荐一个无破坏性的命名空间定义方式：

// 无破坏性的命名空间定义方式
var yourGlobal = {
    namespace: function(ns) {
        var parts = ns.split('.'),
            object = this,
            i, len; 
        for (i = 0, len = parts.length; i < len; i++) {
            if (!object[parts[i]]) {
                object[parts[i]] = {};
            }
            object = object[parts[i]];
        }
        return object;
    }
}

隔离应用逻辑：

下面的代码直接将处理放到了handle函数里，如果在没有点击的情况下想要调用它就麻烦了：

// 不好的写法
function handleClick(event) {
    console.log(event.clientX, event.clientY);
}

将应用逻辑分离后的代码：

// 应用逻辑和事件处理隔离
function handleClick(event) {
    logPosition(event);
} 
function logPosition(event) {
    console.log(event.clientX, event.clientY);
}

不要分发事件对象

上面的代码处理还是有问题，因为logPosition的参数带有应用逻辑不需要的信息，因此继续改进：

// 改进：避免分发事件对象
function handleClick(event) {
    logPosition(event.clientX, event.clientY);
} 
function logPosition(x, y) {
    console.log(x, y);
}

对象的保护：Object的方法preventExtension、seal和freeze（保护强度递增）

// 对象的保护
'use strict'
// 不能增加属性
Object.preventExtension(cat);
console.log(Object.isExtensible(cat));
cat.age = 1;    // error.
// 不能增删属性
Object.seal(cat);
console.log(Object.isExtensible(cat));
console.log(Object.isSealed(cat));
delete cat.name;    // error.
cat.age = 1;    // error.
// 不能增删改
Object.freeze(cat);
console.log(Object.isExtensible(cat));
console.log(Object.isSealed(cat));
console.log(Object.isFrozen(cat));
cat.name = "Kitty";    // error.
delete cat.name;    // error.
cat.age = 1;    // error.

注意：以上error如果不使用strict模式的话会被浏览器默默吞掉。

尽量使用特性检测代替userAgent检测，比如if(document.getElementById()) { … } 而不是去判断用户代理if(navigator.userAgent.indexof(‘MSIE 7′) > -1)；特性检测的优点在于不依赖于浏览器。

常用文件结构：

src, build, lib, doc, release, test （一般src和test里的文件名存在一一对应的关系）

Javascript闭包详解

Mon, 29 Apr 2013 10:09:13 +0000

闭包的概念

之前微博上有人提了个问题，到底什么是闭包？ javascript秘密花园中有这么一段

闭包是 JavaScript 一个非常重要的特性，这意味着当前作用域总是能够访问外部作用域中的变量。因为函数是 JavaScript 中唯一拥有自身作用域的结构，因此闭包的创建依赖于函数。

维基闭包词条阐释了其本质

在计算机科学中，闭包（Closure）是词法闭包（Lexical Closure）的简称，是引用了自由变量的函数。这个被引用的自由变量将和这个函数一同存在，即使已经离开了创造它的环境也不例外。所以，有另一种说法认为闭包是由函数和与其相关的引用环境组合而成的实体。

维基的解释或许有点抽象，但是闭包作为一个概念理解起来并不困难，你可以看做是内部函数的作用域延伸到了外部环境中。

javascript中的闭包

js是词法作用域语言，查找内部函数名字是总是从当前作用域开始，沿着作用域链一层层的向上查找。但是在函数外部想要修改函数内部的变量一般是不可能的，因为作用域链不能向下查找，所以它找不到要访问的函数内部变量的名字。而闭包就是把这种不可能变为可能，把函数内部的作用域扩展到函数外部来。

来看这样一个例子：

function init() {
    var name = "DEFINITELY MAYBE";
    function displayName() {
        alert(name);
    }
    displayName();
}
init();

init()执行时调用内部的函数displayName()，displayName()用到了name这个变量，执行结束以后，name变量不会继续在内存里驻留，而是被GC回收。这段代码和闭包有什么关系呢？它本身不是一个闭包，它本身只是一个功能函数。我们可以把它变成一个闭包，只需要把定义在init函数内部的displayName函数当做一个变量返回：

function makeFunc() {
    var name = "DEFINITELY MAYBE";
    function displayName() {
        alert(name);
    }
    return displayName;
}
var myFunc = makeFunc();
myFunc();

makeFunc()执行完毕，返回的函数displayName就是一个闭包，因为它包含它所在作用域的上下文信息，它是displayName这个函数以及它的相关引用环境组合而成的实体。上一段代码在makeFunc()执行结束以后，它内部定义的变量name会被GC清理，但是闭包因为包含了上下文信息，所以name这个变量会一直存在于内存中。所以在最后一句myFunc()的调用中，alert(name);能够成功执行，因为这个name并没有被gc回收，而是一直伴随着闭包而存在。

在js中，闭包可以实现类定义中私有属性的隐藏。我们看以下一段代码，它定义了一个类Monster，其中的隐藏字段可以通过get和set方法访问，但是用户代码无法直接访问它（undefinded）。

function Monster(){
    var _name;
    function getName(){
        return _name;
    }
    function setName(name){
        _name = name;
    }
    return {
        getName: getName,
        setName: setName,
    }
}
 
var godzilla = Monster();
godzilla.setName('Godzilla');

用户可以通过godzilla变量所引用的闭包访问其作用域上下文环境的name属性，但是不能通过用户代码直接访问name变量，这样从面向对象的角度看是隐藏了内部属性。

通过函数直接量构造一个闭包产生一个singletonMonster单例：

var singletonMonster = (function(){
    var _name = 'Godzilla';
    function getName(){
        return _name;
    }
    function setName(name){
        _name = name;
    }
    return {
        getName: getName,
        setName: setName,
    }
})();

虽然以上代码每次返回的实例内部的属性是相同的引用，改变某个实例的属性会同时改变另一个，但是却并不是正确意义上的单例的构造方式，因为每次调用返回的对象实例引用不是同一个引用。正确的带私有属性的单例构造方式可以参考以下两种：

方式一：

function Singleton() {
	var _instance;
	var _name = 'Godzilla';
	Singleton = function Singleton () {
		return _instance;
	}
	Singleton.prototype = this;
	_instance = new Singleton();
	_instance.constructor = Singleton;
	_instance.setName = function(name) {
		_name = name;
	};
	_instance.getName = function() {
		return _name;
	}
	return _instance;
}

方式二：

var Singleton;
(function() {
	var _instance; 
	var _name = 'Godzilla';
	Singleton = function Singleton() {
		if (_instance) {
			return _instance;
		}
		_instance = this;
		this.getName = function() {
			return _name;
		};
		this.setName = function(name) {
			_name = name;
		};
	}
})();

以后有机会再详细讨论一下javascript中单例的各种构建方式及其优缺点。

闭包的内存效率

闭包并没有多么高深，实际上闭包在js中需要谨慎使用，一般在类/对象编程中使用prototype而不是闭包，因为闭包是直接将属性添加到构造函数中，在构造实例时，会把构造函数的所有属性都实例化一遍，同一个类的同一个方法在每个实例中都存储了一个相同的版本，这样会造成资源的严重浪费。解决这个问题就是把实例方法放到prototype中，而实例属性则放在类的构造函数中。这里暂不讨论prototype的作用，prototype是js另一个重要特性，和基于class的语言不同，js是基于prototype的语言，类的继承必须通过prototype实现。

最近在网上看到一个说法，优化闭包的内存效率，意思只要这个闭包存在，闭包所包含的上下文环境中的每个变量都不会被GC收集，都需要手动清空为null或undefined，实在是大雾。GC的收集机制不是看取值，而是看是否被引用，所以对于以下这个例子，在Foo函数体内返回语句之前加上_noUse = null实际上没有意义。GC只要看到某个局部变量没有被引用了，这个函数执行结束就在下次垃圾回收时自动将该变量清理掉。

function Foo(){
    var _bar = 'bar';
    var _noUse = 2;
    function getFoo(){
        return _bar;
    }
    function setFoo(sm){
        _bar = sm;
    }
    _noUse = null;  // no need to add this statement.
    return {
        getFoo: getFoo,
        setFoo: setFoo,
    }
}

常见的错误用法

援引mozilla开发者网络上的一个典型例子

<p id="help">Helpful notes will appear here</p>
<p>E-mail: <input type="text" id="email" name="email"></p>
<p>Name: <input type="text" id="name" name="name"></p>
<p>Age: <input type="text" id="age" name="age"></p>

js代码:

function showHelp(help){
    document.getElementById('help').innerHTML = help;
}
function setupHelp(){
    var helpText = [
        {'id': 'email', 'help': 'Your e-mail address'},
        {'id': 'name', 'help': 'Your full name'},
        {'id': 'age', 'help': 'Your age (you must be over 16)'}
    ];
    for(var i = 0, l = helpText.length; i < l; i++){
        var item = helpText[i];
        document.getElementById(item.id).onfocus = function(){
            showHelp(item.help);
        }
    }
}
setupHelp();

上面这个例子，也许你会认为对于每个input都绑定了自己的一个事件响应，显示相对应的提示信息。代码的执行结果也许会让你失望，所有的input标签都绑定到同一个事件响应，三个input的提示信息是一样的，都是最后一条。

记住在循环中使用闭包是需要谨慎小心的，这里onfocus实际上是用一个闭包赋值，这个闭包所引用的执行环境就是SetupHelp()函数的作用域，三个绑定函数所引用的执行环境实际上都是这个SetupHelp()内部作用域，这时闭包里的执行代码showHelp(item.help)每次调用都是SetupHelp()函数中定义的item变量，而item在SetupHelp()执行结束的时候已经被赋值为helpText[2]了，所以每次显示的都是helpText[2].help的内容。

上面强调的是闭包，如果我们从执行角度来看上面代码的问题，可能来得更清晰。从执行过程来看，在绑定的事件处理的过程中包裹showHelp()的匿名函数并没有执行，所以showHelp的实参并没有确定，而是到执行的时候去确定，这时根据闭包的原理，item用的是已经改变为helpText[2]的item，这时不论哪个事件绑定函数取到的实参都是这个值，导致了错误上述结果。

要解决这个问题，我们可以为每个事件绑定一个单独的闭包，这样它们各自的执行环境不同，引用的item值也不同。

function showHelp(help){
    document.getElementById('help').innerHTML = help;
}
function makeHelpCallback(help){
    return function(){
        showHelp(help);
    };
}
function setupHelp(){
    var helpText = [
        {'id': 'email', 'help': 'Your e-mail address'},
        {'id': 'name', 'help': 'Your full name'},
        {'id': 'age', 'help': 'Your age (you must be over 16)'}
    ];
    for(var i = 0, l = helpText.length; i < l; i++){
        var item = helpText[i];
        document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
    }
}
setupHelp();

从执行角度观察，makeHelpCallback()在onfocus绑定过程中执行，返回的函数就是所要绑定的函数，是一个闭包, 这个闭包的上下文环境是makeHelpCallback(item.help)的作用域，每次绑定事件时对应返回的闭包都是一个不同的makeHelpCallback()作用域（因为item.help不同）。item.help在执行过程中已经被传递到makeHelpCallback内层的匿名函数闭包中，这时help是不变的，不会因为后面循环代码中item改变而改变。

作为一个简单的解决方案，也可以直接给ShowHelp加上一个匿名包裹函数：

document.getElementById(item.id).onfocus = function(e){
    return function(){
        showHelp(e);
    }
}(item.help);

闭包实现函数工厂

上面的makeHelpCallback实际上实现了一个函数工厂，传递不同的参数返回对应的函数。每个闭包执行函数都是独特的，因为每次调用的时候传递的参数不同。

function makeHunter(monster){
    return function(){
        console.log('Hah, you\'re a ' + monster + 'hunter!');
    }
}
var gozillaHunter = makeHunter('gozilla');
var zombieHunter = makeHunter('zombie');
console.log(gozillaHunter());
console.log(zombieHunter());

上面的函数工厂根据不同的参数产生不同的Hunter函数。注意虽然产生的闭包共享同一个函数体，即makeHunter函数体，但是每一个闭包对应的上下文坏境是不同的，在闭包gozillaHunter的上下文中，monster的值是’gozilla’，而在闭包zombieHunter的对应上下文中，monster的值是’zombie’，它们是两个完全不同的上下文坏境。