How to force SASS to merge external css files?
//these two files will not merged
#import "js/font-awesome/css/font-awesome.css";
#import "js/selectize/css/selectize.css";
//thess two files will be merged
#import "js/font-awesome/css/x.scss";
#import "js/selectize/css/y.scss";
I do not want to rename foo.css to foo.sass.
Without renaming or adding the partial "_" underscore in front of the filename it is not possible to do as you wish - as far as I know.
I came across this post: How to merge .CSS files with Sass (or other tool)?
Hope this helps you.
Related
Global CSS variables
I have multiple CSS files in my project
I don't want to set the variables in each CSS file, but I would like to access them from every file.
You can import another CSS file from a CSS using:
#import "path/variables.css";
MSDN Documentation
You just need to create a globals.css file in there somewhere. Add your CSS Variables. #import that file into the others where needed.
I've started working on a project that has bunch of css files eg. 15-20 css files which is not the right approach i wanted to use Sass framework but these bunch of css files have confused me. I want to make sure i dont break anything before start writing sass for these css file so wanted to know What's the best strategy i should adapt to integrate sass framework in a project considering we already have bunch of css files??
Valid css is valid sass so to start you could just change the extension to .scss and compile them along with your new sass files. So if you were generating just one main.css for example:
//main.scss
#import "existing-file-one";
#import "existing-file-two";
#import "existing-file-three";
#import "new-file";
This would then add all your existing styles.
I've a project with less and CSS files mixed (vendor stuff). I want to optimize all files either CSS or less to one merged CSS file. Usually I've one less file which imports all needed files. But it doesn't work with imported CSS files. It just export the "import "foo.css"" to the merged CSS file.
How can I do that?
Use #import (inline) directive.
You can read more about it here.
I suggest to treat .css files imported like they would be .less with the following syntax:
#import (less) "foo.css";
This results in a final compiled .css file that include rows from original .css imported one, followed by processed LESS rows.
Although I know CSS file is a valid SCSS
but there is some reason ，so I can't change some files subfix to SCSS
global_min.scss
#import url("global/reset.css")
#import url("global/frameset.css");
#import url("global/header.css");
....
....
Can sass or compass merge it (´･_･`)
You can try the Sass CSS importer plugin, by Chris Eppstein himself :)
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#import
#import takes a filename to import. By default, it looks for a Sass
file to import directly, but there are a few circumstances under which
it will compile to a CSS #import rule:
If the file’s extension is .css.
If the filename begins with http://.
If the filename is a url().
If the #import has any media queries.
If none of the above conditions are met and the extension is .scss or
.sass, then the named Sass or SCSS file will be imported.
You can't do that with SASS without renaming the CSS files.
I suggest that you use some kind of CSS compressor to concatenate and minify your CSS code. Please have a look at Yeoman, currently the most solid approach to handling this kind of tasks.
If you want to merge all css files into a single compiled css file, you need to change their extension to sass or scss and make the changes to be compatible with that format.
I'm looking for ways to optimize my WordPress instance. The theme has about 8-10 CSS files that are rendered in the functions.php. Consequently, I do not want to change any file names because that would mean that I have to hack the theme and I want to keep that to a bare minimum.
I want to use SCSS to combine these CSS files into one CSS file and include the new file in the theme instead. When I try...
#import "style.css";
#import "reset.css";
#import "shortcodes-styles.css";
It renders as
#import url(style.css);
#import url(reset.css);
#import url(shortcodes-styles.css);
How can I get SCSS to import the CSS as partials without changing the file names? I'm also using CodeKit if that makes a difference.
Not possible. Sass only compiles Sass files: https://github.com/nex3/sass/issues/556