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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With