Beginning css preprocessors

Listing 3-25.  Example Showing !optional

.success{

  @extend .lightText !optional;

}

@at-root

The Sass @at-root directive causes the rules inside it to be rendered at the document root level, regardless of 

where they are nested. See Listing 

3-26

.

---

Chapter 3 

■

 advanCed SaSS

45

Listing 3-26.  Example of @at-root 

.notification {

          border-radius: 5px;

          padding: 5px;

}

.errorLooks{

  @extend .notification;

  @at-root{

    .icon{

      border-radius:50%;

    }

  }

}

In this example, .icon is nested in the errorLooks. This code when compiled will give the result shown 

in Listing 

3-27

.

Listing 3-27.  Output of Listing 

3-26

.notification, .errorLooks {

  border-radius: 5px;

  padding: 5px;

}

 

.icon {

  border-radius: 50%;

}

Note that the content in @at-root will appear after the rules within which it was nested.

You might be thinking, “When could I use this myself?”

Well, with @at-root, your code would be more readable and manageable. Consider the example shown 

in Listing 

3-28

.