1 / 13

SASS

SASS. Syntactically Awesome Style Sheets. Katie Purdy ISTJ Technical Communications 1100 October 8 th , 2013. CSS Preprocessors. Extend the functionality of CSS Help organize code during development Provide better cross-browser compatibility with ease

lore
Download Presentation

SASS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. SASS Syntactically Awesome Style Sheets Katie Purdy ISTJ Technical Communications 1100 October 8th, 2013

  2. CSS Preprocessors • Extend the functionality of CSS • Help organize code during development • Provide better cross-browser compatibility with ease • Create code that is easier to maintain and share • Add logic and functionality expected by programmers

  3. You already know how to write valid Sass! Every CSS file is a valid SCSS file

  4. Setup/Installation • Sass runs using Ruby • Distributed via the Ruby package manager called RubyGems • gem install sass and/or use Scout

  5. Compiling Sass files into CSS • Individual file: • sass --watch style.scss:style.css • Entire directory: • sass --watch style sheets/sass:stylesheets/compiled

  6. Variables style.scss style.css

  7. Math style.scss style.css

  8. style.css @import style.scss

  9. Nesting style.css style.scss

  10. Mixins

  11. Mixins style.scss style.css

  12. A library of Sass mixins Provides greater cross-browser compatibility Solves common problems Included with Scout gem install compass compass create <ProjectDirectoryName>

  13. Now you can make your digital portfolios sassy!

More Related