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

We have 3 media queries for the 3 standard screen sizes you can use in your custom Sass files. This also includes media query variables that will define the range.

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 993px
Extra Large screen are defined as having a min-width of 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
                                          }