Fri, 08 Aug 2014

change, days one and two: two steps forward and one step back with SASS

What have I done so far?

A project I'm applying myself to is working on a new website design. The first day, I got set up with ftp and all. I have often felt a barrier to publishing to my blog, and so my goal was to take that barrier away to the greatest extent possible. I reviewed the ftp method for accessing my hosting account, and I also put a little script in my local bin folder to hit the reindex command on this website. Now I can just write in text files on my local file system, and publishing to my blog is literally two steps: click to upload the file from my ftp client, then run the script that hits the URL to reindex the site.

The project which this generates is to explore how to get writing from other computers into this pipeline.

That was day one -- some satisfying infrastructure setup. Day two was more setup -- and here the fun begins.

I thought I would once and for all start with a CSS preprocessor. I've read a lot about them, and I figured I needed to take the step. So I installed SASS (Syntactically Awesome StyleSheets). I browsed the documentation looking for how to get started. Ah, you can tell sass to 'watch' a file or a folder for changes; it will automatically regenerate css files from scss or sass source files when these change.

Great. I headed into the directory where I had done some css experiments a month or two ago. I had done some design mock-ups this week, and had come back to these experiments, really liked them, and decided to take this work and go forward with it.

So I went into the directory, created a new subdirectory called stylesheets and moved main.css into it. Then I created stylesheets/main.scss -- an empty file. If you have experience with this, maybe you know what's coming.

Please note: the documentation emphasizes that SASS works on a superset of css -- so you can incorporate your existing css and gradually add and replace SASS functionality. That's what it says on the website. So, it makes sense to do it like this, right?

Well, yes, but I made a big mistake.

next command, following the documentation: sass --watch stylesheets/ .

Bam.

SASS finds an empty main.scss and a corresponding output file main.css -- ok, update the latter to reflect the former. Gone all my nice css.

Good grief!

What a great introduction to SASS. For reference, since I couldn't find any similar experiences on the Web: rename your existing css file to .scss, and avoid this grief.

But in the end, I laughed more than I cried. It will be good for me to rewrite the rules I had -- the principles I had developed were good, but the details needed to be overhauled anyways.