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.

回答1:

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

回答2:

The Compass documentation is quite clear on what you need to do here. Their install instructions have a JS enabled form that will generate the exact command you will need to run to generate a config.rb for an existing project with your desired directory structure. The command you want to run looks something like this:

compass create --bare --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "img"

It needs to be run from within your project's directory and all paths will be relative from the location of the config.rb. Leaving off the additional flags (eg. --sass-dir, etc.) will tell Compass to use the default directory names. You are free to modify the config.rb at any time if your directory structure changes.

Note that running this command is not necessary. You're free to write your own config.rb by hand or copy one from an existing project.

How to remove/delete scss/compass project?
Compass config.rb Location

来源：https://stackoverflow.com/questions/25450082/implement-compass-into-an-existing-sass-project

标签

css

terminal

Sass

compass-sass