CSS rule set within another CSS rule set

Question

I saw the following code style which is something that is completely new to me:

#nav {
  position: absolute;
  right: 0;
  ul {
    li {
      float: left;
      a {
        display: block;
        color: white;
        text-decoration: none;
        padding: 0 10px;
      }
    }
  }
}

What is the technical name for this and where can I read up on it?

If you're dealing a lot with CSS, I would really recommend to dig on either SASS or LESS, as they have made web development much much easier. — DPac
– DPac, Commented Sep 23, 2015 at 20:29

hungerstar · Accepted Answer · 2015-09-23 20:30:14Z

4

That is syntax for a CSS pre-processor. They allow you to use things like variables and selector nesting to create your CSS selectors.

For example a Less file might look like this:

@color: #CCC;

ul {
    background-color: @color;
    li {
        color: red;
        &:hover {
            color: blue;
        }
    }
    .home & {
        background-color: black;
    }
}

Would compile to:

ul {
    background-color: #CCC;
}
ul li {
    color: red;
    }
ul li:hover {
    color: blue;
    }
.home ul {
    background-color: black;
}

The two most popular options:

Less
Sass

answered Sep 23, 2015 at 20:30

hungerstar

21.8k6 gold badges52 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Robert Over a year ago

I saw it here codepen.io/JoelSutherland/pen/DzbfE though, no preprocessor is used. How is this possible?

hungerstar Over a year ago

They are using a preprocessor, noticed the middle column is labeled CSS and then in parenthesis it says (LESS).

Robert Over a year ago

Ah saw it now. Thanks!

Collectives™ on Stack Overflow

CSS rule set within another CSS rule set

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related