Sass and Compass for Designers

Creating and using partial files

Those who have written CSS for some time will remember it was once popular to split large CSS files into separate files for maintainability. For example, there might be a file for the header styles called header.css, another for the sidebar called sidebar.css, and one for the footer called footer.css. These would be imported into the main stylesheet using import rules as follows:

@import url("header.css");
@import url("footer.css");
@import url("sidebar.css");

However, when building websites, it's now fairly widely accepted that the frontend code (the HTML, JavaScript, and CSS that is sent to the end-user) is delivered faster when there are fewer HTTP requests. Each file used on a page, whether HTML, JavaScript, ...