css 栅格化写法

08/14/2015 01:53:00 by Passingwind // 22 Comments

使用 Less 写法：

// 栅格 系统
.cols {
    // 定义 间距
    @col-margin: 30px;

    // 清空浮动
    .clearfix();
    // 容器 左右 各 加大 间距的一半
    margin-right: -@col-margin /2;
    margin-left: -@col-margin /2;
    // 输出每栏
    .col-loop(@n,@i) when (@i =< @n) {
        .col-@{i} {
            width: percentage( @i * ( 1 / @n ) ); // 均匀分 100%
            float: left;
            position: relative;
            min-height: 1px;
            padding-left: @col-margin /2; // 生成间距
            padding-right: @col-margin /2; // 生成间距
        }

        .col-loop(@n,( @i + 1) ); // 再次循环
    }
    // 定义输出 12 栏
    .col-loop(12,1);
    // 输出 offset
    .col-offset-loop( @n,@i ) when (@i =< @n) {
        .col-offset-@{i} {
            margin-left: percentage( @i * ( 1 / @n ) );
        }

        .col-offset-loop(@n,( @i + 1) ); // 再次循环
    }
    // 定义输出 offset 12 栏
    .col-offset-loop(12,1);
}

输出结果：

.cols {
  margin-right: -15px;
  margin-left: -15px;
}
.cols:before,
.cols:after {
  content: " ";
  display: table;
}
.cols:after {
  clear: both;
}
.cols:before,
.cols:after {
  content: " ";
  display: table;
}
.cols:after {
  clear: both;
}
.cols .col-1 {
  width: 8.33333333%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.cols .col-2 {
  width: 16.66666667%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.cols .col-3 {
  width: 25%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.cols .col-4 {
  width: 33.33333333%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.cols .col-5 {
  width: 41.66666667%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.cols .col-6 {
  width: 50%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.cols .col-7 {
  width: 58.33333333%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.cols .col-8 {
  width: 66.66666667%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.cols .col-9 {
  width: 75%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.cols .col-10 {
  width: 83.33333333%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.cols .col-11 {
  width: 91.66666667%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.cols .col-12 {
  width: 100%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.cols .col-offset-1 {
  margin-left: 8.33333333%;
}
.cols .col-offset-2 {
  margin-left: 16.66666667%;
}
.cols .col-offset-3 {
  margin-left: 25%;
}
.cols .col-offset-4 {
  margin-left: 33.33333333%;
}
.cols .col-offset-5 {
  margin-left: 41.66666667%;
}
.cols .col-offset-6 {
  margin-left: 50%;
}
.cols .col-offset-7 {
  margin-left: 58.33333333%;
}
.cols .col-offset-8 {
  margin-left: 66.66666667%;
}
.cols .col-offset-9 {
  margin-left: 75%;
}
.cols .col-offset-10 {
  margin-left: 83.33333333%;
}
.cols .col-offset-11 {
  margin-left: 91.66666667%;
}
.cols .col-offset-12 {
  margin-left: 100%;
}

Categories: html.css.js

Tags: css , less