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.
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