SCSS (Sass) template with cross-browser CSS3 mixins

scss base template

/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link rel="stylesheet" href="/stylesheets/screen.css" media="screen" type="text/css" /> */

// This comment is not output to CSS
/* This comment is output to CSS */


// The CSS3 module provides cross-browser mixins for CSS properties
@import "compass/css3";                         // CSS3 - Provides cross browser CSS3 mixins that take advantage of available pre-spec vendor prefixes

@import "compass/css3/appearance";              // 1. Appearance - Specify the CSS3 appearance property
@import "compass/css3/background-clip";         // 2. Background Clip - Specify the background clip for all browsers
@import "compass/css3/background-origin";       // 3. Background Origin - Specify the background origin for all browsers
@import "compass/css3/background-size";         // 4. Background Size - Specify the background size for all browsers
@import "compass/css3/border-radius";           // 5. Border Radius - Specify the border radius for all browsers
@import "compass/css3/box";                     // 6. Box - This module provides mixins that pertain to the CSS3 Flexible Box
@import "compass/css3/box-shadow";              // 7. Box Shadow - Specify the box shadow for all browsers
@import "compass/css3/box-sizing";              // 8. Box Sizing - Specify the box sizing for all browsers
@import "compass/css3/columns";                 // 9. Columns - Specify a columnar layout for all browsers
@import "compass/css3/filter";                  // 10. Filter - Specify the (image) filter for all browsers
@import "compass/css3/font-face";               // 11. Font Face - Specify a downloadable font face for all browsers
@import "compass/css3/hyphenation";             // 12. Hyphenation - Mixin for breaking space and injecting hypens into overflowing text
@import "compass/css3/images";                  // 13. Images - Specify linear gradients and radial gradients for many browsers (To enable SVG gradient support in Opera and IE9, set $experimental-support-for-svg: true in your stylesheet)
@import "compass/css3/inline-block";            // 14. Inline Block - Declare an element inline block for all browsers
@import "compass/css3/opacity";                 // 15. Opacity - Specify the opacity for all browsers
@import "compass/css3/regions";                 // 16. CSS Regions - Specify CSS Regions for supported browsers
@import "compass/css3/text-shadow";             // 17. Text Shadow - Specify the text shadow for all browsers
@import "compass/css3/transform";               // 18. Transform - Specify transformations for many browsers
@import "compass/css3/transition";              // 19. Transition - Specify a style transition for all browsers


// Cross-Browser Support Configuration
@import "compass/support";                      // You can configure the compass default browser support matrix by setting these variables as needed 

$legacy-support-for-ie true                     // Usually compass hacks apply to both ie6 & 7 -- set this to false to disable support for both
$legacy-support-for-ie6 $legacy-support-for-ie  // Setting this to false will result in smaller output, but no support for ie6 hacks
$legacy-support-for-ie7 $legacy-support-for-ie  // Setting this to false will result in smaller output, but no support for ie7 hacks
$legacy-support-for-ie8 $legacy-support-for-ie  // Setting this to false will result in smaller output, but no support for legacy ie8 hacks
$experimental-support-for-mozilla true          // Support for mozilla in experimental css3 properties (-moz)
$experimental-support-for-webkit true           // Support for webkit in experimental css3 properties (-webkit)
$support-for-original-webkit-gradients true     // Support for webkit's original (non-standard) gradient syntax
$experimental-support-for-opera true            // Support for opera in experimental css3 properties (-o)
$experimental-support-for-microsoft true        // Support for microsoft in experimental css3 properties (-ms)
$experimental-support-for-khtml false           // Support for khtml in experimental css3 properties (-khtml)
$experimental-support-for-svg false             // Support for svg in experimental css3 properties. Setting this to true might add significant size to your generated stylesheets
$experimental-support-for-pie false             // Support for CSS PIE in experimental css3 properties (-pie)
$legacy-support-for-mozilla true                // Whether to output legacy support for mozilla. Usually this means hacks to support Firefox 3.6 or earlier

scss configuration file

# 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 = "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

# 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