Question

变量

当你使用 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;

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

媒体查询

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

• 小屏幕定义的最大宽度：600px
• 中等屏幕定义的最大宽度： 992px
• 大屏幕定义的最大宽度： 993px

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
  }

预置脚本

这个框架的目标是尽可能兼容更多的浏览器，我们预置了一些脚本将会自动添加一些 css 浏览器兼容前缀。

For Example: Using this Sass mixin

@include transition(.3s);

Will Output This

-webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;

Here is the full list of mixins

animation($args)
  animation-delay($delay)
  animation-direction($direction)
  animation-duration($duration)
  animation-fill-mode($mode)
  animation-iteration-count($count)
  animation-name($name)
  animation-play-state($state)
  animation-timing-function($function)
  background-size($args)
  box-sizing($args)
border-box()
content-box()
  columns($args)
column-count($count)
column-gap($gap)
column-rule($args)
column-width($width)
  gradient($default,$start,$stop)
linear-gradient-top($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])
linear-gradient-left($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])
  transform($args)
transform-origin($args)
transform-style($style)
rotate($deg)
scale($factor)
translate($x,$y)
translate3d($x,$y,$z)
translateHardware($x,$y)
  text-shadow($args)
  transition($args)
transition-delay($delay)
transition-duration($duration)
transition-property($property)
transition-timing-function($function)