首页 > 代码库 > SASS优化响应式断点管理
SASS优化响应式断点管理
原文:《Managing Responsive Breakpoints with Sass》
链接:https://www.sitepoint.com/managing-responsive-breakpoints-sass/
作者:Hugo Giraudel,来自法国,著名SASS大牛,在SassWay等多个网站撰文推广sass,是SassyJSON、SassyMatrix等多个开源项目的开发者
1.使用变量(With variables)
Bootstrap和Foundation采用这种方式,首先定义变量,然后在媒体查询中使用变量。换句话说,你可以在配置文件或者其他地方定义变量以备使用。我们来看看Bootstrap怎么干的。
// 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实现响应式布局的断点管理。命名断点是非常重要的,因为可以为抽象的数字赋予意义(你知道767px是什么意思吗,我不知道,直到我去使用小屏幕的时候才知道)。为什么Bootstrap和Foundation要使用变量呢,不也是为了给抽象的数字起个名字吗?
所以我们定义个mixin,接收断点名作唯一的参数,返回媒体查询的内容。准备好了吗?走起。
@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,然后全部更新。
但是也还有两个问题:
a.断点不容易从mixin里拿出来,放到配置文件里去。
b.冗余太多。
3. 可配置的mixin(With a configurable mixin )
<为了解决上面的两个问题,我们需要从断点mixin中抽出一个列表,只剩下mixin核心,然后这个列表就可以随便移动,或者扔到配置文件中。
然后,使用sass 3.3+中的maps,我们可以方便的使用关联的属性和属性值。
@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中没有找到断点值,将会弹出一个错误提示,这将便于我们开发过程中的调试。
我们让mixin变得更加精简,能很好的处理错误,同时我们去掉了一个功能——判断属性是否是你想要的(min-width,max-width,min-height等),这在移动优先的网页中没问题,因为我们仅仅需要min-width。但是,如果需要查询其他属性,我们需要把这个功能加回来。为了达到这个目的,我想到了一个非常优雅的解决方案,同时并不增加复杂性。
$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."; } }
在这里,我们主要做了三个事情
a. 检查查询的断点在map中存在不存在
b.如果存在,打印对应的媒体查询。
c.如果不在,进行错误提示。
简单吧,如果我们回顾前面的两个缺陷,已经不再有WET(Write Everything Twice))问题,也不再有不灵活的媒体查询。但是还有一个问题,不支持复杂的媒体查询。复杂指的是涉及多个组件的查询(e.g. screen and (min-width: 767px))。我们上面这些方案除了第一种变量之外都不能很好的解决这个问题。
4. 使用外部工具(With an external tool)
最后一个同样重要的是,如果不想创建自己的mixin,你可以使用外部的工具处理响应式布局的断点,有很多sass的扩展在这个方面做得很好。
SassMQ by Kaelig
Breakpoint by Mason Wendell and Sam Richard
Breakup by Ben Scott
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; } }
SASS优化响应式断点管理
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。