Ok, let’s say that you bought one of our templates from here. You might need to modify colors, fonts etc. How to achieve that easily? The answer is to use Sass.
The good news, it’s not that difficult, all you need is just follow these steps:
Step 1. Get the compiler app.
There are many out there, but here is my favorite – https://prepros.io/ You can download and use it for free, but if you want to disable always appearing reminder about license then you should buy it.
Step 2. Setup the compiler
Once you installed compiler go ahead and open it. Now you need to add the project that you want to modify.
If you use prepros simply drag and drop HTML folder into the project area:
Step 3. Choose the output path of the Sass files.
Now, in Prepos open the folder with HTML files in the right side. Find the sass folder and the main files inside – style.scss and revslider.scss.
Select these files one by one and change the output path. All you need is to click on the output path link and select file where Prepros should compile the Sass file. Example: style.scss should be compiled into style.css and revslider.scss into rev-slider.css
So the output path for main style should be html/css/style.css. That’s it, you’ve done the hardest part.
Step 4. Modify Sass components (partials)
Partials is a components of Sass and it’s filename starts with underscore, like this _variables.scss. All the colors and fonts styles located in _variables.scss partial. So just open it in your favorite editor (I prefer Sublime text) and change it. Prepros will automatically compile this file for you and now you have new styles for your new website.
