前端:用Sass简化媒体查询

在进行媒体查询的编写的时候,我们可以利用scss与与编译器,通过@include混入的方式对代码进行简化,从而大大提高了代码的可维护性,也减少了代码的编写量,废话不多说,直接上代码

css 复制代码
// 定义设备数值
$breakpoints: (
  'phone': (320px, 480px),
  'ipad': (481px, 768px),
  'notebook': (769px, 1024px),
  'pc': 1205px
);

// sass 混合
@mixin respnseTo($breakname) {
  // map-get:从对应键值对中获取数据,
  $bp: map-get($breakpoints, $breakname);

  // 判断 $bp 是 list,还是单个值 
  @if type-of($bp) == 'list' {
    // 从 list 中获取第一项和第二项数据
    $min: nth($bp, 1);
    $max: nth($bp, 2);
    @media (min-width: $min) and (max-width: $max) {
      // @content:混入其他的数据
      @content;
    }
  } @else {
    @media (min-width: $bp) {
      @content;
    }
  };
}

.container {
  width: 100%;

  @include respnseTo('phone') {
    height: 50px;
  }

  @include respnseTo('ipad') {
    height: 60px;
  }
}

最后编译结果:

css 复制代码
@media (min-width: 320px) and (max-width: 480px) {
  .header {
    height: 50px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .header {
    height: 60px;
  }
}
相关推荐
群联云防护小杜几秒前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台18 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹25 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界9 小时前
前端:优秀架构的坟墓
前端·架构