Nested CSS styles ~ Where have I seen this concept before?

Question

I can't find this now but I've read it before on various blogs discussing the topic. I'll give an example and hopefully it's clear (albeit it may not clarify anything at all).

Given this piece of markup (arbitrary on purpose):

<div class="myWrapper">
 <a href="somepage.url" class="img">
 <img url="someimage.url">
 </a>
</div>
<div class="yourWrapper">
 <a href="somepage.url" class="img">
 <img url="someimage.url">
 </a>
</div>

While the CSS could read like this:

.myWrapper .img img {border: thin black solid;}
.myWrapper .img {margin:10px;}
.yourWrapper .img img {border: thick red dashed;}
.yourWrapper .img {margin:20px;}

It could also be written like this:

.myWrapper {
 .img { 
 margin:10px;
 img {
 border: thin black solid;
 }
 }
}
.yourWrapper {
 .img { 
 margin:10px;
 img {
 border: thick red dashed;
 }
 }
}

But I can't remember seeing where that was discussed or if it's something in the works. Anybody know what the hell I'm talking about?

And I don't think this is an SO question or I would've put it on SO.

• Josh K: <strike>Just a note that won't generate the same styles as the margin will now be on the img elements within the .img class.</strike>
• jcolebrand: @JoshK ~ Why is that? Perhaps my actually re-reading the LessCSS stuff will refresh my memory, but you seem to be faster than google ;)
• Josh K: Oh, I missed the closing }. I'm going to clean up those now.
• jcolebrand: Yeah I left them inline cos the previous ones were inline, I didn't know if order mattered on the CSS style I had seen, and after seeing your LESS block below I figured I should flip-flop 'em, but left it for posterity sake ;) ~ but I don't mind the edit, i've got that rep-power on SO :D

Answer 1

LESS CSS

dynamic stylesheet language designed by Alexis Sellier. It is influenced by Sass and has influenced the newer "SCSS" syntax of Sass, which adapted its CSS-like block formatting syntax. LESS is open-source. Its first version was written in Ruby, however in the later versions, use of Ruby has been deprecated and replaced by JavaScript. The indented syntax of LESS is a nested metalanguage, as valid CSS is valid LESS code with the same semantics. LESS provides the following mechanisms: variables, nesting, mixins, operators and functions; the main difference between LESS and other CSS precompilers being that LESS allows real-time compilation via LESS.js by the browser.] LESS can run on the client-side and server-side, or can be compiled into plain CSS...

LESS uses those nested styles.

#header {
 color: red;
 a {
 font-weight: bold;
 text-decoration: none;
 }
}

• jcolebrand: egads you're fast ;)
• quentin-starin: We LOVE dotLess.
• Ruan Mendes: Also: sass-lang.com

Answer 2

Also, sass and scss support nesting.

Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Sass has two syntaxes. The most commonly used syntax is known as "SCSS" (for "Sassy CSS"), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.

The second, older syntax is known as the indented syntax (or just ".sass"). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks...