1.当你按下ctrl+s 或切换到浏览器，浏览器将会会自动刷新
如果你修改的是html文件将会刷新网页
如果你修改的是css或less，这个less文件或css文件将会被重载而不是刷新整个页面（这个特性在写单页面应用时尤为实用）
2.模板引入
考虑以下情况
我们需要创建如下的模板，并且在不同的页面高亮不同的li
<nav><ul><li><a href="">1</a></li><li><a href="">2</a></li><li><a href="">3</a></li><li><a href="">4</a></li><li><a href="">5</a></li><li><a href="">6</a></li></ul>
</nav>
这时候可以在引入的时候传入参数 (假设这个模板名字为nav)
{nav{jquery选择器,第几个,要加的类}}jquery选择器默认值：li，选填第几个：无默认值，必填要加的类默认值：on，选填{{nav(2)}}
上面的模板将会被编译为(虽然编程语言大部分从0开始计数，但是这里从1开始)
<nav><ul><li><a href="">1</a></li><li class="on"><a href="">2</a></li><li><a href="">3</a></li><li><a href="">4</a></li><li><a href="">5</a></li><li><a href="">6</a></li></ul>
</nav>
3.关于浏览器前缀
事实上你不需要再写浏览器前缀（除了-webkit-line-clamp），auto-prefix插件会根据设置自动添加前缀并清理掉不必要的前缀
3.less的嵌套（less详细文档）
通常我们给一个元素和它的子元素编写样式会像下面一样，每次都要重复写父级元素
.banner {height: 20px;
}
.banner ul {color: red;
}
.banner li {color: blue;
}
.banner li a {font-size: 14px;
}在less文件里你可以这么写，将会编译成跟上面一样的内容
.banner{height: 20px;ul{color:red;}li{color:blue;a{font-size: 14px;}}
}4.媒体查询
你可以引入以下的less文件以快速的进行响应式网页的开发，复制文本到你的less文件开头或者新建less文件到less文件夹均可
@lg:1200px;
@md:992px;
@sm:768px;
@xs:480px;.max(@screenWidth,@rules){@media screen and (max-width:@screenWidth){@rules();}
}
.min(@screenWidth,@rules){@media screen and (min-width:@screenWidth){@rules();}
}.lg(@rules) {@media screen and (max-width:@lg) {@rules();}
}
.md(@rules) {@media screen and (max-width: @md) {@rules();}
}
.sm(@rules) {@media screen and (max-width: @sm) {@rules();}
}
.xs(@rules) {@media screen and (max-width: @xs) {@rules();}
}
在下面情况中我们希望在小屏幕的时候header的高度变为20
.header{font-size: 18px;color:red;width: 100%;height: 30px;}只需要加上.sm({height: 20px;})
.header{font-size: 18px;color:red;width: 100%;height: 30px;.sm({height: 20px;});
}将会被编译为
.header {font-size: 18px;color: red;width: 100%;height: 30px;
}
@media screen and (max-width: 768px) {.header {height: 20px;}
}下面是更多例子
.hedaer{font-size: 18px;color:red;width: 100%;height: 30px;.md({font-size: 16px;height: 25px;});.sm({font-size: 14px;height: 20px;});.max(320px,{font-size: 16px;height: 15px;});.min(320px,{box-shadow: 5px 5px 5px red});
}
将会被编译为
.hedaer {font-size: 18px;color: red;width: 100%;height: 30px;
}
@media screen and (max-width: 992px) {.hedaer {font-size: 16px;height: 25px;}
}
@media screen and (max-width: 768px) {.hedaer {font-size: 14px;height: 20px;}
}
@media screen and (max-width: 320px) {.hedaer {font-size: 16px;height: 15px;}
}
@media screen and (min-width: 320px) {.hedaer {box-shadow: 5px 5px 5px red;}
}
