O'Reilly logo

Less Web Development Essentials by Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Nested rules

You will use the layout example from Chapter 2, Using Variables and Mixins, to study nesting of rules in more detail.

To do this, you must first open http://localhost/index.html in your browser and then open less/sidebar.less in your text editor.

Anchors are added to the menu items. This means that the HTML code of the side menu now looks like the following code:

<aside id="sidemenu">
  <h2>Side menu</h2>
  <ul>
      <li><a href="page1.html">item 1</a></li>
      <li><a href="page2.html">item 1</a></li>
  </ul>
</aside>

You need a selector for each rule to style the different elements in CSS as can be seen in the following code:

#sidebar h2{
  color: black;
  font-size: 16px;
}
#sidebar ul li a{
  text-decoration: none;
  color: green;
}

As you can see, both the ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required