变量

使用 Sass 时，你可以非常快速地更改网站的配色方案。以下是在 _variables.scss 中通过 Sass 更改内容的一个非常小的示例。

  $primary-color: color("materialize-red", "lighten-2") !default;
  $primary-color-light: false !default;
  $primary-color-dark: false !default;
  @if not $primary-color-light {
    $primary-color-light: lighten($primary-color, 15%);
  }
  @if not $primary-color-dark {
    $primary-color-dark: darken($primary-color, 15%);
  }
  $secondary-color: color("teal", "lighten-1") !default;
  $success-color: color("green", "base") !default;
  $error-color: color("red", "base") !default;

  $link-color: color("light-blue", "darken-1") !default;

  /*** More variables not shown here.. ***/
        

媒体查询

我们有 3 个媒体查询，用于在自定义 Sass 文件中使用的 3 种标准屏幕尺寸。这也包括将定义范围的媒体查询变量。

小屏幕被定义为最大宽度为 600px
中屏幕被定义为最大宽度为 992px
大屏幕被定义为最小宽度为 993px
超大屏幕被定义为最小宽度为 1200px

CSS

  /* These classes can be added to HTML Elements
   * to affect visibility on certain displays.
   */
  .hide-on-small-only
  .hide-on-small-and-down
  .hide-on-med-and-down
  .hide-on-med-and-up
  .hide-on-med-only
  .hide-on-large-only
  .show-on-large
  .show-on-medium
  .show-on-small
  .show-on-medium-and-up
  .show-on-medium-and-down
            

Sass

  @media #{$small-and-down} {
    // styles for small screens and down
  }
  @media #{$medium-and-up} {
    // styles for medium screens and larger
  }
  @media #{$medium-and-down} {
    // styles for medium screens and down
  }
  @media #{$large-and-up} {
    // styles for large screens and up
  }
  @media #{$extra-large-and-up} {
    // styles for extra large screens and up
  }