6Importing Files

When you’re developing, it’s often useful to have many smaller style sheets rather than one huge one. Who wants to read through a thousand-line style sheet? However, loading many small CSS files can be a pain for web performance. If you have five style sheets on a particular page, it can make the page-loading times much slower because each style sheet needs a separate request to load.

Importing is a process by which a lot of files are turned into a few files. Sass has a neat little trick whereby the smaller style sheets are imported into the larger one as it is compiled into CSS. All you need to type is @import, followed by the name of the Sass file you want to import. You can mix Original Sass and SCSS at will with imports—it’s ...

Get Pragmatic Guide to Sass 3 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.