随笔 - 7,  文章 - 0,  评论 - 24

     真心不知道用了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);
  }
}

 真心希望是我把这个东西用错了,各位大神给点意见吧。

 

posted on 2013-12-18 16:31  |WinKi|  阅读(678)  评论(0编辑  收藏