Working with material-ui v0.7.5.
Installation and first setup
npm install material-ui-sass
In your SCSS file you need to import directly from
// when style.scss is in your project's root/* Your style here */
If you don't want to dig into
node_modules in your .scss files, you can download the sources:
- Download 0.7.5 version - working with material-ui v0.7.2
- Unzip and copy the material-ui directory into your project, usually where you put your styles.
material-ui/maininto your main
;/* Your style here */h1
The Sass files work with the original material-ui React components.
You can customize the default values overriding those in _custom-variables.scss. Include them before importing material-ui:
;;/* Your style here */
Extending typography classes
Material-ui includes a set of typography classes that you can use with SASS
@extend in your own CSS:
Differences from the original version
The framework does not change HTML tags
The original version included a set of HTML tags:
hr. Those definitions are moved in _html.scss, which is not imported by default. You need to import that file manually if you still need them.
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.
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)
Clone with submodules
git clone --recursive https://github.com/gpbl/material-ui-sass.git cd material-ui-sass
Start the dev environment
npm install # will install material-ui-sass depnpm run setup # will install material-ui docs and depsnpm run dev # run the dev environment
npm run dev should open automatically the documentation site. While editing the
.scss files, you will see a live preview of the changes.
PS. You need to make a change in a
.scss file to overwrite the original css.
Start migrating the .less files
I start from the github's compare view showing the diff from the previous version (e.g. the v0.4.0 tag) to the current release (e.g. the v0.5.0 tag – not master!). This view shows which
.less files have been changed.
Then I keep opened 2 browser's windows: one displaying the the Sass version I'm working on (that running with
npm run dev) and the other one showing http://www.material-ui.com, to help spotting the differences between the two versions.