真心不知道用了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: 0; padding: 0; background: #F6E8CB; font-size: 12px; height: 1200px; } ul { list-style: none; margin: 0; padding: 0; } span { margin: 0; padding: 0; } .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); } }
真心希望是我把这个东西用错了,各位大神给点意见吧。