Introduction 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