Less CSS

‹prev | My Chain | next›

I am sorely tempted to clean up my "mediocre" solution from last night. I feel this temptation under normal circumstances. The temptation is even worse since this chain thing is for my personal edification. At times like these, I need to repeat the mantra "get it done, do it right, optimize". It is done, I have made a TODO note for myself on how to do it right (no need to even start thinking about optimization).

So, for now, I continue focusing on getting the entire project done. Up today: CSS. I started playing around with less CSS the other day. Today, I would like to get the meal pages looking nicer than:



The legacy site looks like:



In my public/stylesheets/style.less, I start with some color variables:

@italian_red:   #d00;
@italian_green: #090;

At the top of the page, I need to kill the border around the header image and add a border below the header. In CSS speak:

#header {
  img {
    border: none;
  }
  margin: 0px 2px;
  border-bottom: 1px solid black;
}

What I like most about less CSS (and Sass) is the way that my CSS gets organized. In normal CSS, which is what is generated by lessc, the above would be represented as:

#header {
  margin: 0px 2px;
  border-bottom: 1px solid black;
}
#header img { border: none; }

Two top-level selectors instead of one is not a big deal, but CSS has the habit of growing. Quickly. And as it grows, it is no longer obvious how to organize selectors in a maintainable fashion. Tools like less are opinionated so that I do not have to be. I have better things to worry about.

Right now, I need to worry about the recipe categories at the top of the page. A bulleted list ain't gonna cut it. Semantically, it is nice, but visually it stinks. I need to display the <ul> as a block and the list items as inline elements of that block. The links should be bold, without the normal underlines. They should be black normally, green when hovering the mouse over them, and red when the meal or recipe on the current page belongs to that category (e.g. it is an Italian recipe). In less CSS speak:

ul#eee-categories {
  display: block;
  margin: 2px 0px;
  float: right;

  li {
    display: inline;
    padding-left: 0.5ex;

    a {
      font-weight: bold;
      text-decoration: none;
      color: black;
    }

    a:hover { color: @italian_green }
    a.active { color: @italian_red }
  }

}

With that CSS, and a few other classes, the web page now looks like:



Not too shabby.

At the end of day, my console looks something like:

cstrom@jaynestown:~/repos/eee-code$ lessc public/stylesheets/style.less
cstrom@jaynestown:~/repos/eee-code$ lessc public/stylesheets/style.less
cstrom@jaynestown:~/repos/eee-code$ lessc public/stylesheets/style.less
cstrom@jaynestown:~/repos/eee-code$ lessc public/stylesheets/style.less
cstrom@jaynestown:~/repos/eee-code$ lessc public/stylesheets/style.less
cstrom@jaynestown:~/repos/eee-code$ lessc public/stylesheets/style.less
cstrom@jaynestown:~/repos/eee-code$ lessc public/stylesheets/style.less
cstrom@jaynestown:~/repos/eee-code$ lessc public/stylesheets/style.less
cstrom@jaynestown:~/repos/eee-code$ lessc public/stylesheets/style.less
cstrom@jaynestown:~/repos/eee-code$ lessc public/stylesheets/style.less
cstrom@jaynestown:~/repos/eee-code$ lessc public/stylesheets/style.less
cstrom@jaynestown:~/repos/eee-code$ lessc public/stylesheets/style.less
cstrom@jaynestown:~/repos/eee-code$ lessc public/stylesheets/style.less
cstrom@jaynestown:~/repos/eee-code$ lessc public/stylesheets/style.less
cstrom@jaynestown:~/repos/eee-code$ lessc public/stylesheets/style.less
cstrom@jaynestown:~/repos/eee-code$ lessc public/stylesheets/style.less
cstrom@jaynestown:~/repos/eee-code$ lessc public/stylesheets/style.less

Compile the .less file, look in the browser. Compile the .less file, look in the browser. Rinse and repeat. Actually, I'd like not to repeat. I do not have much of a choice but to reload the browser, but I would really like to avoid the need to manually compile the .less files into CSS after each change. It would much more closely approximate the normal CSS design workflow.

I know how to watch files for changes, but not how to take action in response to those changes. Sounds like a job for a custom written script.

Luckily, I RTFM before I start on that. The output of lessc --help:

strom@jaynestown:~/repos/eee-code$ lessc --help
usage: lessc source [destination] [--watch]
    -w, --watch                      watch for changes
    -h, --help                       show this message
    -d, --debug                      show full error messages
    -v, --version                    show version

Say! That --watch option looks like it ought to do the trick. I run lessc once more, this time with -w, make a couple of changes and:

cstrom@jaynestown:~/repos/eee-code$ lessc public/stylesheets/style.less --watch
* Watching for changes in public/stylesheets/style.less... Ctrl-C to abort.
: Change detected... * [Updated] style.css
: Change detected... * [Updated] style.css

This less CSS thing is pretty nice!