less 24栅格

 less 代码如下

*{margin:  0;padding: 0;}

.demo{

  height: 50px;

  display: block;

  width: 100%;

  &.r{

    background: #ff0000;

  }

  &.b{

    background: #0000ff;

  }

  &.g{

    background: #00ff00;

  }

}

.row{

  padding: relative;

  box-sizing: boreder-box;

  &::after,&::before{

    content: '';

    display: table;

  }

  &::after{

    clear: both;

  }

}

[class*="col-"]{

  box-sizing: border-box;

  float: left;

}

.loop (@i) when(@i <= 24 ){

  .col-@{i}{

    width: (1/24 * @i  * 100) * 1%;

  }

  .loop((@i + 1));

}

.loop(1);

Html代码

    <div class="row">

      <div class="col-24"><span class="demo r"></span></div>

      <div class="col-6"><span class="demo  b"></span></div>

      <div class="col-18"><span class="demo g"></span></div>

      <div class="col-8"><span class="demo r"></span></div>

      <div class="col-8"><span class="demo b"></span></div>

      <div class="col-8"><span class="demo g"></span></div>

    </div>