LESS笔记/注意手册（更新中）

众所周知，写CSS是一个无聊加无聊的事情，各种重复的代码，代码臃肿。这时Less诞生了，Less是一个CSS编译器，方便前端人员更高效的写CSS(当然还有Sass，这个以后说)。

很多人被Less环境搞的死去活来，其实不需要，下载koala软件就行了(http://koala-app.com/index-zh.html)，他会实时监控CSS文件，当你ctrl+s保存的时候，他会检测有没有错误，比命令行下方便很多。

一：Less写变量函数时，需要注意后面要带括号，不然变量函数会输出，如下

 1 .icon(){
 2     padding:0 10px 0 10px;
 3     position: relative;
 4     top: 1px;
 5     display: inline-block;
 6     font-family: 'Glyphicons Halflings';
 7     font-style: normal;
 8     font-weight: 400;
 9     line-height: 1;
10     -webkit-font-smoothing: antialiased;
11     -moz-osx-font-smoothing: grayscale;
12 }

带上括号之后Less并不会输出，只有你调用的时候才会输出，原因很简单，不带括号less会认为这是一个CSS代码，而不是less专有的代码语法。

二：当使用LESS写box-shadow函数时，很多人会这样写

1 .box-shadow(@shadow){
2   -webkit-box-shadow:@shadow;
3   -moz-box-shadow:@shadow;
4   -ms-box-shadow:@shadow;
5   box-shadow:@shadow;
6 }

如果这样写就错了，我们有时会用box-shadow来完成多个外阴影和多个内阴影。如果用这个方法写多个阴影时，应该是这样
.box-shadow(0 0 10px @color1,inset 0 0 10px @color1); 那么你会发现，绝对会错。这时该怎么办呢，你可以再写一个box-shadow(不用担心会占用输出CSS的文件的大小，函数本身是不会输出的，只有当你调用的时候才会输出)，那么该怎么写呢，你可以这样

1  .box-shadow2(@shadow,@shadow2){
2 
3   -webkit-box-shadow:@shadow,@shadow2;
4   -moz-box-shadow:@shadow,@shadow2;
5   -ms-box-shadow:@shadow,@shadow2;
6   box-shadow:@shadow,@shadow2;
7 }

写的时候，你可以这样写 .box-shadow2(0 0 10px @color1,inset 0 0 10px @color1); 就可以解决这个问题了。

三：有时在Less里会用到!important (在函数里)，比如下面这段代码
函数时这样的

1  .box-shadow(@shadow){
2   -webkit-box-shadow:@shadow;
3   -moz-box-shadow:@shadow;
4   -ms-box-shadow:@shadow;
5   box-shadow:@shadow;
6 }

调用的时候是这样的

1 .box-shadow(none !important);
那你放心吧，绝对会出错，Less遇到!时，并不会原样输出，这时可以用Less自带的函数e或则~来解决(e函数已经被~取代)。可以像下面这样
1 .box-shadow(~"none !important");
注意要带""。就可以了

posted on 2015-02-21 13:42 Black-Hole 阅读(208) 评论(0) 编辑收藏举报