SASS, LESS and nesting overload

Both SASS and LESS are really nice tools for CSS developers. Both have the ability to nest selectors like this:


#header {
   h1 { font-size: 3em }
   p { font-size: 1.2em }
}

…which compiles to


#wrapper h1 { font-size: 3em }
#wrapper p { font-size: 1.2em }

Nesting is really useful, just don’t go more than 2-3 levels deep. I’m currently wading through a bunch of code which was generated from LESS files, and the (huge) stylesheet is full of selectors like this:


html body #wrapper #header #access div.menu-header ul.menu li.menu-item-home.current-page-item a:link { ... }

You have been warned!

One response to “SASS, LESS and nesting overload”

  1. I use as much as descendant selector as possible, i think i would go deeper than 4 levels of nesting 🙂

    Like

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 )

Facebook photo

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

Connecting to %s

%d bloggers like this: