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; } }
Last modification:August 30, 2024
如果觉得我的文章对你有用,请随意赞赏