真心不知道用了less之后，怎么能让css写的更快。有时你定义了变量还得回到开头去看看。关键是定义的变量在css不停的修改中会变得没什么用。
用了之后没觉得会加快，感觉让我更加郁闷，求各位大神指点指点，是不是我在哪个地方错了。
比如：
@color:#ccc;
.border(@color:#ccc){
border:1px solid @color;
}
.div1{
color:@color;
.border(red);
}
.div2{
color:@color;
.border(blue);
}
忽然觉得这个div2字体颜色可能不太适合要换，然后通过四则运算color:@color + 33333(晕这个加起来是什么我也不知道。。)，然后div2的border-bottom要没有边框，改div2
.div2{
color:@color+333333;
border-top:1px solid blue;
border-left:1px solid blue;
border-right:1px solid blue;
}
总感觉css要经常变来变去所以是没办法定义一些框框去限定它。就算把整体的框架都布局好，在细节方面还是要经常修改。我用了less改一个已经写完的css（其中一部分），但是没发现效率高在哪里，看着完整的css改也没感觉快到哪里去，更别说在开发过程中了。唯一能让我觉得有用的地方就是嵌套了，其他方面真没有体验到。
原来的css：
*html {
background-image: url(about:blank);
background-attachment: fixed;
}
body {
margin:;
padding:;
background: #F6E8CB;
font-size: 12px;
height: 1200px;
}
ul {
list-style: none;
margin:;
padding:;
}
span {
margin:;
padding:;
}
.selectSlide {
width: 160px;
padding: 0 10px 10px 10px;
}
.selectSlide span {
display: inline-block;
line-height: 20px;
}
.selectSlide span a {
color: #888;
text-decoration: none;
}
.selectSlide span a:hover {
text-decoration: underline;
}
.hide {
display: none;
}
.topmenu {
width: 70px;
float: right;
height: 30px;
line-height: 30px;
}
.topmenu span {
width: 14px;
height: 30px;
display: inline-block;
cursor: pointer;
background: url(../img/topmenu.jpg) no-repeat;
}
.topmenu .span1 {
background-position: -5px -32px;
}
.topmenu .span1on {
background-position: -5px 2px;
}
.topmenu .span2 {
background-position: -28px -32px;
}
.topmenu .span2on {
background-position: -28px 2px;
}
用less 来做修改：
*html {
background-image: url(about:blank);
background-attachment: fixed;
}
.init_mp(@mp:0) {
margin: @mp;
padding: @mp;
}
.init_wh(@width:0,@height:0) {
width: @width;
height: @height;
}
.init_position(@position:0px 0px) {
background-position: @position;
}
body {
.init_mp(0);
background: #F6E8CB;
font-size: 12px;
height: 1200px;
}
ul {
list-style: none;
.init_mp(0);
}
span {
.init_mp(0);
}
.selectSlide {
width: 160px;
padding: 0 10px 10px 10px;
span {
display: inline-block;
line-height: 20px;
a {
color: #888;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
.hide {
display: none;
}
.topmenu {
float: right;
.init_wh(30px,70px);
line-height: 30px;
span {
.init_wh(14px,30px);
display: inline-block;
cursor: pointer;
background: url(../img/topmenu.jpg) no-repeat;
}
.span1 {
.init_position(-5px -32px);
}
.span1on {
.init_position(-5px 2px);
}
.span2 {
.init_position(-28px -32px);
}
.span2on {
.init_position(-28px 2px);
}
}
真心希望是我把这个东西用错了，各位大神给点意见吧。