变量

当你使用Sass时，你可以很快的改变网站配色方案。 下面是一小部分简单的示例来自_variables.scss文件.

  $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;

  /*** 还有更多的变量没用展示在这里 ***/
        

媒体查询

我们有3种媒体查询对应3种标准屏幕尺寸，你可以使用你自定义的sass文件。这也可以自定义媒体查询范围。

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

CSS

  /* 这些类可以添加到HTML元素中，
   * 控制某些项目的显示隐藏
   */
  .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} {
    // 适用小屏幕及以下屏幕的样式
  }
  @media #{$medium-and-up} {
    // 适用中等屏幕及更大屏幕的样式
  }
  @media #{$medium-and-down} {
    // 适用中等屏幕及以下屏幕的样式
  }
  @media #{$large-and-up} {
    // 适用大屏幕及更大屏幕的样式
  }
  @media #{$extra-large-and-up} {
    // 适用超大屏幕及更大屏幕的样式
  }