Using Sass and Compass is really easy. Just follow these steps to get started.

  1. Create your subtheme
  2. Create a file in the root of your subtheme called config.rb
  3. Insert this into your config.rb file:
    relative_assets = true
    css_dir = "css"
    sass_dir = "sass"
    javascripts_dir = "js"
    fonts_dir = "fonts"
    output_style = :nested
    environment = :development
    Use :expanded instead of :nested for respecting Drupal's coding standards (nested is more readable when working).
    Use :production instead of :development to compile for release.
    This will create the proper structure for compass to mirror your subtheme structure.
    Read more about this on Compass Reference - Configuration
  4. Open up your terminal or command prompt and type "compass init"
    This command creates the sass folder and any other folders you may need.
  5. Now type "compass watch"
    Now compass is watching for any sass files you create and will automatically make or change your css files.
    You can also use the command "compass watch output_style = :compressed" to output a minimised stylesheet.

Sass is great in that you can create variables, mixins and import other stylesheets (like a php include) to give some separation to your style types.

Check out both compass and sass. I thing you might like it. Level Up Tuts has some great tutorials on YouTube.

Real config.rb example of a theme using Bootstrap library.

#
# This file is only needed for Compass/Sass integration. If you are not using
# Compass, you may safely ignore or delete this file.
#


# Change this to :production when ready to deploy the CSS to the live server.
environment = :development


# Location of the theme's resources.
css_dir = "css"
fonts_dir = "css/fonts"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"


# Require any additional compass plugins installed on your system.
# Run 'compass install bootstrap' on this theme to fetch the latest bootstrap files inside /scss and /js folders
require 'compass'
require 'bootstrap-sass'

#require 'breakpoint'
#require 'singularitygs'
#require 'sass-globbing'

# Disable cache busting on image assets.
asset_cache_buster :none

#
# You probably don't need to edit anything below this.
#

# You can select your preferred output style here (can be overridden via the
# command line):
output_style = (environment == :development) ? :expanded : :compressed

# To enable relative paths to assets via compass helper functions. Since Drupal
# themes can be installed in multiple locations, we don't need to worry about
# the absolute path to the theme from the server root.
relative_assets = true

# Show debugging comments during development.
line_comments = (environment == :development) ? true : false

# Show debug information / partial location for FireSass and similar tools.
# Uncomment to enable.
#debug = (environment == :development) ? true : false

# Output debugging info in development mode.
sass_options = (environment == :development && debug == true) ? {:debug_info => true} : {}

# Increased decimal precision.
# 33.33333% instead of 33.333%
Sass::Script::Number.precision = 5

Comments

bdupls’s picture

When you run compass init in the terminal, it will create a config.rb file. Rather run that first, then make any edits you need to.

JCL324’s picture

The link in #3 is dead.

JCL