George Welder
George Welder

Reputation: 4045

Should I combine my SASS output (multiple files) into a single file? If so, how?

I used to have one scss file, and turn it into one css file and use that in my html. I now want to reorganise my stuff, and use multiple scss files, split into a main.scss, buttons.scss etc.

However, if I am correct, the output will then also be in multiple .css files, i.e. I cannot tell SASS to combine them all into one file.

How would I best include these multiple files into my html? Is there a way to combine all of them again and have a single .css file, or should I rather load them as separate files in my different pages, as needed?

If it is better to use a single file in the end, which I suppose it is, can I tell SASS to combine my .scss files into a single .css file, or would I use a different tool for that?

Upvotes: 5

Views: 9150

Answers (2)

Brad
Brad

Reputation: 1691

Look into files called "Partials". You would name your files like this

_buttons.scss
_lists.scss

Then create a main.scss file(name it whatever you want). enter

@import buttons
@import lists

Then convert your main.scss file to css. You will have one css file. You can read up on this at the SASS website

http://sass-lang.com/guide

If you use SMACSS or other methods, in each directory you would do this. For instance a layout directory

Layout
_buttons.scss
_list.scss
_layout-dir.scss

In the layout-dir file you would import all the files in the layout directory then in your main.scss file you would only import each directory file

@import layout/layout-dir
@import basics/base-dir

etc

Your variable and mixins files would also import into the main.scss file, include them first so everything has access to them

https://www.youtube.com/watch?v=GI1BhlDtoUs

Upvotes: 8

Quentin
Quentin

Reputation: 943108

From the docs:

Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}
// base.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Upvotes: 0

Related Questions