css susy网格系统

Posted 2021-05-13

@import "susy";
$col-nums: 12;

$susy: (
  columns: $col-nums,
  gutters: 1/4,
  gutter-position: inside,
  flow: rtl,
  container: 90%
);

.row {
 @include clearfix();  
}

@include border-box-sizing;

[class*="c-"] {
  @include gutters;
  float: left;
}

@for $i from 1 through $col-nums {
  .c-#{$i} {
     width: span($i of 12);
  }
}

.row {
  *zoom: 1;
}
.row:before, .row:after {
  display: table;
  content: '';
  line-height: 0;
}
.row:after {
  clear: both;
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

[class*="c-"] {
  padding-right: 0.83333%;
  padding-left: 0.83333%;
  float: left;
}

.c-1 {
  width: 8.33333%;
}

.c-2 {
  width: 16.66667%;
}

.c-3 {
  width: 25%;
}

.c-4 {
  width: 33.33333%;
}

.c-5 {
  width: 41.66667%;
}

.c-6 {
  width: 50%;
}

.c-7 {
  width: 58.33333%;
}

.c-8 {
  width: 66.66667%;
}

.c-9 {
  width: 75%;
}

.c-10 {
  width: 83.33333%;
}

.c-11 {
  width: 91.66667%;
}

.c-12 {
  width: 100%;
}