标签:
众所周知,写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 }
1 .box-shadow(@shadow){ 2 -webkit-box-shadow:@shadow; 3 -moz-box-shadow:@shadow; 4 -ms-box-shadow:@shadow; 5 box-shadow:@shadow; 6 }
标签:
原文地址:http://www.cnblogs.com/Black-Hole/p/4296977.html