Sass

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.. ***/

カスタムSassファイルで使用できる、3つの標準的な画面サイズに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


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

変数
メディアクエリ