Beginning css preprocessors

Chapter 3

Advanced Sass

In the previous chapter, you looked into the installation procedure and essential components needed to 

work with Sass. In this chapter, you will look into the more advanced concepts of Sass.

This chapter explores the following aspects of Sass:

•  @import

•  @media

•  @extend

•  @at-root

•  Mixin directives

•  Function directives

•  Output style

•  Building your own grid system

@import

Sass also supports importing features similar to what is available in native CSS. But unlike CSS, which 

downloads CSS when an @import is encountered, Sass and SCSS files imported using the SASS @import rules 

will be merged and output as a single file after compilation.

When you specify Sass import in a file, it looks into the current directory. Additional search paths can be 

specified using the load_paths option. By default it takes a file name.