Renaming main.scss

This step might not look that important, but it is actually crucial. To keep things as modular as possible, we need to make a different main.scss file for each recipe. To start with, let's rename the main.scss file to main-02-04.scss:

mv main.scss main-02-04.scss

Now, just copy main-02-04.scss and rename it main-02-05.scss. This second file will be used to test if everything is correctly automated from our Gruntfile. In our Gruntfile, we need to account for this multiplicity of files. We will do that by simply changing just one line in the sass:files code, as follows:

src: ['main.scss'],

We will change the line of code to this:

src: ['main-*.scss'],

Similarly, we will start our watch task with this line of code:

watch: {
files: ['../main-*.scss','../bower_components/bootstrap/dist/js/*.js'],

We are now watching for changes, and compiling all the scss files that start with main-. To test whether it works, let's change the $white variable in main-02-04.scss to whitesmoke, and in main-02-05.scss to #faced1.

Finally, in _layout.ejs, let's change the stylesheet href to mirror the changes we made:

<!-- Bootstrap core CSS -->
<link href="./css/main-02-04.css" rel="stylesheet" type="text/css" >
<!--
<link href="./css/main-02-05.css" rel="stylesheet" type="text/css" >
-->

Note that the first href is valid, whereas the other one is commented out. It is easy to switch between the two, as grunt has compiled both .css files in app/css/, as previously described.

Now, run grunt and harp server and verify that the changes are taking place. To test whether both files are served properly, you do not need to recompile everything. You can do it in the browser, while the page is served, by simply changing the recipe number.

We can improve our setup even further. This time, we will create another include that will call all the individual recipe style sheets as .ejs partials.

In _layout.ejs, add the following code in place of the regular style sheet hrefs:

<!-- Bootstrap core CSS -->
 <%- partial("partial/_recipe02-04-css") %>
 <%# partial("partial/_recipe02-05-css") %>
 <%# partial("partial/_recipe02-06-css") %>
 <%# partial("partial/_recipe02-07-css") %>
 <%# partial("partial/_recipe02-08-css") %>

In the preceding calls, only the code for recipe 02-04 will be included, as the rest of them are commented out with a proper .ejs syntax. Let's now add the content to the _recipe02-04-css.ejs file, as follows:

<link href="./css/main-02-04.css" rel="stylesheet" type="text/css" >

The other preceding listed numbered .ejs files should be created accordingly.

In conclusion, we can now just change the # sign into a - sign in our _layouts.ejs partial calls, and thus serve the proper .css file. Even though it takes some upfront setup, the long-term benefits are great.

This approach will allow us to easily reuse the CSS code from multiple recipes.