An extension of CSS, which adds additional functionality • Generates well-formatted CSS • Makes it easier to organise and maintain your styles • Written in Ruby, and distributed as gem
taken from an older version of: http://twitter.github.com/bootstrap/ Good example of variables usage: https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/vendor/assets/ stylesheets/bootstrap/_variables.scss
$context) { @return ($desired-size / $context) * 1em } // so for example if body font-size is 100%, which equates // to 16px and we want our target font-size to be 24px h1 { font-size: calc-em(24, 16); } // => 1.5em // or for example to get a flexible grid layout @function calc-percent($desired-size, $context) { @return percentage($desired-size / $context) } .container { width: 90%; margin: 0 auto; } .main { width: calc-percent(900, 960); } // => 93.75% Ref: Responsive Web Design by Ethan Marcotte, http://www.abookapart.com/products/responsive-web-design Ref: http://thesassway.com/advanced/pure-sass-functions
a bunch of helpers and mixins that make your development even easier • Bourbon: http://bourbon.io/ • Compass: http://compass-style.org/ // Bourbon @include background(linear-gradient(red, green) left repeat); // Compass @include background-image(linear-gradient(left top, white, #ddd));
line #6 raised: Invalid CSS after "...), margin-right": expected ";", was ": $gridGutterWi..." (in /app/assets/stylesheets/screen.scss) // Application Trace app/assets/stylesheets/screen.scss:18 app/assets/stylesheets/application.scss:6
and Operations • Ways to use Sass for responsive grids and media queries • File structuring • Existing mixins libraries • GUI Compilers • Error debugging