SASS优化响应式断点管理
原文:《Managing Responsive Breakpoints with Sass》
作者:Hugo Giraudel,来自法国,著名SASS大牛,在SassWay等多个站点撰文推广sass,是SassyJSON、SassyMatrix等多个开源项目的开发人员,大家能够到他的官方站点、github上了解详情。
翻译:前端开发whqet,以意译为主,不当之处请大家批评指正。
---------------------------------------------------------------------------------------------------------------------------------
当你须要搞定响应式布局时,一堆堆的媒体查询、大量的属性、属性值往往能够把你搞颠,SASS(或者诸如此类的预处理器)被觉得是处理响应式断点的最佳利器。
说到响应式断点处理,非常多种方式涌上心头,常常有人问哪种方式最优,正如前端开发领域的大多数问题一样,这个问题相同没有标准答案,我们须要详细问题详细分析。更确切的说,难度不在于提出一个系统,而是提出一个既足够灵活(适用大部分场合)又不非常复杂的系统。
在今天的文章里,我将给大家介绍若干种响应式布局断点的解决方式,每一种都经过实践验证,一些方案可能优于其它方案,我会把决定的权利交给大家。
1.使用变量(With variables)
// Defining values
$screen-sm-min: 768px;
$screen-xs-max: ($screen-sm-min - 1);
$screen-md-min: 992px;
$screen-sm-max: ($screen-md-min - 1);
$screen-lg-min: 1200px;
$screen-md-max: ($screen-lg-min - 1);// Usage
@media (max-width: $screen-xs-max) { ... }
@media (min-width: $screen-sm-min) { ... }
@media (max-width: $screen-sm-max) { ... }
@media (min-width: $screen-md-min) { ... }
@media (max-width: $screen-md-max) { ... }
@media (min-width: $screen-lg-min) { ... }
Foudation更进一步,使用跨范围的媒体查询,避免使用过多的max-width和min-width。
// Defining values
$small-range: (0em, 40em); /* 0, 640px */
$medium-range: (40.063em, 64em); /* 641px, 1024px */
$large-range: (64.063em, 90em); /* 1025px, 1440px */
$xlarge-range: (90.063em, 120em); /* 1441px, 1920px */
$xxlarge-range: (120.063em); /* 1921px */// Defining media queries
$screen: "only screen" !default;
$landscape: "#{$screen} and (orientation: landscape)" !default;
$portrait: "#{$screen} and (orientation: portrait)" !default;
$small-up: $screen !default;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default;
$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;
$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;
$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;
$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;// Usage
@media #{$small-up} { ... }
@media #{$small-only} { ... }
@media #{$medium-up} { ... }
@media #{$medium-only} { ... }
@media #{$large-up} { ... }
@media #{$large-only} { ... }
@media #{$xlarge-up} { ... }
@media #{$xlarge-only} { ... }
@media #{$xxlarge-up} { ... }
@media #{$xxlarge-only} { ... }
两种方法各有一个不爽的地方,在Bootstrap里每次都要使用max-width,在Foundation里我们须要使用插值变量这样的又丑又烦的方式。显示我们须要想办法解决这些问题。
2.使用独立Mixin(With a standalone mixin)
《media queries in Sass 3.2》是CSS-Tricks里最火的文章之中的一个,在这篇文章里Chris Coyier在借鉴a former idea by Mason Wendell和a former idea by Jeff Croft两文的基础上,怎样使用sass实现响应式布局的断点管理。
@mixin respond-to($breakpoint) {@if $breakpoint == "small" {@media (min-width: 767px) {@content;}}@else if $breakpoint == "medium" {@media (min-width: 992px) {@content;}}@else if $breakpoint == "large" {@media (min-width: 1200px) {@content;}}
}
然后,我们这样使用mixin。
@include respond-to(small) { ... }
@include respond-to(medium) { ... }
@include respond-to(large) { ... }
这种方法是极好的(甄嬛体,老外也看?),原因有二:抽象数据有意义,大量断点集中管理。假设你想把“992px”改成“970px”,你不须要爬过每个css文件,而仅仅需更新mixin,然后所有更新。
3. 可配置的mixin(With a configurable mixin )
$breakpoints: ('small' : 767px,'medium' : 992px,'large' : 1200px
);
然后原来的mixin进行相应的改动
@mixin respond-to($breakpoint) {// Retrieves the value from the key$value: map-get($breakpoints, $breakpoint);// If the key exists in the map@if $value != null {// Prints a media query based on the value@media (min-width: $value) {@content;}}// If the key doesn't exist in the map@else {@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "+ "Please make sure it is defined in `$breakpoints` map.";}
}
我们在改动mixin的同一时候也进行了一些提高,不要小看这些提高,我们加上了错误处理,假设在maps中没有找到断点值,将会弹出一个错误提示,这将便于我们开发过程中的调试。
$breakpoints: ('small' : ( min-width: 767px ),'medium' : ( min-width: 992px ),'large' : ( min-width: 1200px )
);@mixin respond-to($name) {// If the key exists in the map@if map-has-key($breakpoints, $name) {// Prints a media query based on the value@media #{inspect(map-get($breakpoints, $name))} {@content;}}// If the key doesn't exist in the map@else {@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "+ "Please make sure it is defined in `$breakpoints` map.";}
}
在这里,我们主要做了三个事情
4. 使用外部工具(With an external tool)
Breakpoint by Mason Wendell and Sam Richard
Breakup by Ben Scott
SassMQ | Breakpoint | Breakup | |
---|---|---|---|
MQ type |
*-width
|
any | any |
No Query fallback | yep | yep | yep |
API complexity | simple | very simple | medium |
Code complexity | very simple | complexe | simple |
Extra | Debug mode | Singularity.gs | — |
基本上是这样,假设发现有没有涉及的,记得一定告诉我。
SassMQ
// Configuration
$mq-responsive: true;
$mq-static-breakpoint: desktop;
$mq-breakpoints: (mobile: 320px,tablet: 740px,desktop: 980px,wide: 1300px
);// Example
selector {@include mq($from: mobile) {property: value;}
}
BreakPoints
$high-tide: 500px;
$ex-presidents: 600px 800px;
$surfboard-width: max-width 1000px;
$surfboard-height: (min-height 1000px) (orientation portrait);selector {@include breakpoint($high-tide) {property: value;}
}
Breakup
$breakup-breakpoints: ('thin' '(max-width: 35.999em)','wide' '(min-width: 36em)','full' '(min-width: 61em)'
);selector {@include breakup-block('thin') {property: value;}
}
总结
我们在这篇文章里看到的这么些个方案,都有长有短,没有一个完美的方案。最后我觉得还是由你来决定怎么把握可用性和复杂性的平衡。
----------------------------------------------------------
前端开发whqet,关注web前端开发,分享相关资源,欢迎点赞,欢迎拍砖。
---------------------------------------------------------------------------------------------------------
SASS优化响应式断点管理相关推荐
- html响应式导航栏制作,用Sass制作响应式导航栏(原创)
插件描述:用Sass制作响应式导航栏 更新时间:2017/12/29 下午8:33:04 更新说明:细节优化data-stop='true' : 在手机版上禁止跳转页面// 插入js代码 $(docu ...
- bootstrap 提交表单给后台_基于Bootstrap的响应式后台管理模板Ace
Ace是一个轻量级.功能丰富,基于Bootstrap3的响应式后台管理模板.支持多种皮肤,集成了多种插件,如Bootstrap,jQuery UI等.支持IE 8/9/10/11.Chrome.Fir ...
- SpaceBase – 基于 Sass 的响应式 CSS 框架
SpaceBase 是一个基于 Sass 的响应式 CSS 框架.SpaceBase 是可以在建立和定制您的需要的一个样板层,它结合最佳实践为今天的响应式网页与我们对每一个项目中使用的核心组件. 在线 ...
- Minima黑色响应式后台管理模板
Minima黑色响应式后台管理模板基于Bootstrap3.3.4制作,黑色风格,兼容PC端和手机移动端,全套模板,包括登录.仪表盘.按钮.窗口部件.网格布局.图表等后台模板页面. 模板截图 代码截图 ...
- Metronic – 超赞!基于 Bootstrap 的响应式后台管理模板
Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现.Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页 ...
- 推荐几款基于Bootstrap的响应式后台管理模板
1.Admin LTE 该模版开源免费. AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高度可定制的,易于使用.支持很多的屏幕分辨率适合从小型移动设备到大型台式机. ...
- 基于 Bootstrap 的响应式后台管理面板
你想建立一个后台管理面板或者分析仪表板吗?不需从头开始,Keen IO Bootstrap 是一个响应式的仪表盘模板,可以帮助你在几分钟内呈现数据,让你可以创建一个有吸引力的,定制的分析仪表板,随时可 ...
- 自适应,响应式以及图片的性能优化(响应式图片)
自适应:最常见的就是淘宝无限适配[移动端]+rem单位 index.js · 2.0 · mirrors / amfe / lib-flexible · GitCode 可以将这个淘宝无限适配的ind ...
- html+css实现一个响应式管理平台架构模板
文本将会带你使用html+css实现一个响应式的管理平台架构模板,目前来说市面上的管理平台架构模板大同小异,文本的知识点都会符合场景所需. 目录 1.管理平台的架构内容 2.顶部的布局 3.下半部分布 ...
最新文章
- 设计模式 之 建造者
- HDU 4166 BNU 32715 Robot Navigation (记忆化bfs)
- 百度地图搜索返回地址中经纬度为null
- Android4.0-4.4 加入支持状态栏显示耳机图标方法(支持带不带MIC的两种耳机自己主动识别)...
- 不服来战!这才是产品汪与程序猿撕逼的正确方式
- Netty实例:实现简单的通讯功能
- JAVA NIO知识点总结(2)——直接缓冲区和非直接缓冲区
- 使用Java 8处理并行数据库流
- python中文件打开的合法模式组合_详解python中各种文件打开模式
- git学习(六)git数据管理机制,分支管理
- PHP压缩CSS文件
- Vim开发RubyOnRails 环境打造
- stm8s103-PWM输出与输入捕获
- 使用JS代码将steam喜加一的免费游戏删除。
- 8.4v双节锂电池专业充电ic(FS4062A)
- 单图像超分辨率重建示例代码解析
- 时光老去,远了年少的我
- mysql事务的四个特点和实现原理
- 回合制小游戏(英文)
- vivo手机权限禁止--跳转至对应app的权限设置页面
热门文章
- Hive jdbc执行seelct 语句时报 return code 1 from org.apache.hadoop.hive.ql.exec.mr.MapRedTask
- 全文搜索之 Elasticsearch
- mysql组合索引与字段顺序
- CentOS 6下SSH限制IP和用户登录
- Java 25天基础-DAY 05-面向对象-构造函数
- 三次样条插值算法C++实现
- 关于单页面应用一些随想
- 南阳58--最小步数(BFS)
- RTTI VS Reflection
- 企业运维之域控篇(三)--加入域