Reputation: 4045
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
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
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
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