html 由SassMeister.com生成。

Posted 2021-05-11

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-3"><p>1</p></div>
    <div class="col-sm-12 col-md-6 col-lg-3"><p>1</p></div>
    <div class="col-sm-12 col-md-6 col-lg-3"><p>1</p></div>
    <div class="col-sm-12 col-md-6 col-lg-3"><p>1</p></div>
  </div>
</div>

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: 800px;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

@media (max-width: 480px) {
  .col-xs-1 {
    float: left;
    width: 8.33333%;
  }

  .col-xs-2 {
    float: left;
    width: 16.66667%;
  }

  .col-xs-3 {
    float: left;
    width: 25%;
  }

  .col-xs-4 {
    float: left;
    width: 33.33333%;
  }

  .col-xs-5 {
    float: left;
    width: 41.66667%;
  }

  .col-xs-6 {
    float: left;
    width: 50%;
  }

  .col-xs-7 {
    float: left;
    width: 58.33333%;
  }

  .col-xs-8 {
    float: left;
    width: 66.66667%;
  }

  .col-xs-9 {
    float: left;
    width: 75%;
  }

  .col-xs-10 {
    float: left;
    width: 83.33333%;
  }

  .col-xs-11 {
    float: left;
    width: 91.66667%;
  }

  .col-xs-12 {
    float: left;
    width: 100%;
  }
}
@media (max-width: 768px) and (min-width: 481px) {
  .col-sm-1 {
    float: left;
    width: 8.33333%;
  }

  .col-sm-2 {
    float: left;
    width: 16.66667%;
  }

  .col-sm-3 {
    float: left;
    width: 25%;
  }

  .col-sm-4 {
    float: left;
    width: 33.33333%;
  }

  .col-sm-5 {
    float: left;
    width: 41.66667%;
  }

  .col-sm-6 {
    float: left;
    width: 50%;
  }

  .col-sm-7 {
    float: left;
    width: 58.33333%;
  }

  .col-sm-8 {
    float: left;
    width: 66.66667%;
  }

  .col-sm-9 {
    float: left;
    width: 75%;
  }

  .col-sm-10 {
    float: left;
    width: 83.33333%;
  }

  .col-sm-11 {
    float: left;
    width: 91.66667%;
  }

  .col-sm-12 {
    float: left;
    width: 100%;
  }
}
@media (max-width: 1024px) and (min-width: 769px) {
  .col-md-1 {
    float: left;
    width: 8.33333%;
  }

  .col-md-2 {
    float: left;
    width: 16.66667%;
  }

  .col-md-3 {
    float: left;
    width: 25%;
  }

  .col-md-4 {
    float: left;
    width: 33.33333%;
  }

  .col-md-5 {
    float: left;
    width: 41.66667%;
  }

  .col-md-6 {
    float: left;
    width: 50%;
  }

  .col-md-7 {
    float: left;
    width: 58.33333%;
  }

  .col-md-8 {
    float: left;
    width: 66.66667%;
  }

  .col-md-9 {
    float: left;
    width: 75%;
  }

  .col-md-10 {
    float: left;
    width: 83.33333%;
  }

  .col-md-11 {
    float: left;
    width: 91.66667%;
  }

  .col-md-12 {
    float: left;
    width: 100%;
  }
}
@media (min-width: 1025px) {
  .col-lg-1 {
    float: left;
    width: 8.33333%;
  }

  .col-lg-2 {
    float: left;
    width: 16.66667%;
  }

  .col-lg-3 {
    float: left;
    width: 25%;
  }

  .col-lg-4 {
    float: left;
    width: 33.33333%;
  }

  .col-lg-5 {
    float: left;
    width: 41.66667%;
  }

  .col-lg-6 {
    float: left;
    width: 50%;
  }

  .col-lg-7 {
    float: left;
    width: 58.33333%;
  }

  .col-lg-8 {
    float: left;
    width: 66.66667%;
  }

  .col-lg-9 {
    float: left;
    width: 75%;
  }

  .col-lg-10 {
    float: left;
    width: 83.33333%;
  }

  .col-lg-11 {
    float: left;
    width: 91.66667%;
  }

  .col-lg-12 {
    float: left;
    width: 100%;
  }
}
p {
  padding: 20px;
  color: white;
  background: #9b59b6;
  margin: 20px;
}

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

$settings: (
    maxWidth: 800px,
    columns: 12,
    margin: 15px,
    breakpoints: (
        xs: "(max-width : 480px)",
        sm: "(max-width : 768px) and (min-width: 481px)",
        md: "(max-width : 1024px)  and (min-width: 769px)",
        lg: "(min-width : 1025px)"
    )   
);

@mixin renderGridStyles($settings){
  .container {
    padding-right: map-get($settings, "margin");
    padding-left: map-get($settings, "margin");
    margin-right: auto;
    margin-left: auto;
    max-width: map-get($settings,"maxWidth");
  }
  
  .row {
    margin-right: map-get($settings, "margin") * -1;
    margin-left: map-get($settings, "margin") * -1;
  }
  $breakpoints: map-get($settings, "breakpoints");
  @each $key, $breakpoint in $breakpoints {
    @include media($breakpoint) {
      @include renderGrid($key, $settings);
    }
  }
}

@mixin renderGrid($key, $settings) {
  $i: 1;
  @while $i <= map-get($settings, "columns") {
    .col-#{$key}-#{$i} {
      float: left;
      width: 100% * $i / map-get($settings,"columns");
    }
    $i: $i+1;
  }
}

@mixin media($queryString){
    @media #{$queryString} {
      @content;
    }
}

@include renderGridStyles($settings);

p {
  padding: 20px;
  color: white;
  background: #9b59b6;
  margin: 20px;
}

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-3"><p>1</p></div>
    <div class="col-sm-12 col-md-6 col-lg-3"><p>1</p></div>
    <div class="col-sm-12 col-md-6 col-lg-3"><p>1</p></div>
    <div class="col-sm-12 col-md-6 col-lg-3"><p>1</p></div>
  </div>
</div>