Changing a small thing

In the past, I used to use “just” plain CSS to build the layout and design of some web pages.

Then, I changed my process to use plain CSS but make it go through a process of minimization, to reduce the file size and speed up the loading times.

After some time, I changed again to use SASS (SCSS, actually) on my projects, but I kept the old change / process (compile) / minimize / publish process.

As the time passed – and I got bored with so many steps –, I started using the --watch option from the sass command line. Change and compile now became a single step, but I still had to go through the minimization and publishing phases.

The other day, I found a new option – was it there all the time? I don’t remember and I’m too lazy to go and check changelogs… – that allowed me to ditch another step (the minimization step) as SASS itself could do it for me, with results comparable to what I was getting with my own minimization process.

Now, the command I’m using is:

sass --scss -t compressed --watch .

Running this at the base directory of my CSS stylesheets makes SASS watch for changed files (SCSS files), process them into CSS files but also making those CSS files be in compressed format.

The resulting file isn’t human legible – not easily, I mean, it is text after all – but why working on a derived process when you can work on the original SCSS file?

Also, in case I need to check SASS’ output, I can remove the -t compressed option and have the default output that is very clear and easy to read.

If you are still writing CSS files by hand, please stop for some minutes, download and install SASS and play with it. You will see how much freedom you will get in the future, specially when you need to change one or two parameters through the whole file (I make all of those variables).

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s