dpcasady / compass-sass Goto Github PK

View Code? Open in Web Editor NEW

This project forked from altosz/grass

23.0 1.0 8.0 15.69 MB

Compass grails plugin - updated to work with the latest versions of Compass, SASS, and JRuby

License: Apache License 2.0

Groovy 98.52% Ruby 0.17% CSS 1.31%

compass-sass's Introduction

Compass Sass plugin

Compass, SASS and SCSS support for Grails

This plugin is no longer under active development as the Asset Pipeline Plugin is now preferred over the Resources Plugin. SASS/SCSS support is available via the SASS/SCSS Asset Pipeline Plugin.

Installation

Add the plugin to the plugins block of your BuildConfig.groovy:

compile ":compass-sass:0.7"

Prerequisites

To use this plugin, you will need to have JRuby installed and on your shell's PATH environment variable. During installation, the plugin will check for the existence of Compass—if the gem isn't found, it will install it. If you have RVM installed, the gem path might be incorrect unless RVM is set to use the "default" Ruby installation. If you're having issues, try to manually install Compass into RVM, and restart your terminal to make sure JRuby picks up the PATH change.

$ rvm use --default (version)
$ gem install compass

Usage

This plugin has two modes of operation for the automatic compilation of SASS/SCSS files. It can be configured by setting the do_on_start property to one of the following:

watch - During grails run-app, Compass is invoked via jRuby to watch the configured source directory (default src/stylesheets) for changes to SASS/SCSS files, which will then compile and run on the fly.
resources - Integration with the Resources Plugin by including something like the following in your ApplicationResources file, or wherever you are defining your resources. Resources will watch your SASS/SCSS files for changes and they'll be compiled for you.

mymodule {
    resource url: '/sass/test.scss', attrs: [type: 'css'], disposition: 'head'
}

Note: attrs: [type: 'css'] is required for the resources plugin to pick-up the files. Files must end in .sass or .scss to get picked up by the SASS resource mapper.

The main differnce between the two options are whether or not you want to have the generated css files available or not. Compass watch will compile them into the css_dir specified, the resources plugin will not—it compiles them behind the scenes. You can also set do_on_start to compile, which will only compile SASS/SCSS on the initial grails run-app.

The following grails commands are also available:

grails compile-css - Compiles any SASS/SCSS files in src/stylesheets to web-app/css, both locations configurable in GrassConfig.groovy.
grails install-blueprint - Installs blueprint from from the Compass gem.
grails update-compass - Updates Compass and any of its dependent gems.

Configuration

GrassConfig.groovy

grass {
    css_dir = "./web-app/css"
    sass_dir = "./src/stylesheets"
    images_dir = "./web-app/images"
    output_style = "compact"
    relative_assets = true
    line_comments = true
    preferred_syntax = "scss"
    do_on_start = "watch"
}

css_dir: output directory for compiled CSS
sass_dir: directory Compass uses for compile-css and real-time recompilation
images_dir: (Optional) location for images referenced in CSS
output_style: output format of the CSS Values: nested, expanded, compact, compressed
relative_assets: whether or not Compass will generate relative URLs Values: true, false
line_comments: whether or not Compass will generate debugging comments that display the original location of your selectors Values: true, false
preferred_syntax: the output of install-blueprint Values: sass, scss
do_on_start: what Compass should do on run-app (watch, compile, or resources)

GrassConfig.groovy is an environment-aware config file, so you can customize the behavior by adding an environments block. The following would keep CSS files compressed except in your development environment:

grass {
    css_dir = "./web-app/css"
    sass_dir = "./src/stylesheets"
    images_dir = "./web-app/images"
    output_style = "compressed"
    relative_assets = true
    line_comments = false
    preferred_syntax = "scss"
    do_on_start = "watch"
}

environments {
    development {
        grass {
            output_style = "compact"
            line_comments = true
        }
    }
}

What if my team members/I don't have JRuby installed?

If JRuby is not installed, you will receive a warning during run-app, and SASS/SCSS files will not be compiled. As long as you check in compiled CSS, this isn't an issue for multiple-developer teams. If you want to use the resources plugin, everyone will need JRuby installed.

License

Licensed under the Apache License, Version 2.0. See http://www.apache.org/licenses/LICENSE-2.0

compass-sass's People

Contributors

Stargazers

Watchers

Forkers

jolros jdpgrailsdev liftstack-build spn k2s snowindy burtbeckwith tjocksmurf

compass-sass's Issues

jruby: No such file or directory -- compass (LoadError)

We're using the latest version, just installed into a new Grails app.

$ jruby -v                                                                                                 [9:17:56]
jruby 1.6.2 (ruby-1.8.7-p330) (2011-05-23 e2ea975) (Java HotSpot(TM) 64-Bit Server VM 1.6.0_26) [darwin-x86_64-java]

App itself runs fine but every time I launch it I see:

$ grails install-blueprint
Welcome to Grails 1.3.7 - http://grails.org/
Licensed under Apache Standard License 2.0
Grails home is set to: /Users/xxx/grails

Base Directory: /local/svn/app/grails-soa/trunk
Resolving dependencies...
Dependencies resolved in 1799ms.
Running script /Users/xxx/.grails/1.3.7/projects/trunk/plugins/compass-sass-0.4.3/scripts/InstallBlueprint.groovy
Environment set to development
Executing: jruby -S compass create --using blueprint --sass-dir ./src/stylesheets --css-dir ./web-app/css --javascripts-dir js --images-dir ./web-app/images
jruby: No such file or directory -- compass (LoadError)

Blueprint has been installed!

I had Compass installed already on my MacBook Pro (Snow Leopard) using rvm but I blew rvm away and manually had jruby install compass:

$ jruby -S gem install compass --pre
Fetching: sass-3.1.10.gem (100%)
Fetching: chunky_png-1.2.5.gem (100%)
Fetching: fssm-0.2.7.gem (100%)
Fetching: compass-0.12.alpha.0.gem (100%)
Successfully installed sass-3.1.10
Successfully installed chunky_png-1.2.5
Successfully installed fssm-0.2.7
Successfully installed compass-0.12.alpha.0
4 gems installed

But no change in result, still get the error

compass-sass 0.6 , grails 2.0 on mac doesn't seem to work

i get the following error:

Error loading event script from file [/Users/quorak/.grails/2.0.0/projects/beeWorkflow/plugins/compass-sass-0.6/scripts/_Events.groovy] /Users/quorak/.grails/2.0.0/projects/beeWorkflow/plugins/compass-sass-0.6**/src/groovy/com/stefankendall**/CompassInvoker.groovy (/Users/quorak/.grails/2.0.0/projects/beeWorkflow/plugins/compass-sass-0.6**/src/groovy/com/stefankendall/**CompassInvoker.groovy) (Use --stacktrace to see the full trace)

Update resources-plugin to 1.1.6

Currenty (at least in my case) grails asks me upon dependency renewal if I want to upgrade to 1.1.5 (although I have 1.1.6 installed) and afterwards asks me to upgrade to 1.1.6 again.. Kind of strange.

Slow

Testing with a project and it's really slow, like 30 sec per file. Running windows jdk 1.7, grails 2.3.0 and latest version of your plugin.

relative_assets cannot be changed

The config file specifies the ability to toggle "relative_assets", but due to a bug in compile(), this isn't working.

I have a patch and am sending you a pull request.

import sass/ scss located in plugins

Thanks for your plugin, it's awesome. But there is an issue when we build a multiple module project using grails plugin system.
First of all, we created a plugin which only contains the base sass files which can be imported by other plugins/ main app.
The plugin does not contain the GrassConfig.groovy. But when packing it, it will always generate one and cause compilation error on the main app caused by the duplicated GrassConfig.groovy in the plugins and the main app.
Another issue is about importing the sass/ scss located in plugin between different plugins and the main app. Currently, it will show "File to import not found or unreadable" when importing such files. Any workaround to solve this issues? Thanks.

Differentiate between using plugin with explicit compilation of SASS/SCSS files and resources plugin integration

Hi,
in my opinion, the plugin has two modes of operation:

Compilation of SASS/SCSS files located in the folder grass.sass_dir, either continuously when run-app is invoked (using compass watch) or on demand when compile-css is invoked (using compass compile).
Integration into the resource framework, using a SASS/SCSS resource mapper (SassResourceMapper.groovy) and referencing SASS/SCSS files in the application resource definitions, with attrs: [type: 'css'] set.

Is this correct?

I think, these two modes are used mutual exclusive. E.g., I decided to use the second mode and thus, I do not require compass watch to be run upon run-app.
Can you introduce a flag to switch between the two modes of operation in GrassConfig.groovy, or a flag to disable compass watching the grass.sass_dir?

Thanks!

Florian

resources 1.1.1 compatibility

the plugin requires resources 1.0.2 and refuses to run with the latest resources 1.1.1 plugin.

scss not compiling correctly

I have this plugin setup with the defaults and compiling, but once my css gets a certain length it starts cutting things off.

This....

header {
    background-color:green;

    h1 {
        color:white;
        font-weight:bold;
        text-transform:uppercase;
        padding:10px 0;
    }

}

#main{
    padding-top:30px;
    min-height:300px;
    background-color:#eeeeee;
}

body.welcome {
    div.post {
        border: 1px dashed black;
        background-color: #eeeeee;
        margin-bottom:10px;
        padding:20px;
    }

}

turns into this....

header {
  background-color: green;
}
header h1 {
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  padding: 10px 0;
}

#main {
  padding-top: 30px;
  min-height: 300px;
  background-color: #eeeeee;
}

body.welcome div.post {
  border: 1px dashed black;
  background-color: #eeeeee;
  margin-bottom: 10px;

notice the padding isn't there and the bottom bracket is missing. If I switch everything around in terms of order, it doesn't matter.. it just cuts off the last few lines. Even if I change the styles to something completely mundane.

Any ideas on how I can even see if an error is happening?