Question

我正在进行重构并尝试改进网格类的 媒体查询 。

我正在使用变量，插值和 mixins ，但我认为代码可以改进。

这就是我所拥有的：

$small: 576px;
$medium: 768px;
$large: 992px;

@mixin col($number){
   width: #{100% / (12 / $number)};
   padding-right: 1rem;
   padding-left: 1rem;
}


@for $i from 1 through 12{
  .col-#{$i} {
    @include col($i);     
   }
}

@media (max-width: $small){
  @for $i from 1 through 12{
     .col-#{$i}-s {
       @include col($i);   
     }
  }
}
@media (max-width: $medium){
  @for $i from 1 through 12{
     .col-#{$i}-m {
       @include col($i); 
     }
  }
}
@media (max-width: $large){
  @for $i from 1 through 12{
     .col-#{$i}-l {
       @include col($i);     
     }
  }
}

谢谢：）

Answer 1

您可以通过减少和自动构建媒体查询来改进代码。

代码将定义要使用的最大列数（android.R.style.Theme_Material_Dialog），然后将通过所有定义的断点（$grid-columns）进行迭代。默认列将嵌套在与所有断点匹配的默认媒体查询中（使用$breakpoints）。对于每个断点和每个列，新的mixin将打印每列的选择器，根据网格的最大列计算其宽度。

随意更改断点名称，最大宽度或添加新断点。唯一需要的断点将是默认断点。

希望它有所帮助。

编辑：现在代码有两个min-width: 0px，一个用于编写断点，另一个用于写入列。

@mixin

将输出：

// Define all the breakpoints as a set of lists
// First breakpoint will be the default breakpoint, ass as many as you want
$breakpoints : (
    'default' 0px,
    's'       576px,
    'm'       768px,
    'l'       992px
) !default;

// Max number of columns
$grid-columns : 12 !default;

// Column writing
@mixin col($columns, $breakpoint, $max: $grid-columns) {

    // Set the class specific breakpont identifier os none for default breakpoint
    $prefix : unquote(if($breakpoint != 'default', '-#{$breakpoint}', ''));

    // COlumn styles
    .col-#{$columns}#{$prefix} {
        width: (100% / $max) * $columns;
        padding-right: 1rem;
        padding-left: 1rem;
    }

}

// Media query writing
@mixin breakpoint($breakpoint, $max: $grid-columns) {

    // Sets the condition for the media query, default w
    $condition : if(nth($breakpoint, 1) == 'default', min-width, max-width);

    // Media query for the breakpoint
    @media screen and (#{$condition}: nth($breakpoint, 2)) {

        // For each column 1 to $columns
        @for $i from 1 through $max {

            // Build the column
            @include col($i, nth($breakpoint, 1), $max);

        }

    }

}

// For each defined breakpoint
@each $breakpoint in $breakpoints {

    // Creates the breakpoint
    @include breakpoint($breakpoint);

}

如何使用SCSS mixins来改进媒体查询？

1 个答案: