Search code examples
cssterminalsasscompass-sass

Implement Compass into an existing Sass project


I've been looking at implementing Compass into an existing Sass project. However, I'm struggling to find out if it's even possible.

I've been reading through the docs know you can use --sass-dir and --css-dir to define the folder names that it looks for but I can't seem to prevent Compass from creating it's own project structure within my own. Do I need to create a custom config file?

Here is the structure:

js
|_//js here

img
|_//images here

css
-main.css //combined from main.scss
-main.min.scss //combined and minified from main.scss
|_sass
  |_base
    -//scss files in this folder
  |_components
    -//scss files in this folder
  |_layouts
    -//scss files in this folder
  |_utilities
    -//scss files in this folder
  -main.scss // where the imports are

Hope this makes sense and any advice would be greatly appreciated on whether this is possible.


Solution

  • Yes you need to make a custom config.rb and place it in the root directory of your site. It will look something like this.

    # Require any additional compass plugins here.
    require "susy"
    require "sass-globbing"
    require "breakpoint"
    
    #Folder settings
    project_type = :stand_alone
    http_path = "/"
    relative_assets = true      #because we're not working from the root
    css_dir = "css"          #where the CSS will saved
    sass_dir = "scss"           #where our .scss files are
    images_dir = "img"    #the folder with your images
    javascripts_dir = "js"
    
    # You can select your preferred output style here (can be overridden via the command line):
    output_style = :expanded # After dev :compressed
    
    # To disable debugging comments that display the original location of your selectors. Uncomment:
    line_comments = false
    
    # Obviously
    preferred_syntax = :scss
    
    # Sourcemaps for Chrome DevTools
    
    sass_options = {:sourcemap => true}
    # sass_options = {:debug_info => true}
    sourcemap = true
    

    Please note I use a few things like susy and breakpoint so if you dont use those remove the requires from the top of the config.rb file.

    Since the config.rb file is in your root directory then your css, scss, js folders are all relative directories.

    Once you have created and saved this just go to your terminal navigate to your sites directory and run compass watch.

    Please note you will have to take your CSS files you already have and place them in the scss folder. Otherwise compass will just overwrite your CSS and you will also have to rename them to .scss I would save backups first so you dont lose anything