scss 使用Breakpoint +指南针/支持处理IE8及更低版本

Posted 2021-05-18

/* Import Sass mixins, variables, Compass modules, etc. */
@import "init";

/* HTML element (SMACSS base) rules */
@import "normalize"; // I <3 Normalize.

/* Layout rules */
@import "layout-general";

/* Components */

// Styles for IE 8 and lower.

// Set the legacy IE support variables. These override the !default values set
// in _init.scss.
$legacy-support-for-ie6 : false;
$legacy-support-for-ie7 : false;
$legacy-support-for-ie8 : true;

// Force the breakpoint mixin to discard all media queries except ones with
// $no-query set to true. Since we use the default values in styles.scss,
// we don't need to set these in _init.scss.
$breakpoint-no-queries  : true;
$breakpoint-no-query-fallbacks : true;

@import "styles";

<!--[if (lt IE 9)]>
<link rel="stylesheet" href="/css/styles-ie8.css" media="all" />
<![endif]-->

<!--[if (gte IE 9)|(IEMobile)|(!IE)]><!-->
<link rel="stylesheet" href="/css/styles.css" media="all" />
<!--<![endif]-->

The first bit of code is only read by IE 8 and lower. Other browsers do not
load the styles-ie8.css stylesheet.

The second bit of code is read by all browsers, except IE 8 and lower. IE 8 and
lower do not load the styles.css stylesheet.

The funky comment syntax is required. For details, see
http://en.wikipedia.org/wiki/Conditional_comment#Downlevel-revealed_conditional_comment

.l-general__main {
  /* Mobile layout. */

  @include breakpoint(555px, $no-query: true) {
    /* Tablet layout. */
  }

  @include breakpoint(888px, $no-query: true) {
    /* Desktop layout. */
  }

  @include breakpoint(1111px, $no-query: false) {
    /* Large desktop layout. */
  }

  @if $legacy-support-for-ie8 {
    /* Any extra IE8 only styles. */
  }
}

// Initialize the Sass variables and partials used in this project.

// Set the legacy IE support variables. We override the default values set by
// the compass/support partial, but let styles-ie8.scss override these values.
$legacy-support-for-ie6 : false !default;
$legacy-support-for-ie7 : false !default; // Note the use of !default.
$legacy-support-for-ie8 : false !default;


// Partials to be shared with all .scss files.

// Add Compass' IE and vendor prefix support variables.
// Docs at http://compass-style.org/reference/compass/support/
@import "compass/support";
// Add the Breakpoint mixin for media query support.
// Docs at http://breakpoint-sass.com/
@import "breakpoint";