前端:用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;
  }
}
相关推荐
代码改变世界100865 分钟前
像素策略游戏:资源战争
css·游戏·css3
文火冰糖的硅基工坊15 分钟前
[嵌入式系统-146]:五次工业革命对应的机器人形态的演进、主要功能的演进以及操作系统的演进
前端·网络·人工智能·嵌入式硬件·机器人
2401_8370885027 分钟前
ResponseEntity - Spring框架的“标准回复模板“
java·前端·spring
yaoganjili36 分钟前
用 Tinymce 打造智能写作
前端
angelQ43 分钟前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
Dontla1 小时前
(临时解决)Chrome调试避免跳入第三方源码(设置Blackbox Scripts、将目录添加到忽略列表、向忽略列表添加脚本)
前端·chrome
我的div丢了肿么办1 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js
云中雾丽1 小时前
React.forwardRef 实战代码示例
前端
朝歌青年说1 小时前
一个在多年的技术债项目中写出来的miniHMR热更新工具
前端
Moonbit1 小时前
倒计时 2 天|Meetup 议题已公开,Copilot 月卡等你来拿!
前端·后端