Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Intro to SASS CSS

•Download as KEY, PDF•
•
Kianosh Pourian
Kianosh Pourian

SASS (Syntactically Awesome StyleSheets) is a CSS pre-processor that allows for nested rules, variables, mixins and more to extend the functionality of CSS. It compiles into regular CSS. Key features include nesting rules to reduce repetition, using variables to define common values for reuse, and creating mixins for commonly used CSS patterns or properties. SASS also allows for logic and functions. COMPASS is an open-source framework built on SASS that provides pre-made mixins and modules for common CSS patterns to simplify development.

Related slideshows

Pacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASSPacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASS
 
CSS preprocessor: why and how
CSS preprocessor: why and howCSS preprocessor: why and how
CSS preprocessor: why and how
 
CSS 101
CSS 101CSS 101
CSS 101
 
1 of 12
INTRO TO SASS CSS Kianosh Pourian Wifi username: BCGUEST password: 290Congress
About Me Kianosh Pourian Pixel Architect/Independent Contractor Blog on: http://innovatorylife.com Twitter: @kianoshp
About Me Kianosh Pourian Pixel Architect/Independent Contractor Blog on: http://innovatorylife.com Twitter: @kianoshp
SASS CSS Ruby engine compiler for CSS Extending the benefits of CSS by allowing nested rules, variables, mixins, selector inheritance, and more. http://sass-lang.com/ Other equivalent pre-processors: Javascript: LESS - http://lesscss.org/ Stylus: http://learnboost.github.com/stylus/ Closure Stylesheets
Pros & Cons of SASS Pros Cons •Uniform CSS •Reliance of a compiler •Abstraction of commonly used •All or nothing CSS - mixins •Disconnect between CSS and •Ability to create functions SASS CSS in dev consoles •Variables •Nesting •Inheritance •COMPASS!!
Variables In CSS we widely use common values for different element styles. For example, we use colors, width, height, etc... throughout our CSS styles. With variables, these common values can be declared once and re-used throughout the stylesheets. Example: $tableColor: #F3F1EB; $tableBorderColor: #EFEFEF; @mixin sortBg { ! background:$tableColor url('../img/bg.gif') no-repeat right center; ! &:hover { ! ! background-color: darken($tableColor, 25%); ! } }
Nesting To avoid repetition, nested rules and selectors will help in this effort Examples SCSS file CSS output table.hl { table.hl { margin: 2em 0; margin: 2em 0; td.ln { } text-align: right; table.hl td.ln { } text-align: right; } } li { li { font: { font-family: serif; family: serif; font-weight: bold; weight: bold; font-size: 1.2em; size: 1.2em; } } }
Mixins Mixins are a very potent asset of SASS. With mixins, the most commonly used CSS can be abstracted to a mixin and included as needed. Example: @mixin handCursor { ! cursor: hand; ! cursor: pointer; }
Mixins - Advanced Mixins can become very advanced and can contain logic . Example - setting Linear Gradients - http://kiano.sh/IjEpZm Example: @mixin add-border($border-position: all, $border-size: 1px, $border- pattern: solid, $border-color: #000) { ! @if $border-position == 'all' { ! ! border: $border-size $border-pattern $border-color; ! } @else { ! ! border-#{$border-position}: $border-size $border-pattern $border-color; ! } }
Functions Functions allow for computation logic. Functions return values. Example: @function responsiveFontSize($fontSize: 16, $isIE: false) { ! @if $isIE { ! ! @return (($fontSize/16) - 0.02) + em; ! } @else { ! ! @return ($fontSize/16) + em; ! } } @function rfs($fontSize: 16, $isIE: false) { ! @return responsiveFontSize($fontSize, $isIE); }
COMPASS “...open-source CSS authoring framework which uses the Sass stylesheet language to make writing stylesheets powerful and easy.” Provides a number of community-created mixins and modules to help integrate some of the most popular design patterns on the web. X-Browser CSS3 mixins: Rounded Corners, Gradients, Box Shadow, Text Shadow, etc... Common CSS development patterns: reset css, clearfix, sprites, etc...
Further reading SASS CSS - www.sass-lang.com COMPASS - http://compass-style.org/ SASS Cocktails - collections of SASS mixins and functions - http://kiano.sh/J89RI9 SASS CSS Boilerplate - http://kiano.sh/IlZt2b Thoughtbot/bourbon - Series of mixins and functions - http://kiano.sh/IQNOZ6 How to write a well structured CSS - Part 1 http://kiano.sh/Inxxym & Part 2 http:// kiano.sh/LaVS65 Feel free to tweet me a questions, twitter: @kianoshp blog: http://innovatorylife.com

More Related Content

Intro to SASS CSS

  • 1. INTRO TO SASS CSS Kianosh Pourian Wifi username: BCGUEST password: 290Congress
  • 2. About Me Kianosh Pourian Pixel Architect/Independent Contractor Blog on: http://innovatorylife.com Twitter: @kianoshp
  • 3. About Me Kianosh Pourian Pixel Architect/Independent Contractor Blog on: http://innovatorylife.com Twitter: @kianoshp
  • 4. SASS CSS Ruby engine compiler for CSS Extending the benefits of CSS by allowing nested rules, variables, mixins, selector inheritance, and more. http://sass-lang.com/ Other equivalent pre-processors: Javascript: LESS - http://lesscss.org/ Stylus: http://learnboost.github.com/stylus/ Closure Stylesheets
  • 5. Pros & Cons of SASS Pros Cons •Uniform CSS •Reliance of a compiler •Abstraction of commonly used •All or nothing CSS - mixins •Disconnect between CSS and •Ability to create functions SASS CSS in dev consoles •Variables •Nesting •Inheritance •COMPASS!!
  • 6. Variables In CSS we widely use common values for different element styles. For example, we use colors, width, height, etc... throughout our CSS styles. With variables, these common values can be declared once and re-used throughout the stylesheets. Example: $tableColor: #F3F1EB; $tableBorderColor: #EFEFEF; @mixin sortBg { ! background:$tableColor url('../img/bg.gif') no-repeat right center; ! &:hover { ! ! background-color: darken($tableColor, 25%); ! } }
  • 7. Nesting To avoid repetition, nested rules and selectors will help in this effort Examples SCSS file CSS output table.hl { table.hl { margin: 2em 0; margin: 2em 0; td.ln { } text-align: right; table.hl td.ln { } text-align: right; } } li { li { font: { font-family: serif; family: serif; font-weight: bold; weight: bold; font-size: 1.2em; size: 1.2em; } } }
  • 8. Mixins Mixins are a very potent asset of SASS. With mixins, the most commonly used CSS can be abstracted to a mixin and included as needed. Example: @mixin handCursor { ! cursor: hand; ! cursor: pointer; }
  • 9. Mixins - Advanced Mixins can become very advanced and can contain logic . Example - setting Linear Gradients - http://kiano.sh/IjEpZm Example: @mixin add-border($border-position: all, $border-size: 1px, $border- pattern: solid, $border-color: #000) { ! @if $border-position == 'all' { ! ! border: $border-size $border-pattern $border-color; ! } @else { ! ! border-#{$border-position}: $border-size $border-pattern $border-color; ! } }
  • 10. Functions Functions allow for computation logic. Functions return values. Example: @function responsiveFontSize($fontSize: 16, $isIE: false) { ! @if $isIE { ! ! @return (($fontSize/16) - 0.02) + em; ! } @else { ! ! @return ($fontSize/16) + em; ! } } @function rfs($fontSize: 16, $isIE: false) { ! @return responsiveFontSize($fontSize, $isIE); }
  • 11. COMPASS “...open-source CSS authoring framework which uses the Sass stylesheet language to make writing stylesheets powerful and easy.” Provides a number of community-created mixins and modules to help integrate some of the most popular design patterns on the web. X-Browser CSS3 mixins: Rounded Corners, Gradients, Box Shadow, Text Shadow, etc... Common CSS development patterns: reset css, clearfix, sprites, etc...
  • 12. Further reading SASS CSS - www.sass-lang.com COMPASS - http://compass-style.org/ SASS Cocktails - collections of SASS mixins and functions - http://kiano.sh/J89RI9 SASS CSS Boilerplate - http://kiano.sh/IlZt2b Thoughtbot/bourbon - Series of mixins and functions - http://kiano.sh/IQNOZ6 How to write a well structured CSS - Part 1 http://kiano.sh/Inxxym & Part 2 http:// kiano.sh/LaVS65 Feel free to tweet me a questions, twitter: @kianoshp blog: http://innovatorylife.com

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n