How to Merge .CSS Files with SASS (Or Other Tool)

How to merge .CSS files with Sass (or other tool)?

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.

Can compass merge .css files?

I'd wanted to do this same thing for quite some time. I finally settled on the following solution.

Take the following structure (i.e. with your modules in a sub-folder of sass)

• project
  
  
  • sass
    
    • modules
      
      • header.scss
      • blog-posts.scss
      • footer.scss
      • something-else.scss
    • main.scss
  • stylesheets

Update main.scss to contain:

@import 'modules/header.scss';
@import 'modules/blog-posts.scss';
@import 'modules/footer.scss';
@import 'modules/something-else.scss';

Run the following command (from the project folder) in order to build

compass compile . sass/main.scss -s compressed

This just compiles main.scss, which inturn goes and imports each of your modules. Additionally the compressed style option minifies the output.

Import regular CSS file in SCSS file?

Looks like this is unimplemented, as of the time of this writing:

https://github.com/sass/sass/issues/193

For libsass (C/C++ implementation), import works for *.css the same way as for *.scss files - just omit the extension:

@import "path/to/file";

This will import path/to/file.css.

See this answer for further details.

See this answer for Ruby implementation (sass gem)

How to merge and clean 2 css files with overlapping selectors/properties?

There is This and This list of other helpful tools

Should I combine my SASS output (multiple files) into a single file? If so, how?

Look into files called "Partials". You would name your files like this

_buttons.scss
_lists.scss

Then create a main.scss file(name it whatever you want). enter

@import buttons
@import lists

Then convert your main.scss file to css. You will have one css file. You can read up on this at the SASS website

http://sass-lang.com/guide

If you use SMACSS or other methods, in each directory you would do this. For instance a layout directory

Layout
_buttons.scss
_list.scss
_layout-dir.scss

In the layout-dir file you would import all the files in the layout directory
then in your main.scss file you would only import each directory file

@import layout/layout-dir
@import basics/base-dir

etc

Your variable and mixins files would also import into the main.scss file, include them first so everything has access to them

https://www.youtube.com/watch?v=GI1BhlDtoUs

How to handle scss and css in git?

The .css file is generated from the .scss files.
Your developers should commit only in the .scss files.
In the most cases the .css file is not added to the repository at all. And you should not modify the .css file directly because it will be replaced with the next compilation of .scss the files.

GULP is just the tool that compiles the .scss files and create the css from them. Basically when using GULP you can create some functions where you can specify the input location(.scss), output location(.css) and additional rules, etc.

There are also other tools that can do this. Like Koala, Webpack.

Concatenate/Merge css files in order

Simply use the -I option of ls to exclude normalize.css from being listed:

cd css/ && cat normalize.css `ls -I normalize.css -I main.min.css` | cleancss -o main.min.css

---

Related Topics