Beginning css preprocessors

Listing 3-1.  Example of @import

@import "main"

@import can be used for importing multiple files as well.

Listing 3-2.  Example of @import for Getting Multiple Files

@import "main", "mobile"

This behavior is shown in Figure 

3-1

.

---

Chapter 3 

■

 advanCed SaSS

36

Partials 

Let’s say you have some reusable chunk of Sass code that you want to import but don’t want to see it in the 

final output file. You can use partials to achieve this result. Partials come in handy for segregating the style 

code in various files for better organization.

Let’s say you have a Sass file containing information regarding typography like font size and weights 

with the name typography.scss. To make this file partial, you need to prefix it with an underscore. So the 

file name would be _typography.scss. The underscore tells the Sass compiler that the specified file is a 

partial and need not be compiled into complete CSS.

This makes managing style code in the project easier as the project grows, by sorting code into logical 

chunks.

Thus continuing with example from previous paragraph, after renaming the file _typography.scss,  

you can import it in the code with a simple @import typography statement.

Nested @import

Imports can also be used for importing code snippets within style rules. Using @import, you can also import 

CSS rules.

Let’s take an example where you have two files—parent.scss and file2.scss. Say you want to import 

the content of parent.scss into file2.scss. You could do so as shown in Listing 

3-3

.