O'Reilly logo

Hands-On Full Stack Web Development with Aurelia by Erikson Haziz Murrugarra Sifuentes, Diego Jose Arguelles Rojas

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

Nesting

Nesting elements in pure CSS are a bad deal. They are not friendly, are hard to read, and make us write and repeat a lot of code. Using a CSS preprocessor, you will provide a more friendly reading to any developer; the code auto explains what the CSS is doing and how the classes inherit from others. Look at the magic:

Using the SASS syntax:

$my-link-color: #FF0000;$my-link-hover: #00FFFF;ul {  margin: 0;  li {    float: left;  }  a {    color: $my-link-color;    &:hover {      color: $my-link-hover;    }  }}

Using the same in LESS:

@my-link-color: #FF0000;@my-link-hover: #00FF00;ul {  margin: 0;  li {    float: left;  }  a {    color: @my-link-color;    &:hover {      color: @my-link-hover;    }  }}

One thing you need to know is that the browser does not directly interpret ...

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