scss 萨斯专栏

Posted 2021-05-18

$col-1 : 16.66%;
$col-2 : 33.33%;
$col-3 : 50.00%;
$col-4 : 66.66%;
$col-5 : 83.33%;
$col-6 : 100.0%;

$padding: 0 7.5px 0 7.5px;
$margin: -7.5px;

.col-container{
  position:relative;
  margin-right: auto;
  margin-left: auto;
  padding:0;
  &:before, &:after {
    content: " ";
    display: table;
  }
  @media (min-width: 768px){
    width: 750px;
  }
  @media (min-width: 992px){
    width: 970px;
  }
  @media (min-width: 1200px){
    width: 1200px;
  }
}

.row {
  margin-left: $margin;
  margin-right: $margin;
}

/* --- XS SMALL SCREEN --- */
.col-xs-6-1{
  width: $col-1;
  padding:$padding;
  float:left;
  position:relative;
}
.col-xs-6-2{
  width: $col-2;
  padding:$padding;
  float:left;
  position:relative;
}
.col-xs-6-3{
  width: $col-3;
  padding:$padding;
  float:left;
  position:relative;
}
.col-xs-6-4{
  width: $col-4;
  padding:$padding;
  float:left;
  position:relative;
}
.col-xs-6-5{
  width: $col-5;
  padding:$padding;
  float:left;
  position:relative;
}
.col-xs-6-6{
  width: $col-6;
  padding:$padding;
  float:left;
  position:relative;
}
/* --- END XS SMALL SCREEN --- */


/* --- SMALL SCREEN --- */
.col-sm-6-1{
  @media only screen and (min-width : 480px) {
    width: $col-1;
    padding:$padding;
    float:left;
    position:relative;
  }
}
.col-sm-6-2{
  @media only screen and (min-width : 480px) {
    width: $col-2;
    padding:$padding;
    float:left;
    position:relative;
  }
}
.col-sm-6-3{
  @media only screen and (min-width : 480px) {
    width: $col-3;
    padding:$padding;
    float:left;
    position:relative;
  }
}
.col-sm-6-4{
  @media only screen and (min-width : 480px) {
    width: $col-4;
    padding:$padding;
    float:left;
    position:relative;
  }
}
.col-sm-6-5{
  @media only screen and (min-width : 480px) {
    width: $col-5;
    padding:$padding;
    float:left;
    position:relative;
  }
}
.col-sm-6-6{
  @media only screen and (min-width : 480px) {
    width: $col-6;
    padding:$padding;
    float:left;
    position:relative;
  }
}
/* --- END SMALL SCREEN --- */


/* --- MEDIUM SCREEN --- */
.col-md-6-1{
  @media only screen and (min-width : 768px) {
    width: $col-1;
    padding:$padding;
    float:left;
    position:relative;
  }
}
.col-md-6-2{
  @media only screen and (min-width : 768px) {
    width: $col-2;
    padding:$padding;
    float:left;
    position:relative;
  }
}
.col-md-6-3{
  @media only screen and (min-width : 768px) {
    width: $col-3;
    padding:$padding;
    float:left;
    position:relative;
  }
}
.col-md-6-4{
  @media only screen and (min-width : 768px) {
    width: $col-4;
    padding:$padding;
    float:left;
    position:relative;
  }
}
.col-md-6-5{
  @media only screen and (min-width : 768px) {
    width: $col-5;
    padding:$padding;
    float:left;
    position:relative;
  }
}
.col-md-6-6{
  @media only screen and (min-width : 768px) {
    width: $col-6;
    padding:$padding;
    float:left;
    position:relative;
  }
}/* --- SMALL SCREEN --- */


/* --- large SCREEN --- */
.col-lg-6-1{
  @media only screen and (min-width : 992px){
    width: $col-1;
    padding:$padding;
    float:left;
    position:relative;
  }
}
.col-lg-6-2{
  @media only screen and (min-width : 992px){
    width: $col-2;
    padding:$padding;
    float:left;
    position:relative;
  }
}
.col-lg-6-3{
  @media only screen and (min-width : 992px){
    width: $col-3;
    padding:$padding;
    float:left;
    position:relative;
  }
}
.col-lg-6-4{
  @media only screen and (min-width : 992px){
    width: $col-4;
    padding:$padding;
    float:left;
    position:relative;
  }
}
.col-lg-6-5{
  @media only screen and (min-width : 992px){
    width: $col-5;
    padding:$padding;
    float:left;
    position:relative;
  }
}
.col-lg-6-6{
  @media only screen and (min-width : 992px){
    width: $col-6;
    padding:$padding;
    float:left;
    position:relative;
  }
}
/* --- END LARGE SCREEN --- */


/* --- XL LARGE SCREEN --- */
.col-xlg-6-1{
  @media only screen and (min-width : 1200px){
    width: $col-1;
    padding:$padding;
    float:left;
    position:relative;
  }
}
.col-xlg-6-2{
  @media only screen and (min-width : 1200px){
    width: $col-2;
    padding:$padding;
    float:left;
    position:relative;
  }
}
.col-xlg-6-3{
  @media only screen and (min-width : 1200px){
    width: $col-3;
    padding:$padding;
    float:left;
    position:relative;
  }
}
.col-xlg-6-4{
  @media only screen and (min-width : 1200px){
    width: $col-4;
    padding:$padding;
    float:left;
    position:relative;
  }
}
.col-xlg-6-5{
  @media only screen and (min-width : 1200px){
    width: $col-5;
    padding:$padding;
    float:left;
    position:relative;
  }
}
.col-xlg-6-6{
  @media only screen and (min-width : 1200px){
    width: $col-6;
    padding:$padding;
    float:left;
    position:relative;
  }
}
/* --- END XL LARGE SCREEN --- */