scss 网格系统列子列mixin sass

Posted 2021-05-18

/*--GRID--*/

@mixin columns-blocks($theGutter, $guttername) {
  .blocks-#{$guttername} {
    margin-right: 0;
    margin-left: 0;
    @include responsive('min', $w-mobile-s) {
      margin-right: toEm($theGutter * -1);
      margin-left: toEm($theGutter * -1);
    }
    @include cols($theGutter); //---DOBLE
  }
}
$fix-factor:1;
@mixin cols($theGutter) {
  @for $i from 2 through 4 {
    &.colsx#{$i} {
      .block {
        padding-right: 0;
        padding-left: 0;
        @include responsive('min', $w-mobile) {
          padding-right: toEm($theGutter);
          padding-left: toEm($theGutter);
        }
        @if $i>3 {
          @include responsive('min', $w-mobile-s) {
            width: 100% / 2;
            
          }
        }
        @include responsive('min', $w-mobile) {
          width: 100% / $i;

        }
      }
    }
  }
}
@mixin grid-system {
  $decimal: ($row-medium / 10);
  $porcentaje: ($row-medium * 10%);
  .full_c {
    width: 100%;
  }
  .row_medium {
    max-width: toEm($global-width_num * $decimal);
    width: ($percent-width * $decimal);
    margin-right: auto;
    margin-left: auto;
    @include clean;
    @include responsive('max', $w-mobile) {
      width: $porcentaje;
    }
    .row_medium {
      width: 100%;
    }
  }
  .row_c {
    max-width: $global-width;
    width: $percent-width;
    margin-right: auto;
    margin-left: auto;
    @include clean;
    .row_c {
      width: 100%;
      max-width: none;
    }
    .row_medium {
      max-width: $porcentaje;
      width: $porcentaje;
      .row_medium {
        width: 100%;
        max-width: none;
      }
    }
  } /////////////////////
  //-----COLUMN
  div[class*="blocks"] {
    @include flex;
  
    //@include clean;
  }
  /*-- GENERALES BLOQUES --*/
  .block {
    position: relative;
    @include clean;
    box-sizing: border-box;
    float: left;
    width: 100%;
    margin-bottom: toEm(20);
  }
  @include columns-blocks($gutter, 'gutterx1');
  @include columns-blocks($gutter*2, 'gutterx2');
  @include columns-blocks($gutter/2, 'gutterx05'); 

  /*///////////////////*/
  //-----LATERALS
  $cols: 4;
  .col-izq,
  .col-der {
    width: ((100% / $cols) * ($cols - 1));
    box-sizing: border-box;
    @include responsive('max', $w-mobile) {
      width: 100%;
      margin-bottom: toEm(40);
    }
  }
  .col-der {
    float: right;
    padding-left: toEm($gutter * 4);
    @include responsive('max', $w-mobile) {
      padding: 0;
    }
  }
  .col-izq {
    float: left;
    padding-right: toEm($gutter * 4);
    @include responsive('max', $w-mobile) {
      padding: 0;
    }
  }
  .col-lateral {
    box-sizing: border-box;
    width: (100% / $cols);
    float: right;
    @include responsive('max', $w-mobile) {
      width: 100%;
      margin-bottom: toEm(40);
    }
    &>* {
      margin-bottom: toEm(90);
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
@include grid-system;