csswebpacksasscompass-sass

Replace or remove compass with bourbon


I recently bought a template that uses sass with compass. I have been reading and mostly every blog says compass is deprecated. I am looking for a ways to replace or remove compass and use bourbon.

I have not been able to compile the sass with compass, everytime I run npm run dev it says there is a variable missing.

Is there any easy way to remove all the mixim call from compass and replace them with bourbon or any way to remove compass overall?

What I am doing right now is looking for any call to the mixins, and replacing them with pure sass or css. I feel like this might take a long time. The folder structure is the following:

scss
├── style.scss
├── compass
│   ├── css3
│   │   ├── _animation.scss
│   │   ├── _appearance.scss
│   │   ├── _background-clip.scss
│   │   ├── _border-radius.scss
│   │   ├── etc
│   ├── helper
│   │   ├── _header.scss
│   │   ├── _mixin.scss
│   │   ├── _responsive.scss
│   │   ├── etc

Solution

  • Take a look at your config.rb file, where your compass settings are stored, see if there are any links to files that you are currently using.

    What you want to do next is remove compass completely by uninstalling it via ruby or deleting it manually.

    gem uninstall compass in the console. Or, find the dir remove it, and then trace all of your used mixins so that you can remove them too (this is going to be a bit messy).

    Bourbon does not support all of the functionality presented in Compass, but it sure is the most adequate mixin library to date.

    Next, learn to use npm. This is the piece of software that will save you a lot of time and hassle.

    npm install bourbon --save in the console, and that's it. You simply import it in your SCSS after.

    Next, learn to use Gulp, so that you don't lose more time while developing.