首页 > 代码库 > SASS优化响应式断点管理
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前端开发,分享相关资源,欢迎点赞,欢迎拍砖。
---------------------------------------------------------------------------------------------------------