Your SlideShare is downloading. ×
0
INTRO TO SASS CSS        Kianosh Pourian     Wifi     username: BCGUEST     password: 290Congress
About MeKianosh PourianPixel Architect/Independent ContractorBlog on: http://innovatorylife.comTwitter: @kianoshp
About MeKianosh PourianPixel Architect/Independent ContractorBlog on: http://innovatorylife.comTwitter: @kianoshp
SASS CSSRuby engine compiler for CSSExtending the benefits of CSS by allowing nested rules, variables,mixins, selector inh...
Pros & Cons of SASS              Pros                          Cons•Uniform CSS                    •Reliance of a compiler...
VariablesIn CSS we widely use common values for different element styles.For example, we use colors, width, height, etc......
NestingTo avoid repetition, nested rules and selectors will help in this effortExamplesSCSS file                          ...
MixinsMixins are a very potent asset of SASS.With mixins, the most commonly used CSS can be abstracted to a mixin and incl...
Mixins - AdvancedMixins can become very advanced and can contain logic .Example - setting Linear Gradients - http://kiano....
FunctionsFunctions allow for computation logic.Functions return values.Example:@function responsiveFontSize($fontSize: 16,...
COMPASS“...open-source CSS authoring framework which uses the Sass stylesheet language to makewriting stylesheets powerful...
Further readingSASS CSS - www.sass-lang.comCOMPASS - http://compass-style.org/SASS Cocktails - collections of SASS mixins ...
Upcoming SlideShare
Loading in...5
×

Intro to SASS CSS

4,337

Published on

Introduction to sass CSS

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,337
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
22
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Intro to SASS CSS"

    1. 1. INTRO TO SASS CSS Kianosh Pourian Wifi username: BCGUEST password: 290Congress
    2. 2. About MeKianosh PourianPixel Architect/Independent ContractorBlog on: http://innovatorylife.comTwitter: @kianoshp
    3. 3. About MeKianosh PourianPixel Architect/Independent ContractorBlog on: http://innovatorylife.comTwitter: @kianoshp
    4. 4. SASS CSSRuby engine compiler for CSSExtending 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. 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. 6. VariablesIn 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 thestylesheets.Example: $tableColor: #F3F1EB; $tableBorderColor: #EFEFEF; @mixin sortBg { ! background:$tableColor url(../img/bg.gif) no-repeat right center; ! &:hover { ! ! background-color: darken($tableColor, 25%); ! } }
    7. 7. NestingTo avoid repetition, nested rules and selectors will help in this effortExamplesSCSS file CSS outputtable.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. 8. MixinsMixins are a very potent asset of SASS.With mixins, the most commonly used CSS can be abstracted to a mixin and included asneeded.Example: @mixin handCursor { ! cursor: hand; ! cursor: pointer; }
    9. 9. Mixins - AdvancedMixins can become very advanced and can contain logic .Example - setting Linear Gradients - http://kiano.sh/IjEpZmExample:@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. 10. FunctionsFunctions 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. 11. COMPASS“...open-source CSS authoring framework which uses the Sass stylesheet language to makewriting stylesheets powerful and easy.”Provides a number of community-created mixins and modules to help integrate some of themost 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. 12. Further readingSASS CSS - www.sass-lang.comCOMPASS - http://compass-style.org/SASS Cocktails - collections of SASS mixins and functions - http://kiano.sh/J89RI9SASS CSS Boilerplate - http://kiano.sh/IlZt2bThoughtbot/bourbon - Series of mixins and functions - http://kiano.sh/IQNOZ6How to write a well structured CSS - Part 1 http://kiano.sh/Inxxym & Part 2 http://kiano.sh/LaVS65Feel free to tweet me a questions, twitter: @kianoshpblog: http://innovatorylife.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×