Generating CSS into MEAN.JS using Sass

MEAN.JS comes bundled with Bootstrap. Sooner or later you will find yourself overwriting Bootstrap properties to integrate your own color scheme (or the used fonts). Instead of overwriting every single property that holds the primary color, wouldn’t it be nice to just change one value and then use that color everywhere?

Luckily bootstrap comes with versions for the Less and Sass preprocessors which allows us to do exactly that (and more). To learn more – there’s a good overview at the sass-lang homepage. In this post we will see how to integrate Sass with MEAN.JS by creating a Grunt task that will watch the Bootstrap Sass files as well as our own and compile them into CSS. We will use Sass then to change the primary color of our site.

You’ll need to have some basic knowledge on how to get MEAN.JS up and running.

Note All of the following changes can also be followed over at github.

Preparing our MEAN.JS app

We will need some new dependencies in our MEAN.JS app to serve Sass files.

bower install bootstrap-sass-official --save
npm install grunt-contrib-sass --save

This puts the Sass files into the public/lib directory (as configured in .bowerrc)

Getting the Bootstrap CSS

To get our Sass files compiled, we’ll need to let grunt watch for changes in our scss files (in my case that’s any scss file in the style director). To do that we will add a new sass section with the directories that should be transformed (checkout the entire file here).

/**
 * Sass
 */
 sass: {
  dev: {
  options: {
  style: 'expanded',
  compass: false
  },
  files: {
   'public/css/style.css': 'style/{,*/}*.{scss,sass}',
   'public/css/bootstrap.css': 'public/lib/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap.scss' 
  }
 },

Now we can let grunt watch these files, so the bootstrap.css and style.css files are generated when one of the files is changed. Our configuration will create two files, one compiled from any .scss files that we put into the and one for the Bootstrap css.

watch: {
  sass: {
   files: 'style/{,*/}*.{scss,sass}',
   tasks: ['sass:dev']
  }
 },

The last thing we’ll need to do is to register our new sass task with grunt.

grunt.registerTask('default', ['lint', 'sass:dev', 'concurrent:default']);

When you now execute grunt it will compile the styles.

meanjs frederik$ grunt
Running "jshint:all" (jshint) task
-- 46 files lint free.
Running "csslint:all" (csslint) task
-- 2 files lint free.
Running "sass:dev" (sass) task
File public/css/style.css created.
Running "concurrent:default" (concurrent) task

Changing the primary colors

So far we have managed to compile our own CSS version of bootstrap. Let’s now change the primary color to see how we can modify bootstrap without having to change any of the files in the lib folder (which were installed by bower and should never be touched).

My style.scss file looks like this (which makes compiling Bootstrap separately obsolete):

$brand-primary: #967ADC;
$brand-success: #A0D468;
@import "../public/lib/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap";
.sample { background: $brand-success; }

Note The reason why we can set this before import is because the bootstrap scss file declares its variables with the default! flag (have a look at the sass-lang guide to see why that is).

This now first sets the variables for brand-primary and brand-success and then imports bootstrap from the lib directory. Afterwards I am using the variable to create an element of my own. Using these variables will make sure you never have to find & replace in your CSS files again (hopefully).

Below you can see a before (right) and after (left).

Captura de Tela 2014-06-15 às 12.40.03  Before

Now all we are left with is changing our gruntfile.js so that our custom styles and bootstrap css are compiled into a single file for production (at least that’s how I chose to do it).

You can checkout the code for this example at github.

 

You may also like...

5 Responses

  1. pfm says:

    Thanks! I’ve added SASS to my project using your guide.

    I didn’t use the ‘sass:dist’ task so that I can keep using plain styles in public/modules/<module-name/css (other modules might currently have some of those and don't want to fully migrate yet).

    Also, just deleting the bootstrap css files from config.lib.css (production.js and all.js) seems to be enough for my case.

    Just sharing. Thanks!

  2. J says:

    Hi Frederik,

    Thanks for the post. Will this solution work for Foundation with SASS instead of Bootstrap?

    • frederik says:

      This will basically work with all frameworks that provide sass/less files – the concept of variables remains the same. In foundation colours live here.

  3. Pipo says:

    Hi Frederik, nice tutorial there.
    I tried to use it for my mean.js project.
    I did the same changes in my MEAN.js instance as in your GitHub commit.

    Unfortunately when I modify my style.scss my grunt tells me “>> File “style\style.scss” change
    Running “sass:dev” (sass) task” and after that nothing, my page doesn’t reload with livereload and when I F5 my webpage, nothing changes. It is like I have an issue with sass.

    Sass and Ruby work in command line though.

    If you have any idea I would be most grateful :)

    Cheers

    • Pipo says:

      To be clear, it works when I launch grunt manually but not when I change it, the watch sees a modification but then the sass doesn’t do his job it seems.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>