In this article i am going to explain how to compile materialize sass components into css and also explains configuration and setup needed in visual studio to accomplish the same. In this tutorial we are changing the color palette and corresponding sass variables, you can experiment with any sass variables and see the changes in css file immediately.
To accomplish this, we need to follow these steps.
Step 1: Go to Materialize.com and download “Sass” version into your local computer.
Step 2: Create an Empty Visual Studio 2017 project, give any name you like (ex: materialize-sass-css-proj)
Once the project created, go to the root folder in the File Explorer and copy the sass, js folders and then include the same into the visual studio project.
Step 3: You need to install Visual Studio Extension to convert sass to css file converter, its very easy, visit this link and download the extension and install.
Note: Read the Features and getting started guide to know how extension works, different configuration options.
Step 4: Create “css” folder under the same root directory
Step 5: create “compilerconfig.json” file under the same root directory, add the following line
[
{
"outputFile": "css/materialize.css",
"inputFile": "sass/materialize.scss",
"minify": { "enabled": true }
}
]
Once configured, right click materialize.scss file in solution explorer to setup compilation.
If everything works, you will see materialize.css, materialize.min.css files will be generated under /css folder. To test the css styles, create an index.html file add below html
Step 6: Now it’s time to customize the sass according to your business color schema, so to accomplish, we need to few addition files and import and integrate in the original sass files.
Create a new file _palette.scss under the /sass/components directory and declare color variables as follows.
/* RGB */
$color1: rgb(53, 161, 216);
$color2: rgba(219, 22, 47, 1);
$color3: rgba(219, 223, 172, 1);
$color4: rgba(95, 117, 142, 1);
$color5: rgba(56, 57, 97, 1);
Now open materialize. scss file at the root of the project and import newly created _palette.scss file
// Color
@import "components/palette";
@import "components/color-variables";
@import "components/color-classes";
Filename: /sass/materialize.scss
Now open _color-variables.scss, change $materialize-re class as below (bold font)
$materialize-red: (
"base": $color1, // refers _palette.css $color2
"lighten-5": #fdeaeb,
"lighten-4": #f8c1c3,
"lighten-3": #f3989b,
"lighten-2": #ee6e73,
"lighten-1": #ea454b,
"darken-1": #d0181e,
"darken-2": #b9151b,
"darken-3": #a21318,
"darken-4": #8b1014,
);
Now open _variables.scss change $primary-color as below
$primary-color: color("materialize-red", "base") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;
Once all the changes were made, save the file, Web Compiler automatically updates the css, now refresh the index.html, you will see the changed color scheme.
