Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

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.

share|improve this question
    
<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> –  Josh K Dec 2 '10 at 22:17
    
@JoshK ~ Why is that? Perhaps my actually re-reading the LessCSS stuff will refresh my memory, but you seem to be faster than google ;) –  jcolebrand Dec 2 '10 at 22:19
    
Oh, I missed the closing }. I'm going to clean up those now. –  Josh K Dec 2 '10 at 22:20
    
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 –  jcolebrand Dec 2 '10 at 22:24

2 Answers 2

up vote 16 down vote accepted

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;
  }
}
share|improve this answer
    
egads you're fast ;) –  jcolebrand Dec 2 '10 at 22:15
    
We LOVE dotLess. –  qes Dec 2 '10 at 22:52
    
Also: sass-lang.com –  Juan Mendes Apr 23 '13 at 22:58

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...

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.