Include all scss files in a folder

Question

Im developing a project using Sencha Touch (not sure if this is an important fact) and I want to include in the CSS file generated with compass all the SCSS files in a folder.

So given this project structure:

index.html
resources
    css
        app.css (generated file)
    sass
        app.scss
        config.rb (sass config file)
ux
    ExamplePlugin1
        style.scss
    ExamplePlugin2
        style.scss

That I want is to include all the scss files into the 'ux' folder into the final app.css file.

To generate app.css, compass reads the config.rb file in the sass folder. I modified that file to achieve this, but that didnt work. This is the content of the config.rb file:

# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)

# Load the sencha-touch framework automatically.
load File.join(dir, '..', '..', 'resources', 'themes')

# MODIFIED LINE TO INCLUDE THE UX FOLDER
load File.join(dir, '..', '..', 'ux')

# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")

# Require any additional compass plugins here.
images_dir = File.join(dir, "..", "images")
output_style = :compressed
environment = :production

Another possible solution is to include all the individual files into the app.scss, but that didnt work also. I added this line to app.scss:

@import 'ux/ExamplePlugin1';

But this gives me and error when compass try to compile it :(

I hope that this explanation is enough to solve the problem. If someone needs more information, just ask! :P

Thanks!

Answer 1

There's already a solution for your issue, no need to reinvent the wheel:

Compass and sass: possible to auto-import all partials?