This question already has answers here:
Import regular CSS file in SCSS file?
(15 answers)
Closed 7 years ago.
I can use Sass to compile multiple .SCSS or .SASS input files into a single .CSS output file using #import as described here.
If I use #import to include normal .CSS files, they are not merged. The output .CSS file still contains the #import directives. That makes sense.
But is there a way I can override this behavior, perhaps a command-line switch to the Sass compiler? In other words, can I tell Sass to attempt to forcibly merge #import "foo.css"; just as if it were a .SCSS file?
I'm using a third-party library (Google Closure Library) with many .CSS files. I'm only using a few of these in my project. I'd rather avoid manual solutions such as renaming all these files as .SCSS (although this seems to work) or copying and pasting their contents into my .SCSS file (also works). And I don't want to serve them all to be imported on the client-side. I'd really just like Sass to include the few .CSS files that I use 'as is' and produce a single output stylesheet. Possible? Are there any other tools I should look at?
every CSS file is a valid SCSS too.. so if you change the files you need "invisibly" imported or merged to _filename.scss then #import from the main scss file using #import "filename"; (extension optional) it should compile to one big CSS with no #import statements inside it
edited to add: sorry just saw your edit after a browser crash.. and see it's not what you're looking for, I don't know of another way
I haven't found a way to do this in Sass.
My workaround is to import third part libraries directly from their URLs. Of course this only works for CSS libraries that are served via URLs. It's still importing multiple files but at least I don't have to rename files and otherwise manage a modified copy of the vendor's CSS library.
Example:
// ORIGINAL: locally managed, modified copy (bad), no #import in output (good)
#import 'my_modified_copy/closure/goog/css/common.scss';
// WORKAROUND: vendor-managed (good): #import in output (bad but acceptable)
#import 'http://closure-library.googlecode.com/svn/trunk/closure/goog/css/tab.css';
Before release, I'll probably add a script to pull a current version from the vendor and rename all .css files as .scss files. But for now, the above workaround is acceptable for development.
This can be done server-side and save you a bit of hassle if that's an option. Since you're just merging the files together and since it's just CSS there shouldn't be any conflicts in the information that should harm your site. Also, this way gives you flexibility to make updates to the CSS as frameworks are improved.
Ruby is not my language of choice but still very viable to do everything needed here. There is a tool out there written in Ruby that will do this for you with CSS as well as JS files. Take a look at this blog post to get the rundown:
http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool
I hope that this is helpful, and please let me know if you need anything else on this one.
Related
In Wordpress, my main style.css file imports various sub-files, such as content.css, archive.css, product.css and so on:
#import url("content.css");
#import url("archive.css");
#import url("product.css");
Without success have I have been looking for a way - through browser console or online resource - to download "in a shot" a single CSS containing style.css plus all related #import files, without having to copy and paste all of them in a new file.
Do you know if there is a solution for this? Thank you.
You could use a CSS pre-processor such as LESS or Sass (SCSS), they come with many other features as well.
Depending on the editor you already use you might be able so simply install a package (like Easy LESS for Visual Studio Code), rename your style.css to style.less and be done.
Choosing and switching to a CSS pre-processor might however, depending on your circumstances, environment and experience, not be easy or straightforward at all.
I'd suggest just to copy paste them your css files into one. Using a tool for a simple task as this one can only result in bugs.
Forgive me if this is naive, but I am used to using just CSS. Sass seems pretty cool and I'm down to learn it, but for some reason many of the Javascript or jQuery plugins I'm downloading have both a CSS and SCSS file associated with the stylesheet. I don't want to have to be editing two files to get results on the page, why would both be there when they seem like copies except for a few key areas? See image below, seems like there is an extra CSS file per SCSS. Is that because some browsers cannot compile the SCSS?
CSS and SCSS in same directory
Is that because some browsers cannot compile the SCSS?
Yes. There is a command line utility which converts the .scss to .css. Probably the .map file is a reverse-conversion aid for browser inspectors that understand it.
Whenever I have generated files (like a .min.js, or in your case .css that came from a .scss), I make sure the appropriate command-line conversion tool is executed automatically as part of my build script.
I'm not sure what kind of build system you are using, but there is some command line tool for conversion that will need to be executed.
You are not expected to manually update both formats. SCSS to CSS command-line converters existed long before any browser (is there one yet?) started to support SCSS.
No browser (at least major) is able to directly use SASS (or LESS). You always need to compile scss files to css, before you could use them.
You can compile css by build tools like grunt or gulp. You can even configure it to watch updates in scss files and recompile css if anything was changed.
You could have following types of files after build:
style.scss <- this is source file
style.css <- this is css file created from SASS file
style.min.css <- this is css file minified
style.css.map <- this is source map of scss file
Here you can read why css files are minified. Here you can read what are source maps for.
in my current meteor app I have split the less declarations in one file per Controller (iron-router). I have a common file - where I have defined some mixins - which is imported in each less file. My problem is that the classes are imported multiple times in each route.
The file structure is:
mixins.import.less (new names, reference http://docs.meteor.com/#less)
.grid-container {
// something
}
postList.less
#import (once) url('/client/views/mixins.import.less');
postDetail.less
#import (once) url('/client/views/mixins.import.less');
Then in the Chrome inspector I found duplicated everything I have written in mixins.import.less. Is it possible to avoid this double import?
Assuming you want the mixin code at least once in your compiled css (perhaps not, some just want them as mixins, not classes in the css code), then make sure you set it to bring in the "mixins.import.less" file all by itself. Then for all your dependent files using it, do this:
"postList.less", "postDetail.less", etc.
#import (reference) url('/client/views/mixins.import.less');
The (reference) option has been available since LESS 1.5, and will only bring in the code for reference purposes to be used in the LESS file, but will not itself output any css.
Meteor bundles css and js/html resources all together as a single css and a single js file in production.
In development, they are individually served, but still at the same time, during initial page load (first ever request to server)
For less files, a css file is created for each (during development). Since you are importing, what Meteor basically does is create each corresponding css file that each contain the import individually.
And when they are served to the client all together (take a look at the head section of the generated html), you end up with that many copies of the imported style declarations.
Therefore, due to this bundling behaviour of Meteor, you can just keep one copy of your less mixins in a less file, and not import at all, since they are going to be served to the client in CSS form anyway.
Also, it is possible to trick Meteor into bypassing as described in the unofficial meteor faq:
... you can change the extension of the less files to be imported from .less to .lessimport and then change your #import file.less to #import file.lessimport. This will prevent the less compiler from automatically trying to compile all your import files independently, yet still let you use them ...
I am planning on dividing up my LESS CSS into multiple files to modularize my CSS and make it easier to manage and maintain. Ultimately I will be using #import to import all of my modular CSS files into one file that will get enqueued in WordPress.
Is #import a bad idea for performance?
Yes, using multiple imports will incurr equivalent number of file requests the browser has to make.
As long as you compile the LESS source into a CSS file and include that CSS file as the stylesheet for your site, performance will not be an issue.
For example when you make a Wordpress theme you can make a folder for your CSS and then compile it using for example simpLESS (if you are on Windows)
Sample template directory structure:
-themes/
-your-theme/
-less/
-main.less
-import.less
-etc.
-style.css <- this is the target file you would compile into
-index.php
-etc.
You can setup the target file to compile into easily. Also, simpLESS will keep the first top comment in the resulting file so that you can put your theme information in it.
I can't confirm that this syntax is best practice. I would like to reference an external Sass file and have it prepend it to my final CSS file, this way my Sass sheet looks more clean, and I'm only still only making one HTTP request.
For example, take the "normalize" code and put it into a .sass file, then in my sass sheets simply refer to it:
#import src/normalize
#import src/droidSans
rest of code here.....
It works fine so far, but I can't find anything concrete if I'm headed in the right direction. Also I am just making static templates for the time being... not using Rails at the moment.
I have been playing around with Sass for a few hours and I love it!!!
In order to prevent your partial from being converted into its own css file, prefix the filename with an underscore, _normalize.scss. Then you can import it the way you've indicated you're doing already:
#import "normalize";
Or import many files at once:
#import "normalize", "droidSans";
Or import from a relative directory:
#import "folder/file"
Note the use of double-quotes and semi-colon; I'm using the SCSS syntax which is a later development to the SASS word. While both styles are valid, you may find yourself preferring one over the other depending on what other languages you dabble in.
Further reading can be found under Directives/Partials in the documentation.