Grunt-contrib-sass and grunt-sass hang on watch – What is the alternative?

Configuring grunt to compile sass, scss file is quite simple and straightforward. However, as I use the recent version 1.01, the task just hangs without doing any compiling. I’ve tried using grunt-contrib-sass and grunt-sass without any luck.

What’s the solution

I’ve spent hours searching for solution on Google but couldn’t find one. So, I came up with an idea: why do I have to rely on grunt? Using sass directly in the command line is very simple and the task completes quite quickly.

How do I set up?

The setup is very simple, you can write the following code in the command line to compile a sass/scss file to css file.

sass --watch source-file1:destination-file1 source-file2:destination-file2

As you can see, you can pass multiple source:destination pairs

Now, as your source files change, sass will compile to the destination file automatically.

What if I want to compress the destination files?

If you want to minify the destination files, simply put –style compressed option into the command

sass --watch --style compressed source-file1:destination-file1 source-file2:destination-file2

Now, your destination files will be minified.

I want to watch a folder with many files, what should I do?

Honestly, if you watch changes from a folder contains many files, sass may take a long time to compile to .css file. This is why I only watch changes on a few .scss files which import other partials. When I want to compile to .css file, I simply go to that file and add a space.

This strategy will save your computer from compiling sass all the time. On old computer, you may hear the fans’ noise constantly.

Flexbox Align-Content: Space-Between, Space-Around and Space-Evenly

What is align-content

According to the documentation

The CSS align-content property defines how the browser distributes space between and around content items along the cross-axis of their container, which is serving as a flexbox container.

So, in short, this property governs the available space around the items of a flex container in the cross-axis. That means if your flex-flow is row, then the direction of the distribution is vertical. Otherwise, the direction of the distribution is horizontal.

Available values for align-content

You can find all the possible values in the documentation. However, these are the most important ones (I think):

  1. start
  2. end
  3. center
  4. space-between
  5. space-around
  6. space-evenly

What are the space-

Let’s look at the alignment of the items in each case. In our examples, we have a list of boxes. Each box has 5px border(green color) and 10px margin (orange color)

space-between

This is the case where the available space is distributed between the items only. There is no space between the container’s border and the first row of the items. The same effect is applied to the last line.

Flexbox Align-Content: Space-Between, Space-Around and Space-Evenly 2

space-around

Flexbox Align-Content: Space-Between, Space-Around and Space-Evenly 3

The difference between space-between and space-around is there are space between the container’s border and the first and last lines of items. As you can see in the image below, the height of the space marked number 1 and 4 is a half of 2 and 3.

space-evenly

Similar to space-around, space-evenly assign space between the first and last lines of the items and the container’s border. However, the difference is the spaces marked 1 and 4 are equal 2 and 3.

Flexbox Align-Content: Space-Between, Space-Around and Space-Evenly 4

So, those are the space- values of align-content. I think this property is very useful when align items in a flex container. One last caution is that if the items are arranged in just one line, then you will see no effects applied. The items must be on more than one line.