• less 能加快css编写?


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

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

  • 相关阅读:
    MMDrawerController(第三方类库)侧边栏的使用
    NSString 字符串的一些操作
    AVAudioPlayer实现音乐播放(AFSoundManager的简单介绍)
    歌词同步小控件
    豆瓣FM音乐播放器
    SDWebImage的简单使用
    用系统图标创建UITabBarController
    LeetCode 树(N叉树遍历和二叉树遍历及其他)
    《汇编语言》——王爽 第15章 外中断
    《汇编语言》——王爽 第14章 端口
  • 原文地址:https://www.cnblogs.com/WinKi/p/3480516.html
Copyright © 2020-2023  润新知