Contents IMPORTANT PREFACE * .......................................................................................................................2

Transferring SASS to CSS..................................................................................................................2

Setting up SASS (One Time Setup) ................................................................................................2

Editing SASS/CSS (Every Time) ......................................................................................................3

FINDING FILES TO EDIT *......................................................................................................................4

WHAT IS A PARTIAL? * .........................................................................................................................4

SASS COMMENTS ...............................................................................................................................4

MIXINS...............................................................................................................................................5

INCLUDES...........................................................................................................................................5

VARIABLES .........................................................................................................................................5

SPRITES ..............................................................................................................................................5

CSS PIE ...............................................................................................................................................6

SASS Tips Important Sections to read noted with asterisk (*)

IMPORTANT PREFACE * On websites using SASS, do not under any circumstances edit the .css files. Add all new css to the

existing SASS files.

Transferring SASS to CSS

Setting up SASS (One Time Setup) 1. Step 1 http://rubyonrails.org/ (Install ruby and sass inside my bit9prog folder but you will also

need a “project” for sass) a. Add config.rb to project with appropriate data

b. # Require any additional compass plugins here. # Set this to the root of your project when deployed: http_path = "/" css_dir = "stylesheets" sass_dir = "sass" images_dir = "stylesheets/images" javascripts_dir = "javascripts" # You can select your preferred output style here (can be overridden via the command line): # output_style = :expanded or :nested or :compact or :compressed output_style = :expanded # To enable relative paths to assets via compass helper functions. Uncomment: relative_assets = true # To disable debugging comments that display the original location of your selectors. Uncomment: # line_comments = false # If you prefer the indented syntax, you might want to regenerate this # project again passing --syntax sass, or you can uncomment this: # preferred_syntax = :sass # and then run: # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

2. Step 2 Install Ruby/Sass Developer Toolkit

a. Add dk.rb to project with appropriate data. 3. Step 3 http://sass-lang.com/ 4. Step 4 open command prompt enter:

a. ONE TIME: i. Gem install sass ii. Gem install compass

iii. (optional for sprites) Gem install lemonade iv. (optional) Gem install bourbon v. (optional) Gem install sass-rails

vi. YUI Compressor (Google for directions: it compresses CSS and JavaScript – this can also be done within the config.rb but be careful editing this without knowing what you are doing and DO NOT COMMIT IT)

vii. Bootstrap (optional but Google for directions – creates an excellent layout for NEW sites)

viii. (great for new sites, adding css, typography defaults and scaffolding): @import "compass/css3"; @import "compass/typography"; @import "compass/typography/links"; @import "compass/typography/lists"; @import "compass/layout/grid-background"; @import "compass/layout"; @import "blueprint/scaffolding"; @import "blueprint";

Editing SASS/CSS (Every Time) 1. Open Terminal (command prompt) 2. As long as you are working on your sass files you will need to leave terminal open with this code,

if for any reason you need terminal you will need to open a new one and leave this one running. 3. EVERY TIME YOU WORK THIS NEEDS DONE:

a. Cd (then the location of your stylesheets folder for me this looks like: cd C:\bit9prog\dev\workspaces\APII\APII_2\src\main\webapp\resources\stylesheets

b. compass watch c. Leave terminal open and compass will do the rest. It is now compiling your changes and

building your sass files. d. Edit a .scss file e. Open the correlating .css file, wait for eclipse to pop up file change approval (choose

yes):

FINDING FILES TO EDIT * You can find the appropriate sections to edit by visiting the .css files and the file location and line

number will be located above each item (example):

/* line 58, ../sass/sprites/_org-icon.scss */ .org-icon-sprite, .org-icon-org-icon-small, .org-icon-org-icon, .org-icon-org-logo-hp { background: url('images/org-icon-sf0648c224e.png') no-repeat; }

In the above example the file location is inside the sass folder above the existing folder where you found

the css. The file that the item you wish to edit is considered a partial.

WHAT IS A PARTIAL? * A partial is notated with a space “_” before the name of the file.

A partial file is for a group of similar css, but is exported with the entire CSS or imported into multiple

css. To import a partial a code needs to be added at the top of the file:

@import "partials/fonts"; //* _fonts.scss must remain at top after colors */

@import "partials/buttons";

The above code implies that two files are being imported to the top of your css. These files are located

within the same folder as your main scss within another folder called partials.

SASS COMMENTS Comments can be made in the same way you would normally comment on a css file.

Add your notes within /* Comment */. This will add the comment to your scss (sass file) and

will be transferred to your .css file.

If you would like the comment not to transfer to your .css file and only appear on your sass file

add to lines //* Comment */ .

MIXINS

INCLUDES

VARIABLES

SPRITES

COLOR CODING IN ECIPSE

You need to associate the .scss file type with the native Eclipse CSS Editor in Eclipse[Part 1]. After you

do that, you need to add the .scss file type to the native CSS Editor as well so the CSS Editor will be able

to open it [Part 2]. Here are the steps for eclipse (I’m running Eclipse Java EE IDE for Web Developers,

Indigo):

———- [Part 1] ———-

1. Go to Window –> Preferences

2. Drill down to General –> Editors –> File Associations

3. In File Associations pane, click the ‘Add…” button on the top right.

4. For “File Type:”, enter *.scss and then click OK.

5. Find the *.scss entry in the File Associations list and select it.

6. After selecting *.scss, on the bottom pane “Associated editors:”, click the “Add…” button.

7. Make sure “Internal editors” is selected on the top, then find and selec t “CSS Editor” and then

click OK.

This associated the file type .scss with eclipses native CSS Editor. Now we have to configure the

native CSS Editor to support .scss files. To do this, follow this steps:

———- [Part 2] ———-

1. Go to Window –> Preferences

2. Drill down to General –> Content Types

3. In the Content Types pane, expand “Text”, then select “CSS”.

4. After “CSS” is selected, on the bottom “File associations:” pane, click the “Add…” button.

5. For “Content type:”, enter *.scss and then click OK.

6. Click OK to close out the Preferences window.

All done. All you need to do now is close any .scss files that you have open then re-open them

and wha-la, css colors in Eclipse for .scss files!

Hope this helps. – http://stackoverflow.com/questions/7614612/is-there-an-eclipse-editor-for-

sasss-scss-files-or-syntax-coloring-plugin

SASS RESOURCES http://sass-lang.com/download.html (required)

http://compass-style.org/ (optional but highly recommended)

http://git-scm.com/downloads (required)

http://rubyonrails.org/download (required)

http://www.mutuallyhuman.com/blog/2011/08/15/scout-app-0-5-0-released/ (optional – your choice)

http://www.aptana.com/products/studio3/getting_started (optional but good for eclipse)

http://windows.github.com/ (completely unrelated but a good resource for development… I’ve noticed

a lot of helpful tutorials, apps and code with these repositories)

INSTALLING A BUILD ANT TO AUTO UPDATE FILES UPON SAVE

SUSY GEM

GREAT SASS setup information or (SCSS) -- Checkout this blog for a great tutorial. It walks you through

setup step by step. http://blog.assortedgarbage.com/2012/03/using-dreamweaver-with-sass-and-less/

IE TIPS

CSS PIE Before IE9, Internet Explorer was not css3 compatible. To make pre-IE9 versions compatible CSS PIE

comes in handy. Anywhere that css3 is included and needs implemented in older versions of IE, add the

following code (replacing the file path):

behavior: url("/apii/resources/js/PIE/PIE.htc");

Be sure that the behavior code is only entered once per class.