SASS optimizes responsive breakpoint Management

Front-end development whqet, csdn, Wang haiqing, whqet, front-end development expert

Original article: Managing Responsive Breakpoints with Sass

Author: Hugo Giraudel, from France, famous SASS Daniel, wrote articles on SassWay and other websites to promote sass. It is a developer of SassyJSON, SassyMatrix, and other open-source projects, you can go to his official website and github to learn more.

Translation: front-end whqet development focuses on free translation. If not, please criticize and correct it.

Else ---------------------------------------------------------------------------------------------------------------------------------

When you need to deal with responsive la S, a pile of media queries, a large number of attributes, and attribute values can often turn you on, SASS (or such preprocessors) it is considered to be the best tool for handling responsive breakpoints.

When it comes to responsive breakpoint processing, there are many ways to worry about it. Some people often ask which method is the best. Just like most questions in the front-end development field, there is no standard answer to this question, we need to analyze specific issues. More specifically, the difficulty is not to propose a system, but to propose a system that is flexible enough (applicable in most cases) and not very complex.

In today's article, I will introduce several responsive layout breakpoint solutions, each of which has been proven by practice and may be better than other solutions, I will give you the right to decide.

1. variables (With variables) Bootstrap and Foundation are used in this way. First, variables are defined and then variables are used in media queries. In other words, you can define variables in the configuration file or elsewhere for use. Let's see how Bootstrap works.

// 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 goes further by using cross-range media queries to avoid excessive max-width and 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} { ... }

Each of the two methods has a bad idea. max-width is used every time in Bootstrap. In Foundation, we need to use interpolation variables, which is ugly and annoying. It shows that we need to solve these problems. 2. using standalone Mixin (With a standalone mixin) media queries in Sass 3.2 is one of the hottest articles in CSS-Tricks, in this article, Chris Coyier uses sass to implement breakpoint Management of responsive Layout Based on a former idea by Mason Wendell and a former idea by Jeff Croft. Naming breakpoints is very important, because it can give meaning to abstract numbers (Do You Know What 767px means? I don't know until I use a small screen ). Why do Bootstrap and Foundation need to use variables? Isn't it just to name abstract numbers? Therefore, we define a mixin to receive the breakpoint name as a unique parameter and return the content of the media query. Are you ready? Start.

@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;    }  }}

Then, we use mixin.

@include respond-to(small) { ... }@include respond-to(medium) { ... }@include respond-to(large) { ... }

This method is excellent (for example, what about foreigners ?), There are two reasons: abstract data makes sense and a large number of breakpoints are centrally managed. If you want to change "992px" to "970px", you do not need to crawl every css file, but only need to update mixin and then update all. However, there are two other problems: a. It is not easy to take the breakpoint out of mixin and put it in the configuration file. B. Too much redundancy. 3. configurable mixin (With a retriable mixin) <to solve the preceding two problems, we need to extract a list from the breakpoint mixin, With only the mixin core left, then the list can be moved freely or thrown into the configuration file. Then, using the maps in sass 3.3 +, we can easily use the associated attributes and attribute values.

$breakpoints: (  'small'  : 767px,  'medium' : 992px,  'large'  : 1200px);

Then the original mixin is modified accordingly.

@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.";  }}

We have also made some improvements while modifying mixin. Don't underestimate these improvements. We have added error processing. If the breakpoint value is not found in maps, an error message will pop up, this facilitates debugging during the development process. We make mixin more streamlined and can handle errors very well. At the same time, we removed a function to determine whether the attribute is what you want (min-width, max-width, min-height, etc.), which is no problem in the mobile priority webpage, because we only need min-width. However, to query other attributes, we need to add this function back. To achieve this, I thought of a very elegant solution without increasing complexity.

$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.";  }}

Here, we mainly do three things: a. Check that the query breakpoint does not exist in the map. B. If yes, print the corresponding media query. C. If not, make an error prompt. Simply put, if we review the previous two defects, we will no longer have WET (Write Everything Twice) problems, or inflexible media queries. However, there is another problem that does not support complex media queries. Complexity refers to queries involving multiple components (e.g. screen and (min-width: 767px )). The above solutions cannot solve this problem well except the first variable. 4. using external tools (With an external tool) the last thing that is equally important is that if you don't want to create your own mixin, you can use external tools to process breakpoints in responsive layout, many sass extensions are doing well in this aspect. SassMQ by Kaelig
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	-

This is basically the case. If you find anything involved, please tell me. SassMQ

// Configuration$mq-responsive: true;$mq-static-breakpoint: desktop;$mq-breakpoints: (  mobile:  320px,  tablet:  740px,  desktop: 980px,  wide:    1300px); // Exampleselector {  @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;  }}

To sum up the solutions we have seen in this article, they all have long, short, and no perfect solution. Finally, I think it is up to you to determine how to balance availability and complexity. In a word, you can use the appropriate tools in a suitable situation. Sorry That's it. Please leave a message to share your comments and suggestions.

----------------------------------------------------------

Front-end development whqet, pay attention to web Front-end development, share related resources, welcome to likes, welcome to shoot bricks.
Bytes ---------------------------------------------------------------------------------------------------------