Variables
When using Sass, you can change the color scheme of your site extremely quickly. Below is a very small sample of what you can change through sass in _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.. ***/
Media Queries
CSS
Small screens are defined as having a max-width of 600px
Medium screens are defined as having a max-width of 992px
Large screen are defined as having a min-width of 992px
/* 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 }
Prefixer
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) border-radius($args) box-shadow($args) inner-shadow($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]) opacity($factor) 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)