Table of Contents…………………………………………………………………………………………………………………. ii
- SASS – Overview………………………………………………………………………………………….. 1
What is SASS?………………………………………………………………………………………………………………………. 1
Why to Use SASS?………………………………………………………………………………………………………………… 1
Features of SASS………………………………………………………………………………………………………………….. 1
Advantages of SASS……………………………………………………………………………………………………………… 2
Disadvantages of SASS………………………………………………………………………………………………………….. 2
- SASS – Installation………………………………………………………………………………………… 3
Installation of Ruby………………………………………………………………………………………………………………. 3
- SASS – Syntax…………………………………………………………………………………………….. 11
SASS Indented Syntax…………………………………………………………………………………………………………. 11
Syntax Differences of SASS…………………………………………………………………………………………………. 12
Multiline Selectors……………………………………………………………………………………………………………… 12
Comments…………………………………………………………………………………………………………………………. 14
@import……………………………………………………………………………………………………………………………. 14
Mixin Directives…………………………………………………………………………………………………………………. 14
Deprecated Syntax…………………………………………………………………………………………………………….. 14
- SAAS – Application………………………………………………………………………………………. 16
Rack/Rails/Merb Plugin………………………………………………………………………………………………………. 16
Caching……………………………………………………………………………………………………………………………… 17
Options……………………………………………………………………………………………………………………………… 17
Syntax Selection…………………………………………………………………………………………………………………. 19
Encodings………………………………………………………………………………………………………………………….. 19
- SASS – CSS Extensions………………………………………………………………………………….. 20
SASS – Nested Rules…………………………………………………………………………………………………………… 20
SASS – Referencing Parent Selectors…………………………………………………………………………………… 23
SASS – Nested Properties……………………………………………………………………………………………………. 25
SASS – Placeholder Selectors………………………………………………………………………………………………. 26
- SASS – Comments……………………………………………………………………………………….. 29
Sass – Interpolation in Multiline Comments………………………………………………………………………… 31
- SASS – Script……………………………………………………………………………………………… 33
SASS – Interactive Shell………………………………………………………………………………………………………. 34
SASS – Variables…………………………………………………………………………………………………………………. 34
SASS – Data Types………………………………………………………………………………………………………………. 36
Strings……………………………………………………………………………………………………………………………….. 36
Lists…………………………………………………………………………………………………………………………………… 38
Maps…………………………………………………………………………………………………………………………………. 39
Colors………………………………………………………………………………………………………………………………… 39
SASS – Operations……………………………………………………………………………………………………………… 39
SASS – Number Operations…………………………………………………………………………………………………. 40
SASS – Color Operations…………………………………………………………………………………………………….. 42
SASS – String Operations…………………………………………………………………………………………………….. 44
SASS – Boolean Operations…………………………………………………………………………………………………. 45
SASS – Parentheses……………………………………………………………………………………………………………. 47
SASS – Functions………………………………………………………………………………………………………………… 49
SASS – Interpolation…………………………………………………………………………………………………………… 51
SASS – & in SassScript…………………………………………………………………………………………………………. 53
SASS – Variable Defaults…………………………………………………………………………………………………….. 55
- SASS – @-Rules and Directives………………………………………………………………………… 57
Sass – Import Directives……………………………………………………………………………………………………… 57
Sass – Media Directives………………………………………………………………………………………………………. 61
Sass – Extend Directives……………………………………………………………………………………………………… 63
Sass – At-root Directives…………………………………………………………………………………………………….. 66
Sass – Debug Directives………………………………………………………………………………………………………. 69
Sass – Warn Directives……………………………………………………………………………………………………….. 70
Sass – Error Directives………………………………………………………………………………………………………… 71
- SASS – Control Directives & Expressions…………………………………………………………….. 73
SASS – if() Function…………………………………………………………………………………………………………….. 73
SASS – @if Directive…………………………………………………………………………………………………………… 75
SASS – @if Directive…………………………………………………………………………………………………………… 75
SASS – @else if Directive…………………………………………………………………………………………………….. 77
SASS – @for Directive………………………………………………………………………………………………………… 79
SASS – through Keyword…………………………………………………………………………………………………….. 79
SASS – to Keyword……………………………………………………………………………………………………………… 81
SASS – @each Directive……………………………………………………………………………………………………… 83
SASS – @each Directive……………………………………………………………………………………………………… 84
SASS – @each Multiple Assignment…………………………………………………………………………………….. 86
SASS – @each Multiple Assignment with Maps……………………………………………………………………. 88
SASS – @while Directive…………………………………………………………………………………………………….. 90
- SASS – Mixin Directives…………………………………………………………………………………. 92
Sass – Defining a Mixin……………………………………………………………………………………………………….. 92
Sass – Including a Mixin……………………………………………………………………………………………………… 94
Sass – Mixin Arguments……………………………………………………………………………………………………… 96
Sass – Passing Content Blocks to a Mixin……………………………………………………………………………… 99
- SASS – Function Directives……………………………………………………………………………. 102
Naming Conventions………………………………………………………………………………………………………… 103
- SASS – Output Style……………………………………………………………………………………. 104
:nested……………………………………………………………………………………………………………………………. 104
:expanded……………………………………………………………………………………………………………………….. 104
:compact…………………………………………………………………………………………………………………………. 105
:compressed……………………………………………………………………………………………………………………. 105
- Extending SASS…………………………………………………………………………………………. 106
Defining Custom SASS Functions……………………………………………………………………………………….. 106
Cache Stores……………………………………………………………………………………………………………………. 106
Custom Importers……………………………………………………………………………………………………………. 106