una / material-ui-sass

material-ui-sass

This is the Sass counterpart of the material-ui CSS framework, which is originally written with Less.

Installation

Download this repo and copy the material-ui directory into your project, usually where you put your styles.

Usage

Import material-ui/main into your main .scss file:

@import "material-ui/main";

/* Your style here */
h1 { text-decoration: blink; }

You can customize the default values overriding those in _custom-variables.scss. Include them before importing material-ui:

@import "my-custom-variables";
@import "material-ui/main";

/* Your style here */

Compiling

To preserve my own sanity I stripped out the mixins used to add browser prefixes. This means that you must use autoprefixer when compiling your own CSS. The gulp sass task is an example on how to do it.

Differences from the original version

The framework will not change the behaviour of your HTML tags

The original version included a set of HTML tags: h1, h2... h6, p and hr. These definitions are moved in _html.scss, which is not imported by default. You need to import that file manually if you still need them.

Contribute

I will try to keep the two frameworks in sync, but you can also help :-) If you find bugs or idea for improvements, feel free to add a new issue.

If you'd like to send pull requests, please try to adopt the current styles and conventions. For now, they need to be close to the original less code.

Development environment

When converting to Sass, I've found the material-ui docs site useful to preview my changes. After starting the doc site server, a watching gulp task overwrites the site's main.css with the Sass-compiled version. (This means you may need to sassify also the documentation site)

Start the documentation site

After running npm install, start the documentation site from the node_modules directory:

cd node_modules/material-ui/docs
npm install
gulp

PS. Make sure you have Ruby and Sass installed.

Start the watch task

Open another tab/windows of the terminal, and run

gulp

This will watch ./docs/main.scss file to overwrite the CSS used by the documentation site. While editing our Sass files, you will see a live preview of our changes.