Scss 封装媒介查询，快乐使用轻松实现

友儿

August 30, 2024

2152 views

No comments

2607 words

前端

Scss 对媒介查询的封装确实能带来 “一次封装，终生轻松” 的效果。以下是进一步阐述这种优势：

当你使用 Scss 封装媒介查询后，在整个项目的开发过程中，你无需反复书写复杂的媒介查询语句。无论是调整不同屏幕尺寸下的样式，还是为新的元素添加响应式规则，都可以通过调用封装好的混合宏轻松实现。

scss 代码

// 定义一个名为 $breakpoints 的变量，并包含五个媒体查询的断点和对应的最小、最大宽度
$breakpoints: (
    'phone': (320px, 480px),
    'pad': (481px, 768px),
    'notebook': (769px, 1024px),
    'desktop': (1025px, 1200px),
    'tv': 1201px
);

// 定义一个名为 diffTypes 的 mixin，用于创建不同类型的媒体查询
@mixin diff-types($bp) {
    // 使用 if 语句判断参数 bp 是否为列表类型
    @if type-of($bp) == 'list' { 
        // 使用 nth 函数获取列表中的第一个元素作为最小值
        $min: nth($bp, 1);
        // 使用 nth 函数获取列表中的第二个元素作为最大值    
        $max: nth($bp, 2);
        // 创建一个媒体查询，当屏幕宽度在最小值和最大值之间时应用样式
        @media (min-width: $min) and (max-width: $max) { 
            @content; 
        }
    } @else { 
        // 如果不是列表，只使用最小值创建媒体查询
        @media (min-width: $bp) { 
            @content; 
        }
    }
}

// 定义一个名为 repod-to 的 mixin，根据传入的断点名称生成相应的媒体查询
@mixin repod-to($breakname) {
    // 判断断点名称是否为 'all'
    @if $breakname == 'all' { 
        // 如果是 'all'，遍历所有断点并生成相应的媒体查询类
        @each $key, $value in $breakpoints { 
            $bp: $value; 
            // 在每个断点范围内，应用特定的样式
            @include diff-types($bp) {
                @content; 
            };
        
        }
    } @else { 
        // 如果不是 'all'，从映射中获取特定断点的值
        $bp: map-get($breakpoints, $breakname); 
        // 在特定断点范围内，应用特定的样式
        @include diff-types($bp) {
            @content; 
        };
    }
}
// 我们创建一个名为.header 的类
// 并使用 repod-to mixin 根据不同的断点设置其样式
.header {
    @include repod-to('all') {
        // 在所有断点范围内，设置.header 类的高度为 100px，宽度为 200px
        height: 100px;
        width: 200px;
    }
}

// 创建一个名为.test 的类
// 使用 repod-to mixin 为其设置在 'phone' 断点的样式
.test {
    @include repod-to('phone') {
        // 在 'phone' 断点范围内，设置.test 类的文本颜色为红色
        color: red;
    }
}

生成css

@media (min-width: 320px) and (max-width: 480px) {
  .header {
    height: 100px;
    width: 200px;
  }
}
@media (min-width: 481px) and (max-width: 768px) {
  .header {
    height: 100px;
    width: 200px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .header {
    height: 100px;
    width: 200px;
  }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  .header {
    height: 100px;
    width: 200px;
  }
}
@media (min-width: 1201px) {
  .header {
    height: 100px;
    width: 200px;
  }
}

@media (min-width: 320px) and (max-width: 480px) {
  .test {
    color: red;
  }
}

Scss 封装媒介查询，快乐使用轻松实现