ADVANCED SASS CSS      Kianosh Pourian
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 compile...
VariablesIn CSS we widely use common values for different element styles.For example, we use colors, width, height, etc......
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,...
SASS CSS BoilerplateLeveraging the CSS from HTML5 boilerplate, converted it to SASS equivalent.Divide the style.css file i...
Further readingSASS CSS - www.sass-lang.comSASS Cocktails - collections of SASS mixins and functions - http://kiano.sh/J89...
Upcoming SlideShare
Loading in …5
×

Advanced sass

1,634
-1

Published on

Presentation on SASS CSS and some advanced options

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

No Downloads
Views
Total Views
1,634
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Advanced sass

    1. 1. ADVANCED SASS CSS Kianosh Pourian
    2. 2. About MeKianosh PourianPixel Architect/Independent ContractorBlog on: http://innovatorylife.comTwitter: @kianoshp
    3. 3. 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 processors: Javascript: LESS - http://lesscss.org/ CSS Authoring Framework: COMPASS - http://compass- style.org/
    4. 4. Pros & Cons of SASS Pros Cons•Uniform CSS •Reliance of a compiler•Abstraction of commonly used •Knowledge of Ruby language is CSS - mixins helpful•Ability to create functions •All or nothing•Variables •Disconnect between CSS and•Nesting SASS CSS in dev consoles
    5. 5. 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%); } }
    6. 6. 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; }
    7. 7. Mixins - AdvancedMixins can become very advanced and can contain logic .Example - setting Linear Gradients - http://kiano.sh/IjEpZm
    8. 8. 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);}
    9. 9. SASS CSS BoilerplateLeveraging the CSS from HTML5 boilerplate, converted it to SASS equivalent.Divide the style.css file into the following modular sections: normalize.scss - http://kiano.sh/IBIrzU helper.scss style.scss functions partials
    10. 10. Further readingSASS CSS - www.sass-lang.comSASS 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 - http://kiano.sh/InxxymFeel 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.

    ×