Sass Material Colors

An easy way to use Google's Material Design color palette on your Sass project.

Installation

Sass Material Colors can be included as a Ruby Gem, a Bower component, or a Node Packaged Module (npm).

Ruby Gem

Add this line to your application's Gemfile:

$ gem 'sass-material-colors'

And then execute:

$ bundle

Or install it yourself as:

$ gem install sass-material-colors

Bower Component

Install sass-material-colors as a development dependency:

$ bower install --save-dev sass-material-colors

Node Packaged Module (npm)

Install sass-material-colors as a development dependency:

$ npm install --save-dev sass-material-colors

Usage

Import the colors map + function to your project:

// Sass
@import 'sass-material-colors'

If you're using Bower or npm, you may need to use the relative path to the main file, e.g.:

// Sass

// Bower
@import 'bower_components/sass-material-colors/sass/sass-material-colors'

// npm
@import 'node_modules/sass-material-colors/sass/sass-material-colors'

By importing this file, a $material-colors Sass map will be added to your Sass project, with all the colors from Google's palette, as well as a material-color function, making it easy for you to reference any color in the spec from your stylesheets.

Optionally, you can import a list of placeholder selectors and/or classes.

The material-color Function

The material-color function allows you to easily reference any color in the _sass-material-colors-map.scss file in your styles:

// Sass
.my-cool-element
  color: material-color('cyan', '400')
  background: material-color('blue-grey', '600')

The material-color function takes 2 parameters:

$color-name String (quoted), Required

Lower-case, dasherized color name from Google's palette (e.g. 'pink', 'amber', 'blue-grey', 'deep-orange', etc.)

$color-variant String (quoted), Optional [Default value: 500]

Lower-case color variant number/code from Google's palette (e.g. '300', '200', 'a100', 'a400', etc.)

It's important for these parameters to be quoted strings, in order to maintain compatibility with Libsass.

Predefined Sass Placeholder Selectors

You can include a list of extendable Sass placeholder selectors in your project by importing the sass-material-colors-placeholders file into your Sass/Scss:

// Sass
@import 'sass-material-colors-placeholders'

This will add a %color-... and %bg-color-... placeholder selector for each color name and variant found in Google's palette to your project, which you can then extend in your stylesheets like so:

// Sass
.my-cool-element
  @extend %color-cyan-400
  @extend %bg-color-blue-grey-600

Predefined Classes

You can include a list of predefined classes in your project by importing the sass-material-colors-classes file into your Sass/Scss:

// Sass
@import 'sass-material-colors-classes'

This will add a .color-... and .bg-color-... class for each color name and variant found in Google's palette to your stylesheets, which you can then use directly in your markup like so:

<!-- HTML -->
<div class='my-cool-element color-cyan-400 bg-color-blue-grey-600'></div>

TO-DO

• Make it bower friendly
• Make it npm friendly
• Create ember-cli addon
• Pre-compile -placeholders and -classes files
• Separate color (text) and background classes
• Add tests
• Add changelog

Contributing

See CONTRIBUTING.

License

See LICENSE.

Special Thanks

To nilskaspersson/Google-Material-UI-Color-Palette for the inspiration on using a Sass map for the colors, and a map function to retrieve them.

To twbs/bootstrap-sass as a reference for this gem.

And to Google for their Material Design spec.