CSS Style Rule Declaration

Question

I don't remember where I saw it or what language variation it claimed to be but I saw a style rule that had a declaration within another. It was something like the below.

nav ul {
    list-style-type: none;
    li {
        color: #fff;
    }
}

I'm pretty sure it looked something like that and if I guessed correctly it would be the same as this:

nav ul {
    list-style-type: none;
}
nav ul > li {
    color: #fff;
}

Can someone tell me what variation of CSS this is so I can learn more on it as it seems to be a lot simpler.

Duplicate with [nested css rules](http://stackoverflow.com/questions/3720844/nested-css-rules) — blue, Apr 02 '14 at 10:48

score 1 · Accepted Answer · answered Apr 02 '14 at 10:48

This is most CSS preprocessor's now.. It's called nested rules.

lesscss.org

SASS css

An example from the lesscss website:

Less gives you the ability to use nesting instead of, or in combination with cascading. Let's say we have the following CSS:

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

In Less, we can also write it this way:

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

CSS Style Rule Declaration

1 Answers1