I have an issue with sass compilation.
When I have a project with a partial _partial.scss and have it imported in multiple partial files (because it contains color variables) it will end up in the compiled css multiple times!
This is ugly because the same rule will 'overrule' itself multiple times which makes debugging info (chromium dev tools / firebug) rather unreadable.
I presume there is a solution for all this. I just can't find anything on the issue, anywhere.
The solution is to either not include the same file multiple times or don't have any code that directly outputs CSS in the file you're planning on including more than once. If your variables were in a file by themselves, they could be safely included anywhere you'd like without selector duplication.
Maybe this #mixin helps you: https://github.com/wilsonpage/sass-import-once.
Have a look at the example and note how the reset is only included once in the final CSS.
It seems that just for this, sass (and thus, scss) now have #use instead of #import. From the #use documentation (emphasis is mine):
The simplest #use rule is written #use "", which loads the module at the given URL. Any styles loaded this way will be included exactly once in the compiled CSS output, no matter how many times those styles are loaded.
Sass also discourages further use of #import:
The Sass team discourages the continued use of the #import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the #use rule instead.
Any projects having this problem could try running the module migrator tool and check if the problem is resolved.
Related
How can I connect these 2 partial folders (variables and base) with my main.scss?
Don't refer me to any video or such, I have watched and tried for the past 3-4 days, nothing working!
Greatly appreciate your help fixing this if you're knowledgeable with sass since I'm not!
That's what the #use rule is for! Adding #use "abstracts/variables"; and #use "base/base"; to your main.scss adds their CSS to yours, and makes their variables, functions, and mixins available with variables. and base. prefixes. You can add as * to the rule (e.g. #use "base/base" as *;) to make them available without prefixes.
This assumes your Sass tool is based on Dart Sass, which most are nowadays. Old tools might be using LibSass, which only supports #import; I recommend using only Dart Sass-based tools whenever possible.
I have multiple SCSS files that I want to import into one main SCSS file. I want ALL of the contents of that file to be imported, basically copying the entire document into the other one. Currently, I am using #import, which is exactly what I need. But now it has been announced that it will be removed from SCSS, and I'm afraid that #use cannot replicate this functionality that I need. With #use, I can only import selected variables, classes etc., but I want the entire file.
Two possible solutions (that I don't want to go for):
A) Writing everything in the same file. But that would become quite messy. I have one template SCSS file with variables and utility classes (a lot of them), and 3 other files for custom code (so the CSS of a site can be changed by multiple people at the same time, having only one file would limit it to one person at a time)
B) Loading multiple stylesheets on the site. That would be the better option, but that would cause a lot of unnecessary requests on the server.
Any ideas? I'm using SCSS in Wordpress. Will the #import rule be unusable once it's been removed from the language? What if I didn't update the Plugin that compiles the SCSS? It's frustrating because the current #import rule does exactly what I need...
Thank you!
The question is more or less resolved. I was trying to migrate from #import to #use in an environment that does not support the #use rule at all. As I said, I'm using a Wordpress plugin to compile. #use is only available in Dart Sass and upon using it in my setup, the compiler would throw errors, as it is based on phpsass, which does not have #use or #forward and still uses #import. Which make everything a lot easier!
So, I've done making all of my partials at there own folder(like base,abstracts etc) and every folder have there _index.scss where I already #forward all the partials there. Then at the main.scss file, the only thing I needed to do is #use all of my folders' index. But, instead of showing all the results at the css file, it just copies the #use comment from the main sass file, and return with the 'Unknown at rule #use', this makes sense because #use only works for sass not css. But why does the css doesnt translate the #use function from the main sass file, instead it just spit out the exact code block which is " #use 'abstracts' "(for example). Do I need to set-up something besides the sass compiler itself? Like some javascript? Because I dont really have any decent knowledge at Javascript. I hope you can answer my questions, Thank You!!
This is the screenshot, the right side is the css, which suppose to load the sass files,but instead just output the same command which is the #use
I'm moving from Grunt to Gulp and noticed that gulp-sass does not include the contents of files referenced by #import "reset.css" statements. Instead, it normalizes the url reference, as #import url(reset.css). My intention is to have a single CSS reference on my index.html, that would be the concatenation of my CSS dependencies.
It's a simple read-file-and-output-contents operation, but I bet this is already implemented and I just don't know where to find it -- I'm still new on this ecosystem and would not like to spend time reinventing the wheel.
EDIT: the selected answer for this related question uses gulp-minify-css, instead of gulp-sass. Exchanging them could be a short-term solution, but I'd prefer to avoid my new build system to rely on unstable plugins. Moreover, I actually have plans to use scss, so I'd be back to having to deal with gulp-sass again. Thanks for the suggestion, though.
#import should actually include the contents of the file, not make a reference to it. Sounds like maybe the transpiling of the SCSS to CSS isn't working properly.
Is there a CSS minifier tool that can resolve #import statements?
I'd like to be able to load multiple CSS files on my local machine but have them all resolved into one file when the website gets pushed out into production.
I recently started using LESS, beyond imports allows you to use:
Variables
Mixins
Parametric Mixins
Nested rules
Operations
Color functions
Namespaces
Scope
Comments
Escaping
So far I'm glad with my experience using LESS.
It's easy to use and the page is documented with good examples.
You can use SASS, with the SCSS syntax. SASS is much more than a minifier: it is actually a CSS preprocessor which adds some goodies like variables or macros to the CSS syntax. But you can choose to simply ignore these features (although I advise you to have a look): any valid CSS file is actually valid SCSS.
SASS can then compile your SCSS in valid CSS, and it can manage multiple files and output a single minified .css file.
You can try it just as a minification tool for now, and start using the advanced features when you feel like experimenting.
css-compressor (based on yuicompressor) inlines #import statements - in fact that is its primary purpose:
https://github.com/samilyak/css-compressor
Granule library supports #import in CSS.
You can look it here http://code.google.com/p/granule/