标签：des c style class blog code
原文：《Managing Responsive Breakpoints with Sass》
作者：Hugo Giraudel，来自法国，著名SASS大牛，在SassWay等多个站点撰文推广sass，是SassyJSON、SassyMatrix等多个开源项目的开发人员，大家能够到他的官方站点、github上了解详情。
翻译：前端开发whqet，以意译为主，不当之处请大家批评指正。
---------------------------------------------------------------------------------------------------------------------------------
当你须要搞定响应式布局时，一堆堆的媒体查询、大量的属性、属性值往往能够把你搞颠，SASS（或者诸如此类的预处理器）被觉得是处理响应式断点的最佳利器。
说到响应式断点处理，非常多种方式涌上心头，常常有人问哪种方式最优，正如前端开发领域的大多数问题一样，这个问题相同没有标准答案，我们须要详细问题详细分析。更确切的说，难度不在于提出一个系统，而是提出一个既足够灵活（适用大部分场合）又不非常复杂的系统。
在今天的文章里，我将给大家介绍若干种响应式布局断点的解决方式，每一种都经过实践验证，一些方案可能优于其它方案，我会把决定的权利交给大家。
// 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里我们须要使用插值变量这样的又丑又烦的方式。显示我们须要想办法解决这些问题。@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，然后所有更新。$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.";
}
}在这里，我们主要做了三个事情| 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 | — |
// 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;
}
}
$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-breakpoints: (
‘thin‘ ‘(max-width: 35.999em)‘,
‘wide‘ ‘(min-width: 36em)‘,
‘full‘ ‘(min-width: 61em)‘
);
selector {
@include breakup-block(‘thin‘) {
property: value;
}
}
----------------------------------------------------------
前端开发whqet，关注web前端开发，分享相关资源，欢迎点赞，欢迎拍砖。
---------------------------------------------------------------------------------------------------------
标签：des c style class blog code
原文地址：http://www.cnblogs.com/mengfanrong/p/3765410.html
