Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Use multiple SASS files

I want to separate my (giant) global css file into multiple files. I'm using sass. Is there an easy way to get sass to watch multiple files? I think I could use @import, but just wanted to know if there was another (better) way.

Thanks in advance.

like image 341
Chris Avatar asked Apr 06 '11 18:04

Chris


People also ask

How do I import a SCSS file into another SCSS file?

sass or . scss file. You can also import CSS files. The @import directive imports the file and any variables or mixins defined in the imported file can then be used in the main file.

Which directive is used to convert multiple Sass into single or multiple CSS files?

The SASS @extend directive is used to share a set of CSS properties from one selector to another. It is a very important and useful feature of Sass. It allows classes to share a set of properties with one another. It makes your code less and facilitates you to rewrite it repeatedly.

Can you use CSS and Sass together?

Also, if you use Sass, your CSS code will be compatible with all versions of browsers. Sass also makes it possible to reuse your code by creating variables and functions with mixins (cutting up pieces of code) that can be reused over and over again. This helps you save time and allows you to code faster.


1 Answers

What Rich Bradshaw mentions is correct, however here is another approach that you could take.

Create 1 scss file called combined.scss (for example) then inside of this file @import all your scss files, then simply run sass --style compressed --watch combined.scss:combined.css and it will detect changes to the imported scss files and recompile as needed.

Combined.scss example:

@import "reset";
@import "layout";
@import "styles";
@import "ie";

So when you make a change to the layout.scss file combined.scss will recompile and all your actual html pages will need to reference is combined.css.

But like I said, Rich Bradshaw's solution will work just as well and depending on the project you're working on might be better to use.

like image 159
Jannis Avatar answered Sep 22 '22 21:09

Jannis