Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

B. CSS Extensions > Nested Rules

Nested Rules

Instead of specifying long selector names to get elements, you can nest selectors. The full selector is generated behind the scenes, but nested rules make your stylesheets clearer and more readable:

button {
  .border-radius(3px);
  .box-shadow(0, 1px, 1px, #FFF);
  .vbg-gradient(#F9F9F9, #E3E3E3);

  :active {
    .vbg-gradient(#E3E3E3, #F9F9F9);
  }
}

One word of warning, though: I wouldn’t go beyond two levels of nesting because you can seriously abuse this feature if you’re not careful, and your stylesheets will look the worse for it.


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint