220 likes | 480 Views
Sass & Compass. CPSC 473 – Spring 2011 Charles Wang Bryan Perez. Sass. “Syntactically Awesome Stylesheets ” Built with Ruby Is an extension of CSS3 Dynamic CSS Write CSS like a programmer variables inheritance mixins & parameters. Installing Sass & Compass.
E N D
Sass & Compass CPSC 473 – Spring 2011 Charles Wang Bryan Perez
Sass • “Syntactically Awesome Stylesheets” • Built with Ruby • Is an extension of CSS3 • Dynamic CSS • Write CSS like a programmer • variables • inheritance • mixins & parameters
Installing Sass & Compass • Ruby 1.8.7 or greater • Ruby gems installed • gem install sass • gem install compass
Two different formats of Sass • .scss– utilizes the CSS syntax most people are familiar with (braces and semicolons) • .sass – whitespace-aware indented syntax (similar to what you see in Python)
Keeping it DRY - Variables $company-blue: #1875e7; h1#brand { color: $company-blue; } #sidebar { background-color: $company-blue; }
Nesting CSS Sass ul.nav{ float: right; } ul.navli { float: left; } ul.navli a { color: #111; } ul.navli.current{ font-weight: bold; } ul.nav { float: right; li { float: left; a { color: #111; } &.current { font-weight: bold; } } } Note: ‘&’ represents the parent of that selector
Mixins w/ Params @mixin horizontal-list($spacing: 10px) { li { float: left; margin-right: $spacing; } } #header ul.nav { @include horizontal-list; float: right; } #footer ul.nav { @include horizontal-list(20px); margin-top: 1em; }
Inheritance CSS .error { border: 1px #f00; background: #fdd; } .error.intrusion { font-size: 1.2em; font-weight: bold; } .badError{ @extend .error; border-width: 3px; } .error, .baderror { border: 1px #f00; background: #fdd; } .error.intrusion, .badError.intrusion { font-size: 1.2em; font-weight: bold; } .badError { border-width: 3px; } SASS
Interpolation $side = top; $radius = 10px; .rounded- { border-#{$side}-radius: $radius; -moz-border-radius-#{$side}: $radius; -webkit-border-#{$side}-radius: $radius; }
Compass • A framework that uses Sass • Provides tools and configuration options for things outside of Ruby on Rails (Django, .NET, Drupal) • Tell Compass where your resources are located and where to reference them • Contains libaries of stylesheets
Features of Compass • CSS Resets • CSS Frameworks • Compass Core • Blueprint • 960 GS • Susy • YUI • Table Helpers • CSS3 Helpers • Sprites • Plugins • Lemonade • Fancy-Buttons • Colors • Less
Working with Compass • compass create sample • compass init rails /my/path/here –options • compass watch
Importing example @import "compass/css3” .rounded { @include border-radius(5px); } rounded { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }
References • www.sass-lang.com • http://compass-style.org/ • https://github.com/nex3/sass • https://github.com/chriseppstein/compass • http://peepcode.com/products/haml-and-sass • “Sass and Compass In Action”, Manning Publications, 2011