User Tools

Site Tools


sass

Sass

Required software

  • a recent version of Ruby
  • compass
  • css_parser

Install required gems

gem install compass
gem install css_parser

config.rb file

This file contains all the configuration

config.rb
if RUBY_VERSION =~ /1.9/
    Encoding.default_external = Encoding::UTF_8
    Encoding.default_internal = Encoding::UTF_8
end
relative_assets = true
 
##################################
# ENVIROMENT INDEPENDANT SETTINGS!
##################################
 
# WHERE COMPILED FILES WILL BE COPIED TO
css_dir = "../css" 
# USE ALL *.scss FILES IN THIS FOLDER
sass_dir = "." 
 
# IMAGE SOURCE DIR
images_path = "./" 
 
# IMAGE TARGET DIR
images_dir = "../images" 
 
#############################################################
# Settings to override when enviroment param is given
# Invoke from command line: compass watch -e YOUR_ENV --force
#############################################################
 
# To be used for Development - feel free to modify as needed
if environment == :development 
  output_style = :expanded
  sass_options = {:debug_info => true}
end
 
# To be used for Production
if environment == :production 
  output_style = :compressed
  sass_options = {:debug_info => false}
end

Main Scss File

main.scss
@charset "UTF-8";
 
// Include libraries
@import "compass";
 
// Include modules - *.scss-Files
@import "Chapter";
 
// IMPORT SPRITE UTILITY
@import "compass/utilities/sprites";
 
// PATH RELATIVE TO config.rb:images_path
// IMPORTS ALL IMAGES FROM FOLDER AND GENERATES A SPRITE INCL. CSS. THIS DOES NOT INCLUDE SUBFOLDERS
@import "images/*.png";
// GENERATE IMAGE SIZES AND INCLUDE IMAGES
$images-sprite-dimensions: true;
@include all-images-sprites;

Using sass

If you have created a folder containing config.rb and main.scss you are ready. Make sure you have created the css target folder and you have included all needed scss file by using: @import “YourFileName”;

Create css files automatically when changed

compass watch

Manually trigger compilation

compass compile

Force compilation of specific enviroment

compass compile -e production --force
sass.txt · Last modified: 2014/11/23 21:43 by admin