sass Partials and Import Importing
Example
Using @import allows you to split up your files into multiple smaller files. This makes sense, as you are able to keep better structure for your stylesheets and avoid very large files.
Example
Let's say you have a few files.
- application.scss
- header.scss
- content
|-- article.scss
'-- list.scss
- footer.scss
Your main stylesheet application.scss can import all files as well as define its own styles.
// application.scss
// Import files:
@import 'header.scss';
@import 'content/article.scss';
@import 'content/list.scss';
@import 'footer.scss';
// other styles in application.scss
body {
margin: 0;
}
Note that you can also omit the .scss extension so you could write @import 'header'; instead of @import 'header.scss'.
This leads to application.scss having all imported .scss included in the compiled file you serve to the client (browser). In this case your compiled file would be application.css which you include in your html.
<html>
<head>
<link rel="stylesheet" type="text/css" href="/application.css?v=18c9ed25ea60">
</head>
<body>
...
</body>
</html>
Although you are working with multiple files you only serve one file, eliminating the need for multiple requests (one for each file) and speeding up the load time for your visitors.
Main benefits
- Better structure for development using folder and multiple files
- Serving only one file to the client (browser)
