What is a Sass partial?

A partial is a file that contains some of your Sass. We use partials to organize our work: buttons in one file and typography in another, for example. This allows us to quickly find and make changes in complicated products. Partials are not “real” Sass files in that Sass watch will not convert partials to CSS. They must be imported into a regular .scss file.

Can Sass only import files that start with underscores?

Sort of. Sass will ignore files that begin with underscores until you specifically import them. That is, Sass will not turn "_sample.scss" into "sample.css" for your site. You can only import files that begin with underscores.

To sum up, understanding Sass files and partials is important to learning Sass itself. Starting out, we recommend:

1. Renaming a regular CSS file (app.css to app.scss, for example)
2. Slowly adding Sass code to that file as you become familiar with the language
3. Organizing your files with partials (such as _elderberries.css) as your original Sass file becomes too complicated to comfortably manage

Can we write CSS in our Sass partials?

Absolutely. Sass files don't mind having plain CSS in them. In fact, the easiest way to get started with Sass is to take an existing CSS file, change its suffix to ".scss" and begin adding Sass rules. You can change, for example, "sample.css" to "_sample.scss" and gradually add Sass variables and functions to existing styles.

So we don't really write any Sass in app.scss — we just use that to import your partials?

Technically you can write everything in app.scss, but we always recommend separating the components into partials, then importing those partials into app.scss to keep everything organized from the start.

In fact, we start with partials right from the beginning of a project. There’s no need to stage Sass code in app.scss — except the for @import, of course.

If we're using Sass partials for your own code, would you recommend importing those before or after Foundation's @import settings?

Sass is sensitive to the order of selectors. That is, later commands in .scss files override earlier commands. Therefore you should always import your partials after Foundation to make the site your own. For example:

@import "foundation/components/block-grid",
"foundation/components/buttons",
"foundation/components/forms",
"foundation/components/grid",
"my-scss/my-typography",
"my-scss/my-branding",
"my-scss/my-buttons";


In this case, "my-scss/my-buttons" will override Foundation's buttons. Importing yours after Foundation means, "Modify what came before with my custom look and feel."

Can we tell SASS to import all the partials in a folder?

No, for the reasons in the previous question. There's no reliable way to control the order in which an entire folder loads, so you have to import each partial yourself.

However, as seen in the previous question, you can import a series of files in a single @import statement by separating each file with commas. Notice also that Sass doesn't require writing “.scss” or underscores per file name. It's smart enough to recognize what you mean.

Can we use @import to bring in .css files too?

Bad news: Sass can only import .scss or .sass files.

Good news: .scss is .css with different spelling. As mentioned in the first question, you can turn any CSS file into SCSS just by changing its file name. That is, changing "sample.css" into "_sample.scss" makes it importable without fuss — even if you never plan to add Sass code to it.

When you have all of your partials in a folder, do you just put the @import in your command line to compile all of the files into your single stylesheet?

The @import command is used in SCSS, not the command line. Compiling is done from the command line, but the commands differ depending on your setup. For example: 

• Sass: "sass watch"
• Compass: "compass watch"
• Grunt: simply run "grunt"

As mentioned above, imports go directly into .scss files like:

@import "sample";

---