COLORS Group them in a single spot Name them meaningful // brand colors $logo-blue: #333 $blue: #444 $lighter-blue: #0758d9 $headline-blue: #021c45 // buttons // confirm button $button-main-border: #555
RESET Resets all browser elements so that there is not default styling previously Yahoo Reset? Reset CSS by Mayer? others?? Which one to choose now: @import "compass/reset"
SPRITES creating sprites is really easy with compass /* Place your imgs into a folder */ ./images/flags ./images/flags/flag_de.png ./images/flags/flag_en.png ./images/flags/flag_fr.png Import them like this @import "flags/*.png" +all-flags-sprites PNG only!
SPRITES generates: #CSS .flags-sprite, .flags-flag_de, .flags-flag_en, .flags-flag_es, .flags-flag_fr { background: url('/images/flags-s22855bd5e5.png') no-repeat;} .flags-flag_de { background-position: 0 -51px;} .flags-flag_en { background-position: 0 0; } .flags-flag_es { background-position: 0 -17px; } .flags-flag_fr { background-position: 0 -34px; } !! For all images in folder a rule will be created !! !! Even if you don't need them !!