Slide 1
Slide 1 text
Sass Why
for the CSS Guy
An intro to Sass for CSS fans
Slide 2
Slide 2 text
CSS
IS
AWESOME
Slide 3
Slide 3 text
CSS
IS
AWESOME
via stevenf.com
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Syntactically
Slide 7
Slide 7 text
Syntactically
Awesome
Slide 8
Slide 8 text
Syntactically
Awesome
Style
Slide 9
Slide 9 text
Syntactically
Awesome
Style
Sheets
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Sass
Slide 13
Slide 13 text
• CSS meta-language
Sass
Slide 14
Slide 14 text
• CSS meta-language
• Simpler, more elegant syntax for CSS
Sass
Slide 15
Slide 15 text
• CSS meta-language
• Simpler, more elegant syntax for CSS
• Helps to create manageable stylesheets
Sass
Slide 16
Slide 16 text
• CSS meta-language
• Simpler, more elegant syntax for CSS
• Helps to create manageable stylesheets
• An upgrade to CSS
Sass
Slide 17
Slide 17 text
• CSS meta-language
• Simpler, more elegant syntax for CSS
• Helps to create manageable stylesheets
• An upgrade to CSS
Sass makes CSS fun again.
Sass
Slide 18
Slide 18 text
• CSS meta-language
• Simpler, more elegant syntax for CSS
• Helps to create manageable stylesheets
• An upgrade to CSS
Sass makes CSS fun again.
Sass Two delicious flavors
Sass & SCSS
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
• CSS authoring framework built in Sass
Slide 21
Slide 21 text
• CSS authoring framework built in Sass
• Collection of Sass mixins and functions
Slide 22
Slide 22 text
• CSS authoring framework built in Sass
• Collection of Sass mixins and functions
• Library of the web’s most reusable CSS patterns
Slide 23
Slide 23 text
• CSS authoring framework built in Sass
• Collection of Sass mixins and functions
• Library of the web’s most reusable CSS patterns
• Makes CSS3 easy
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Two delicous flavors…
Slide 26
Slide 26 text
Sass and SCSS
Two delicous flavors…
Slide 27
Slide 27 text
Sass and SCSS
Two delicous flavors…
Slide 28
Slide 28 text
• both functionally equivalent
Sass and SCSS
Two delicous flavors…
Slide 29
Slide 29 text
• both functionally equivalent
• both support the same feature set
Sass and SCSS
Two delicous flavors…
Slide 30
Slide 30 text
• both functionally equivalent
• both support the same feature set
• neither will be deprecated
Sass and SCSS
Two delicous flavors…
Slide 31
Slide 31 text
• both functionally equivalent
• both support the same feature set
• neither will be deprecated
• SCSS is not a successor to Sass
Sass and SCSS
Two delicous flavors…
Slide 32
Slide 32 text
• both functionally equivalent
• both support the same feature set
• neither will be deprecated
• SCSS is not a successor to Sass
• each make different people happy
Sass and SCSS
Two delicous flavors…
Slide 33
Slide 33 text
• both functionally equivalent
• both support the same feature set
• neither will be deprecated
• SCSS is not a successor to Sass
• each make different people happy
• some people like both
Sass and SCSS
Two delicous flavors…
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
CSS
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
}
nav a {
float: left;
padding: 0 5px;
color: #666;
}
nav a:hover {
color: #000;
}
Slide 36
Slide 36 text
CSS SCSS
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
a {
float: left;
padding: 0 5px;
color: #666;
&:hover {
color: #000;
}
}
}
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
}
nav a {
float: left;
padding: 0 5px;
color: #666;
}
nav a:hover {
color: #000;
}
Slide 37
Slide 37 text
CSS SCSS
nesting
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
a {
float: left;
padding: 0 5px;
color: #666;
&:hover {
color: #000;
}
}
}
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
}
nav a {
float: left;
padding: 0 5px;
color: #666;
}
nav a:hover {
color: #000;
}
Slide 38
Slide 38 text
CSS SCSS
nesting
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
a {
float: left;
padding: 0 5px;
color: #666;
&:hover {
color: #000;
}
}
}
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
}
nav a {
float: left;
padding: 0 5px;
color: #666;
}
nav a:hover {
color: #000;
}
Slide 39
Slide 39 text
CSS SCSS
nesting
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
a {
float: left;
padding: 0 5px;
color: #666;
&:hover {
color: #000;
}
}
}
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
}
nav a {
float: left;
padding: 0 5px;
color: #666;
}
nav a:hover {
color: #000;
}
Slide 40
Slide 40 text
CSS SCSS
the parent selector
nesting
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
a {
float: left;
padding: 0 5px;
color: #666;
&:hover {
color: #000;
}
}
}
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
}
nav a {
float: left;
padding: 0 5px;
color: #666;
}
nav a:hover {
color: #000;
}
Slide 41
Slide 41 text
CSS SCSS
the parent selector
nesting
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
a {
float: left;
padding: 0 5px;
color: #666;
&:hover {
color: #000;
}
}
}
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
}
nav a {
float: left;
padding: 0 5px;
color: #666;
}
nav a:hover {
color: #000;
}
Slide 42
Slide 42 text
CSS SCSS
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
a {
float: left;
padding: 0 5px;
color: #666;
&:hover {
color: #000;
}
}
}
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
}
nav a {
float: left;
padding: 0 5px;
color: #666;
}
nav a:hover {
color: #000;
}
Slide 43
Slide 43 text
CSS
nav { width: 500px; margin: 10px auto;
background: #ccc;
a { float: left; display: block; padding: 0 5px;
color: #666;
&:hover { color: #000; }}}
SCSS
SCSS doesn’t care about whitespace
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
a {
float: left;
padding: 0 5px;
color: #666;
&:hover {
color: #000;
}
}
}
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
}
nav a {
float: left;
padding: 0 5px;
color: #666;
}
nav a:hover {
color: #000;
}
Slide 44
Slide 44 text
CSS SCSS
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
a {
float: left;
padding: 0 5px;
color: #666;
&:hover {
color: #000;
}
}
}
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
}
nav a {
float: left;
padding: 0 5px;
color: #666;
}
nav a:hover {
color: #000;
}
Slide 45
Slide 45 text
CSS SCSS Sass
nav
background: #ccc
width: 500px
margin: 10px auto
a
float: left
padding: 0 5px
color: #666
&:hover
color: #000
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
a {
float: left;
padding: 0 5px;
color: #666;
&:hover {
color: #000;
}
}
}
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
}
nav a {
float: left;
padding: 0 5px;
color: #666;
}
nav a:hover {
color: #000;
}
Slide 46
Slide 46 text
CSS SCSS Sass
nav
background: #ccc
width: 500px
margin: 10px auto
a
float: left
padding: 0 5px
color: #666
&:hover
color: #000
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
a {
float: left;
padding: 0 5px;
color: #666;
&:hover {
color: #000;
}
}
}
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
}
nav a {
float: left;
padding: 0 5px;
color: #666;
}
nav a:hover {
color: #000;
}
whitespace is important
Slide 47
Slide 47 text
CSS SCSS Sass
nav
background: #ccc
width: 500px
margin: 10px auto
a
float: left
padding: 0 5px
color: #666
&:hover
color: #000
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
a {
float: left;
padding: 0 5px;
color: #666;
&:hover {
color: #000;
}
}
}
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
}
nav a {
float: left;
padding: 0 5px;
color: #666;
}
nav a:hover {
color: #000;
}
Slide 48
Slide 48 text
CSS SCSS Sass
nav
background: #ccc
width: 500px
margin: 10px auto
a
float: left
padding: 0 5px
color: #666
&:hover
color: #000
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
a {
float: left;
padding: 0 5px;
color: #666;
&:hover {
color: #000;
}
}
}
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
}
nav a {
float: left;
padding: 0 5px;
color: #666;
}
nav a:hover {
color: #000;
}
Slide 49
Slide 49 text
CSS SCSS Sass
nav
background: #ccc
width: 500px
margin: 10px auto
a
float: left
padding: 0 5px
color: #666
&:hover
color: #000
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
a {
float: left;
padding: 0 5px;
color: #666;
&:hover {
color: #000;
}
}
}
nav {
background: #ccc;
width: 500px;
margin: 10px auto;
}
nav a {
float: left;
padding: 0 5px;
color: #666;
}
nav a:hover {
color: #000;
}
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
SCSS Sass
Advantages of each…
Slide 52
Slide 52 text
• the “newer” syntax
SCSS Sass
Advantages of each…
Slide 53
Slide 53 text
• the “newer” syntax
• a super set of CSS
SCSS Sass
Advantages of each…
Slide 54
Slide 54 text
• the “newer” syntax
• a super set of CSS
• very similar to CSS
SCSS Sass
Advantages of each…
Slide 55
Slide 55 text
• the “newer” syntax
• a super set of CSS
• very similar to CSS
• low barrier to entry
SCSS Sass
Advantages of each…
Slide 56
Slide 56 text
• the “newer” syntax
• a super set of CSS
• very similar to CSS
• low barrier to entry
• allows for single-line rules
SCSS Sass
Advantages of each…
Slide 57
Slide 57 text
• the “newer” syntax
• a super set of CSS
• very similar to CSS
• low barrier to entry
• allows for single-line rules
• more flexible for expression
SCSS Sass
Advantages of each…
Slide 58
Slide 58 text
• the “newer” syntax
• a super set of CSS
• very similar to CSS
• low barrier to entry
• allows for single-line rules
• more flexible for expression
• compatible with many CSS parsers
SCSS Sass
Advantages of each…
Slide 59
Slide 59 text
• the “newer” syntax
• a super set of CSS
• very similar to CSS
• low barrier to entry
• allows for single-line rules
• more flexible for expression
• compatible with many CSS parsers
• easy to integrate with existing CSS
SCSS Sass
Advantages of each…
Slide 60
Slide 60 text
• the “newer” syntax
• a super set of CSS
• very similar to CSS
• low barrier to entry
• allows for single-line rules
• more flexible for expression
• compatible with many CSS parsers
• easy to integrate with existing CSS
• DRY
SCSS Sass
Advantages of each…
Slide 61
Slide 61 text
• the “newer” syntax
• a super set of CSS
• very similar to CSS
• low barrier to entry
• allows for single-line rules
• more flexible for expression
• compatible with many CSS parsers
• easy to integrate with existing CSS
• DRY
• the “original” syntax
SCSS Sass
Advantages of each…
Slide 62
Slide 62 text
• the “newer” syntax
• a super set of CSS
• very similar to CSS
• low barrier to entry
• allows for single-line rules
• more flexible for expression
• compatible with many CSS parsers
• easy to integrate with existing CSS
• DRY
• the “original” syntax
• no curly braces or semicolons
SCSS Sass
Advantages of each…
Slide 63
Slide 63 text
• the “newer” syntax
• a super set of CSS
• very similar to CSS
• low barrier to entry
• allows for single-line rules
• more flexible for expression
• compatible with many CSS parsers
• easy to integrate with existing CSS
• DRY
• the “original” syntax
• no curly braces or semicolons
• white-space aware
SCSS Sass
Advantages of each…
Slide 64
Slide 64 text
• the “newer” syntax
• a super set of CSS
• very similar to CSS
• low barrier to entry
• allows for single-line rules
• more flexible for expression
• compatible with many CSS parsers
• easy to integrate with existing CSS
• DRY
• the “original” syntax
• no curly braces or semicolons
• white-space aware
• shortcuts for @mixin and @include
SCSS Sass
Advantages of each…
Slide 65
Slide 65 text
• the “newer” syntax
• a super set of CSS
• very similar to CSS
• low barrier to entry
• allows for single-line rules
• more flexible for expression
• compatible with many CSS parsers
• easy to integrate with existing CSS
• DRY
• the “original” syntax
• no curly braces or semicolons
• white-space aware
• shortcuts for @mixin and @include
• more scannable
SCSS Sass
Advantages of each…
Slide 66
Slide 66 text
• the “newer” syntax
• a super set of CSS
• very similar to CSS
• low barrier to entry
• allows for single-line rules
• more flexible for expression
• compatible with many CSS parsers
• easy to integrate with existing CSS
• DRY
• the “original” syntax
• no curly braces or semicolons
• white-space aware
• shortcuts for @mixin and @include
• more scannable
• more concise, better for teams
SCSS Sass
Advantages of each…
Slide 67
Slide 67 text
• the “newer” syntax
• a super set of CSS
• very similar to CSS
• low barrier to entry
• allows for single-line rules
• more flexible for expression
• compatible with many CSS parsers
• easy to integrate with existing CSS
• DRY
• the “original” syntax
• no curly braces or semicolons
• white-space aware
• shortcuts for @mixin and @include
• more scannable
• more concise, better for teams
• enforces one declaration per line
SCSS Sass
Advantages of each…
Slide 68
Slide 68 text
• the “newer” syntax
• a super set of CSS
• very similar to CSS
• low barrier to entry
• allows for single-line rules
• more flexible for expression
• compatible with many CSS parsers
• easy to integrate with existing CSS
• DRY
• the “original” syntax
• no curly braces or semicolons
• white-space aware
• shortcuts for @mixin and @include
• more scannable
• more concise, better for teams
• enforces one declaration per line
• cleaner merges
SCSS Sass
Advantages of each…
Slide 69
Slide 69 text
• the “newer” syntax
• a super set of CSS
• very similar to CSS
• low barrier to entry
• allows for single-line rules
• more flexible for expression
• compatible with many CSS parsers
• easy to integrate with existing CSS
• DRY
• the “original” syntax
• no curly braces or semicolons
• white-space aware
• shortcuts for @mixin and @include
• more scannable
• more concise, better for teams
• enforces one declaration per line
• cleaner merges
• DRY, arguably more so
SCSS Sass
Advantages of each…
Slide 70
Slide 70 text
• the “newer” syntax
• a super set of CSS
• very similar to CSS
• low barrier to entry
• allows for single-line rules
• more flexible for expression
• compatible with many CSS parsers
• easy to integrate with existing CSS
• DRY
• the “original” syntax
• no curly braces or semicolons
• white-space aware
• shortcuts for @mixin and @include
• more scannable
• more concise, better for teams
• enforces one declaration per line
• cleaner merges
• DRY, arguably more so
SCSS Sass
Try both …you may want to use both.
Advantages of each…
Slide 71
Slide 71 text
SCSS
Sass
Slide 72
Slide 72 text
~ sass-convert [input-file] [output-file]
SCSS
Sass
Slide 73
Slide 73 text
~ sass-convert [input-file] [output-file]
SCSS
Sass
CSS
Slide 74
Slide 74 text
• Add Compass to a project
• @import & partials
• @extend
• nesting
• $variables
• @mixin
• sprites
• inline images
• CSS3
Today’s Roadmap
Slide 75
Slide 75 text
Let’s refactor the messaging style sheet into Sass.
Flash Messaging
Slide 76
Slide 76 text
Let’s refactor the messaging style sheet into Sass.
Flash Messaging
Slide 77
Slide 77 text
Sass Why
messaging.html
Slide 78
Slide 78 text
You have mail.
Settings updated!
Please fix the following errors:
- Username requires more pazazz.
- Password is too easy to hack.
- You must be at least this tall to ride this ride.
Slide 79
Slide 79 text
You have mail.
Settings updated!
Please fix the following errors:
- Username requires more pazazz.
- Password is too easy to hack.
- You must be at least this tall to ride this ride.
Slide 80
Slide 80 text
You have mail.
Settings updated!
Please fix the following errors:
- Username requires more pazazz.
- Password is too easy to hack.
- You must be at least this tall to ride this ride.
Slide 81
Slide 81 text
You have mail.
Settings updated!
Please fix the following errors:
- Username requires more pazazz.
- Password is too easy to hack.
- You must be at least this tall to ride this ride.
Slide 82
Slide 82 text
body {
background: #e3e3e3;
margin: 20px;
font: 16px/24px sans-serif;
}
ul {
list-style: disc;
margin-left: 20px;
}
messaging.css
Slide 83
Slide 83 text
body {
background: #e3e3e3;
margin: 20px;
font: 16px/24px sans-serif;
}
ul {
list-style: disc;
margin-left: 20px;
}
messaging.css
layout
Slide 84
Slide 84 text
body {
background: #e3e3e3;
margin: 20px;
font: 16px/24px sans-serif;
}
ul {
list-style: disc;
margin-left: 20px;
}
messaging.css
prose
Slide 85
Slide 85 text
.flash-info {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #a4a4a4;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #838484;
}
.flash-success {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #1b942a;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #ef9000;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
messaging.css
Slide 86
Slide 86 text
.flash-info {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #a4a4a4;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #838484;
}
.flash-success {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #1b942a;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #ef9000;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
messaging.css
info
Slide 87
Slide 87 text
.flash-info {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #a4a4a4;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #838484;
}
.flash-success {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #1b942a;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #ef9000;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
messaging.css
success
Slide 88
Slide 88 text
.flash-info {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #a4a4a4;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #838484;
}
.flash-success {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #1b942a;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #ef9000;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
messaging.css error
Slide 89
Slide 89 text
.flash-info {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #a4a4a4;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #838484;
}
.flash-success {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #1b942a;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #ef9000;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
messaging.css
error items
Slide 90
Slide 90 text
.flash-info {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #a4a4a4;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #838484;
}
.flash-success {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #1b942a;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #ef9000;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
messaging.css
icon
Slide 91
Slide 91 text
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acron
ym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt
,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoo
t,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgr
oup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:
100%;font:inherit;vertical-align:baseline;margin:0;padding:0}body{line-height:1}
ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
q,blockquote{quotes:none}
q:before,q:after,blockquote:before,blockquote:after{content:none}a img{border:none}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{d
isplay:block}
reset.css
Slide 92
Slide 92 text
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acron
ym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt
,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoo
t,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgr
oup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:
100%;font:inherit;vertical-align:baseline;margin:0;padding:0}body{line-height:1}
ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
q,blockquote{quotes:none}
q:before,q:after,blockquote:before,blockquote:after{content:none}a img{border:none}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{d
isplay:block}
reset.css
Eric Meyer’s Reset
Slide 93
Slide 93 text
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acron
ym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt
,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoo
t,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgr
oup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:
100%;font:inherit;vertical-align:baseline;margin:0;padding:0}body{line-height:1}
ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
q,blockquote{quotes:none}
q:before,q:after,blockquote:before,blockquote:after{content:none}a img{border:none}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{d
isplay:block}
reset.css
Eric Meyer’s Reset
• Browsers have a default style sheet
Slide 94
Slide 94 text
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acron
ym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt
,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoo
t,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgr
oup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:
100%;font:inherit;vertical-align:baseline;margin:0;padding:0}body{line-height:1}
ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
q,blockquote{quotes:none}
q:before,q:after,blockquote:before,blockquote:after{content:none}a img{border:none}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{d
isplay:block}
reset.css
Eric Meyer’s Reset
• Browsers have a default style sheet
• Browser style sheets are different
Slide 95
Slide 95 text
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acron
ym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt
,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoo
t,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgr
oup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:
100%;font:inherit;vertical-align:baseline;margin:0;padding:0}body{line-height:1}
ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
q,blockquote{quotes:none}
q:before,q:after,blockquote:before,blockquote:after{content:none}a img{border:none}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{d
isplay:block}
reset.css
Eric Meyer’s Reset
• Browsers have a default style sheet
• Browser style sheets are different
• A reset style sheet overrides default browser styles
Slide 96
Slide 96 text
Add Compass to project
~
Slide 97
Slide 97 text
Add Compass to project
~
~/sass-why
cd sass-why
Slide 98
Slide 98 text
Add Compass to project
~
~/sass-why
~/sass-why
cd sass-why
compass create
Slide 99
Slide 99 text
Add Compass to project
Slide 100
Slide 100 text
Add Compass to project
Compass configuration file
Slide 101
Slide 101 text
Add Compass to project
Compass configuration file
Slide 102
Slide 102 text
Add Compass to project
Sass files (SCSS syntax)
Slide 103
Slide 103 text
Add Compass to project
CSS compiled from Sass files
Slide 104
Slide 104 text
Add Compass to project
Slide 105
Slide 105 text
Add Compass to project
Slide 106
Slide 106 text
Add Compass to project
Slide 107
Slide 107 text
Add Compass to project
Slide 108
Slide 108 text
Add Compass to project
Slide 109
Slide 109 text
Add Compass to project
~
~/sass-why
~/sass-why
cd sass-why
compass create
Slide 110
Slide 110 text
Add Compass to project
~
~/sass-why
~/sass-why
cd sass-why
compass create
compass compile
create stylesheets/messaging.css
create stylesheets/reset.css
~/sass-why
Slide 111
Slide 111 text
Sass Why
•••
•••
•••
messaging.html
Slide 112
Slide 112 text
Sass Why
•••
•••
•••
messaging.html
update links
Slide 113
Slide 113 text
Sass Why
•••
•••
•••
messaging.html
update links
Slide 114
Slide 114 text
No content
Slide 115
Slide 115 text
Let’s abstract a little more.
Slide 116
Slide 116 text
@import (in Sass)
Slide 117
Slide 117 text
• not during page render in browser like in CSS
@import (in Sass)
Slide 118
Slide 118 text
• not during page render in browser like in CSS
• when compiling Sass to CSS
@import (in Sass)
Slide 119
Slide 119 text
• not during page render in browser like in CSS
• when compiling Sass to CSS
• organize your styles into logical partials
@import (in Sass)
Slide 120
Slide 120 text
• not during page render in browser like in CSS
• when compiling Sass to CSS
• organize your styles into logical partials
• combine many files into one
@import (in Sass)
Slide 121
Slide 121 text
• not during page render in browser like in CSS
• when compiling Sass to CSS
• organize your styles into logical partials
• combine many files into one
• serve fewer css files per request
@import (in Sass)
Slide 122
Slide 122 text
Sass Why
•••
•••
•••
messaging.html
Slide 123
Slide 123 text
Sass Why
•••
•••
•••
messaging.html
remove these
Slide 124
Slide 124 text
Sass Why
•••
•••
•••
messaging.html
add screen.css
Slide 125
Slide 125 text
Remove reset and compiled css
Slide 126
Slide 126 text
No content
Slide 127
Slide 127 text
rename to screen.scss
Slide 128
Slide 128 text
rename to screen.scss
Slide 129
Slide 129 text
create two partials
Slide 130
Slide 130 text
create two partials
Slide 131
Slide 131 text
body {
background: #e3e3e3;
margin: 20px;
font: 16px/24px sans-serif;
}
ul {
list-style: disc;
margin-left: 20px;
}
_layout.scss
layout
prose
Slide 132
Slide 132 text
_messaging.scss
.flash-info {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #a4a4a4;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #838484;
}
.flash-success {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #1b942a;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #ef9000;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
Slide 133
Slide 133 text
screen.scss
Slide 134
Slide 134 text
@import "layout";
screen.scss
Slide 135
Slide 135 text
@import "layout";
@import "messaging";
screen.scss
Slide 136
Slide 136 text
@import "layout";
@import "messaging";
screen.scss
@import "compass/reset";
Slide 137
Slide 137 text
@import "layout";
@import "messaging";
screen.scss
@import "compass/reset";
Let’s compile
Slide 138
Slide 138 text
@import "layout";
@import "messaging";
screen.scss
@import "compass/reset";
Compass doesn’t compile partials
Slide 139
Slide 139 text
@extend
Slide 140
Slide 140 text
When one element should have all the styles of another,
plus its own styles.
@extend
Slide 141
Slide 141 text
_messaging.scss
.flash-info {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #a4a4a4;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #838484;
}
.flash-success {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #1b942a;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #ef9000;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
Slide 142
Slide 142 text
_messaging.scss
.flash-info {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #a4a4a4;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #838484;
}
.flash-success {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #1b942a;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
position: relative;
margin: 0 auto 15px;
width: 435px;
background: #ef9000;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
unique style declarations
Slide 143
Slide 143 text
_messaging.scss
.flash-info,
.flash-success,
.flash-error {
position: relative;
margin: 0 auto 15px;
width: 435px;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
}
.flash-info {
background: #a4a4a4;
text-shadow: 0 -1px #838484;
}
.flash-success {
background: #1b942a;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
background: #ef9000;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
Slide 144
Slide 144 text
_messaging.scss
.flash-info,
.flash-success,
.flash-error {
position: relative;
margin: 0 auto 15px;
width: 435px;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
}
.flash-info {
background: #a4a4a4;
text-shadow: 0 -1px #838484;
}
.flash-success {
background: #1b942a;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
background: #ef9000;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
Slide 145
Slide 145 text
_messaging.scss
.flash-message {
position: relative;
margin: 0 auto 15px;
width: 435px;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
}
.flash-info {
background: #a4a4a4;
text-shadow: 0 -1px #838484;
}
.flash-success {
background: #1b942a;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
background: #ef9000;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
Slide 146
Slide 146 text
_messaging.scss
.flash-message {
position: relative;
margin: 0 auto 15px;
width: 435px;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
}
.flash-info {
background: #a4a4a4;
text-shadow: 0 -1px #838484;
}
.flash-success {
background: #1b942a;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
background: #ef9000;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
Slide 147
Slide 147 text
_messaging.scss
.flash-message {
position: relative;
margin: 0 auto 15px;
width: 435px;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
}
.flash-info {
@extend .flash-message;
background: #a4a4a4;
text-shadow: 0 -1px #838484;
}
.flash-success {
@extend .flash-message;
background: #1b942a;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
@extend .flash-message;
background: #ef9000;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
Slide 148
Slide 148 text
_messaging.scss
.flash-message {
position: relative;
margin: 0 auto 15px;
width: 435px;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
}
.flash-info {
@extend .flash-message;
background: #a4a4a4;
text-shadow: 0 -1px #838484;
}
.flash-success {
@extend .flash-message;
background: #1b942a;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
@extend .flash-message;
background: #ef9000;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
Slide 149
Slide 149 text
.flash-message,
.flash-info,
.flash-success,
.flash-error {
position: relative;
margin: 0 auto 15px;
width: 435px;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
}
.flash-info {
background: #a4a4a4;
text-shadow: 0 -1px #838484;
}
.flash-success {
background: #1b942a;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
background: #ef9000;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
Compiled CSS
Slide 150
Slide 150 text
_messaging.scss
.flash-info {
position: relative;
margin: 0 auto 15px;
width: 435px;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
background: #a4a4a4;
text-shadow: 0 -1px #838484;
}
.flash-success {
@extend .flash-info;
background: #1b942a;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
@extend .flash-info;
background: #ef9000;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
Slide 151
Slide 151 text
_messaging.scss
.flash-info {
position: relative;
margin: 0 auto 15px;
width: 435px;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
background: #a4a4a4;
text-shadow: 0 -1px #838484;
}
.flash-success {
@extend .flash-info;
background: #1b942a;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
@extend .flash-info;
background: #ef9000;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
Slide 152
Slide 152 text
_messaging.scss
.flash-info {
position: relative;
margin: 0 auto 15px;
width: 435px;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
background: #a4a4a4;
text-shadow: 0 -1px #838484;
}
.flash-success {
@extend .flash-info;
background: #1b942a;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
@extend .flash-info;
background: #ef9000;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
Slide 153
Slide 153 text
_messaging.scss
.flash-info {
position: relative;
margin: 0 auto 15px;
width: 435px;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
background: #a4a4a4;
text-shadow: 0 -1px #838484;
}
.flash-success {
@extend .flash-info;
background: #1b942a;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
@extend .flash-info;
background: #ef9000;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
Slide 154
Slide 154 text
_messaging.scss
.flash-info {
position: relative;
margin: 0 auto 15px;
width: 435px;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
background: #a4a4a4;
text-shadow: 0 -1px #838484;
}
.flash-success {
@extend .flash-info;
background: #1b942a;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
@extend .flash-info;
background: #ef9000;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
Slide 155
Slide 155 text
.flash-info,
.flash-success,
.flash-error {
position: relative;
margin: 0 auto 15px;
width: 435px;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
background: #a4a4a4;
text-shadow: 0 -1px #838484;
}
.flash-success {
background: #1b942a;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
background: #ef9000;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
Compiled CSS
Slide 156
Slide 156 text
Nesting
Slide 157
Slide 157 text
• group styles together
Nesting
Slide 158
Slide 158 text
• group styles together
• avoid duplication of selectors
Nesting
Slide 159
Slide 159 text
• group styles together
• avoid duplication of selectors
• keep your code DRY
Nesting
Slide 160
Slide 160 text
• group styles together
• avoid duplication of selectors
• keep your code DRY
Sass nesting ≠ html structure
Nesting
Slide 161
Slide 161 text
• group styles together
• avoid duplication of selectors
• keep your code DRY
Sass nesting ≠ html structure
Nesting FASTER
TRAFFIC
KEEP
LEFT
Slide 162
Slide 162 text
Warning about Nesting
Slide 163
Slide 163 text
Warning about Nesting
.subset-section
background-color: #FFF
width: 960px
.subset-skus
width: 790px
.subset-selection
float: left
width: 790px
.registrant-needs
margin-bottom: 10px
text-align: right
.subset-attributes
width: 430px
float: left
.subset-pricing
display: block
text-align: right
.price-special
font-size: 11px
.currency
font-size: 16px
Slide 164
Slide 164 text
Warning about Nesting
.subset-section {
background-color: white;
width: 960px; }
.subset-section .subset-skus {
width: 790px; }
.subset-section .subset-skus .subset-selection {
float: left;
width: 790px; }
.subset-section .subset-skus .subset-selection .registrant-needs {
margin-bottom: 10px;
text-align: right; }
.subset-section .subset-skus .subset-selection .registrant-needs .subset-attributes {
width: 430px;
float: left; }
.subset-section .subset-skus .subset-selection .registrant-needs .subset-attributes .subset-pricing
display: block;
text-align: right; }
.subset-section .subset-skus .subset-selection .registrant-needs .subset-attributes .subset-prici
font-size: 11px; }
.subset-section .subset-skus .subset-selection .registrant-needs .subset-attributes .subset-prici
font-size: 16px; }
Slide 165
Slide 165 text
_messaging.scss
.flash-message {
position: relative;
margin: 0 auto 15px;
width: 435px;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
}
.flash-info {
@extend .flash-message;
background: #a4a4a4;
text-shadow: 0 -1px #838484;
}
.flash-success {
@extend .flash-message;
background: #1b942a;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
@extend .flash-message;
background: #ef9000;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
Slide 166
Slide 166 text
_messaging.scss
.flash-message {
position: relative;
margin: 0 auto 15px;
width: 435px;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
}
.flash-info {
@extend .flash-message;
background: #a4a4a4;
text-shadow: 0 -1px #838484;
}
.flash-success {
@extend .flash-message;
background: #1b942a;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
@extend .flash-message;
background: #ef9000;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
Slide 167
Slide 167 text
_messaging.scss
.flash-message {
position: relative;
margin: 0 auto 15px;
width: 435px;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
}
.flash-info {
@extend .flash-message;
background: #a4a4a4;
text-shadow: 0 -1px #838484;
}
.flash-success {
@extend .flash-message;
background: #1b942a;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
@extend .flash-message;
background: #ef9000;
text-shadow: 0 -1px #e8541c;
.flash-error li {
font-weight: normal;
}
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
Slide 168
Slide 168 text
_messaging.scss
.flash-message {
position: relative;
margin: 0 auto 15px;
width: 435px;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
}
.flash-info {
@extend .flash-message;
background: #a4a4a4;
text-shadow: 0 -1px #838484;
}
.flash-success {
@extend .flash-message;
background: #1b942a;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
@extend .flash-message;
background: #ef9000;
text-shadow: 0 -1px #e8541c;
.flash-error li {
font-weight: normal;
}
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
Slide 169
Slide 169 text
_messaging.scss
.flash-message {
position: relative;
margin: 0 auto 15px;
width: 435px;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
}
.flash-info {
@extend .flash-message;
background: #a4a4a4;
text-shadow: 0 -1px #838484;
}
.flash-success {
@extend .flash-message;
background: #1b942a;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
@extend .flash-message;
background: #ef9000;
text-shadow: 0 -1px #e8541c;
li {
font-weight: normal;
}
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
Slide 170
Slide 170 text
screen.css
.flash-message, .flash-info, .flash-success, .flash-error {
position: relative;
margin: 0 auto 15px;
width: 435px;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold; }
.flash-info {
background: #a4a4a4;
text-shadow: 0 -1px #838484; }
.flash-success {
background: #1b942a;
text-shadow: 0 -1px #1a7e1c; }
.flash-error {
background: #ef9000;
text-shadow: 0 -1px #e8541c; }
.flash-error li {
font-weight: normal; }
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px; }
Slide 171
Slide 171 text
screen.css
.flash-message, .flash-info, .flash-success, .flash-error {
position: relative;
margin: 0 auto 15px;
width: 435px;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold; }
.flash-info {
background: #a4a4a4;
text-shadow: 0 -1px #838484; }
.flash-success {
background: #1b942a;
text-shadow: 0 -1px #1a7e1c; }
.flash-error {
background: #ef9000;
text-shadow: 0 -1px #e8541c; }
.flash-error li {
font-weight: normal; } output_style = :nested
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px; }
Slide 172
Slide 172 text
screen.css
.flash-message, .flash-info, .flash-success, .flash-error {
position: relative;
margin: 0 auto 15px;
width: 435px;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold; }
.flash-info {
background: #a4a4a4;
text-shadow: 0 -1px #838484; }
.flash-success {
background: #1b942a;
text-shadow: 0 -1px #1a7e1c; }
.flash-error {
background: #ef9000;
text-shadow: 0 -1px #e8541c; }
.flash-error li {
font-weight: normal; } output_style = :nested
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px; }
Slide 173
Slide 173 text
screen.css
.flash-message, .flash-info, .flash-success, .flash-error {
position: relative;
margin: 0 auto 15px;
width: 435px;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold; }
.flash-info {
background: #a4a4a4;
text-shadow: 0 -1px #838484; }
.flash-success {
background: #1b942a;
text-shadow: 0 -1px #1a7e1c; }
.flash-error {
background: #ef9000;
text-shadow: 0 -1px #e8541c; }
.flash-error li {
font-weight: normal; } output_style = :nested
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px; }
output_style
Slide 174
Slide 174 text
screen.css
.flash-message, .flash-info, .flash-success, .flash-error {
position: relative;
margin: 0 auto 15px;
width: 435px;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
}
.flash-info {
background: #a4a4a4;
text-shadow: 0 -1px #838484;
}
.flash-success {
background: #1b942a;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
background: #ef9000;
text-shadow: 0 -1px #e8541c;
}
.flash-error li {
font-weight: normal;
}
output_style = :expanded
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
Slide 175
Slide 175 text
screen.css
.flash-message, .flash-info, .flash-success, .flash-error { position: relative; margin: 0 auto 15px;
width: 435px; border-radius: 5px; padding: 10px 50px 10px 15px; color: white; font-weight: bold; }
.flash-info { background: #a4a4a4; text-shadow: 0 -1px #838484; }
.flash-success { background: #1b942a; text-shadow: 0 -1px #1a7e1c; }
.flash-error { background: #ef9000; text-shadow: 0 -1px #e8541c; }
.flash-error li { font-weight: normal; }
.flash-icon { display: block; position: absolute; top: 11px; right: 12px; }
output_style = :compact
Slide 176
Slide 176 text
screen.css
.flash-message,.flash-info,.flash-success,.flash-error{position:relative;margin:0 auto 15px;width:
435px;border-radius:5px;padding:10px 50px 10px 15px;color:white;font-weight:bold}.flash-
info{background:#a4a4a4;text-shadow:0 -1px #838484}.flash-success{background:#1b942a;text-shadow:0
-1px #1a7e1c}.flash-error{background:#ef9000;text-shadow:0 -1px #e8541c}.flash-error li{font-
weight:normal}.flash-icon{display:block;position:absolute;top:11px;right:12px}
output_style = :compressed
Slide 177
Slide 177 text
SCSS to Sass
Slide 178
Slide 178 text
_messaging.scss
.flash-message {
position: relative;
margin: 0 auto 15px;
width: 435px;
border-radius: 5px;
padding: 10px 50px 10px 15px;
color: white;
font-weight: bold;
}
.flash-info {
@extend .flash-message;
background: #a4a4a4;
text-shadow: 0 -1px #838484;
}
.flash-success {
@extend .flash-message;
background: #1b942a;
text-shadow: 0 -1px #1a7e1c;
}
.flash-error {
@extend .flash-message;
background: #ef9000;
text-shadow: 0 -1px #e8541c;
li {
font-weight: normal;
}
}
.flash-icon {
display: block;
position: absolute;
top: 11px;
right: 12px;
}
Slide 179
Slide 179 text
_messaging.sass
.flash-message
position: relative
margin: 0 auto 15px;
width: 435px;
border-radius: 5px
padding: 10px 50px 10px 15px
color: white
font-weight: bold
.flash-info
@extend .flash-message
background: #a4a4a4
text-shadow: 0 -1px #838484
.flash-success
@extend .flash-message
background: #1b942a
text-shadow: 0 -1px #1a7e1c
.flash-error
@extend .flash-message
background: #ef9000
text-shadow: 0 -1px #e8541c
li
font-weight: normal
.flash-icon
display: block
position: absolute
top: 11px
right: 12px
Slide 180
Slide 180 text
_messaging.sass
.flash-message
position: relative
margin: 0 auto 15px;
width: 435px;
border-radius: 5px
padding: 10px 50px 10px 15px
color: white
font-weight: bold
.flash-info
@extend .flash-message
background: #a4a4a4
text-shadow: 0 -1px #838484
.flash-success
@extend .flash-message
background: #1b942a
text-shadow: 0 -1px #1a7e1c
.flash-error
@extend .flash-message
background: #ef9000
text-shadow: 0 -1px #e8541c
li
font-weight: normal
.flash-icon
display: block
position: absolute
top: 11px
right: 12px
Slide 181
Slide 181 text
@import "compass/reset";
@import "layout";
@import "messaging";
screen.scss
Slide 182
Slide 182 text
@import "compass/reset";
@import "layout";
@import "messaging";
screen.scss
@import supports both syntaxes, no changes here
Slide 183
Slide 183 text
@import compass/reset
@import layout
@import messaging
screen.sass
Slide 184
Slide 184 text
@import compass/reset
@import layout
@import messaging
screen.sass
semicolons removed, quotes optional
Slide 185
Slide 185 text
$variables
Slide 186
Slide 186 text
• containers for values
$variables
Slide 187
Slide 187 text
• containers for values
• variable name define the purpose of values
$variables
Slide 188
Slide 188 text
• containers for values
• variable name define the purpose of values
• Five value types in Sass:
$variables
Slide 189
Slide 189 text
• containers for values
• variable name define the purpose of values
• Five value types in Sass:
• numbers: 5, 8.2, 99%, 20px
$variables
Slide 190
Slide 190 text
• containers for values
• variable name define the purpose of values
• Five value types in Sass:
• numbers: 5, 8.2, 99%, 20px
• text strings: foo bar, “baz qux”
$variables
Slide 191
Slide 191 text
• containers for values
• variable name define the purpose of values
• Five value types in Sass:
• numbers: 5, 8.2, 99%, 20px
• text strings: foo bar, “baz qux”
• colors: #38e1b2, rgba(0, 128, 255, 0.3)
$variables
Slide 192
Slide 192 text
• containers for values
• variable name define the purpose of values
• Five value types in Sass:
• numbers: 5, 8.2, 99%, 20px
• text strings: foo bar, “baz qux”
• colors: #38e1b2, rgba(0, 128, 255, 0.3)
• booleans: true or false
$variables
Slide 193
Slide 193 text
• containers for values
• variable name define the purpose of values
• Five value types in Sass:
• numbers: 5, 8.2, 99%, 20px
• text strings: foo bar, “baz qux”
• colors: #38e1b2, rgba(0, 128, 255, 0.3)
• booleans: true or false
• lists: 2px 10px 15px or Arial, Helvetica, Courier
$variables
Slide 194
Slide 194 text
_messaging.sass
.flash-message
position: relative
margin: 0 auto 15px
width: 435px
border-radius: 5px
padding: 10px 50px 10px 15px
color: white
font-weight: bold
.flash-info
@extend .flash-message
background: #a4a4a4
text-shadow: 0 -1px #838484
.flash-success
@extend .flash-message
background: #1b942a
text-shadow: 0 -1px #1a7e1c
.flash-error
@extend .flash-message
background: #ef9000
text-shadow: 0 -1px #e8541c
li
font-weight: normal
.flash-icon
display: block
position: absolute
top: 11px
right: 12px
Slide 195
Slide 195 text
_messaging.sass
.flash-message
position: relative
margin: 0 auto 15px
width: 435px
border-radius: 5px
padding: 10px 50px 10px 15px
color: white
font-weight: bold
.flash-icon
display: block
position: absolute
top: 11px
right: 12px
.flash-info
@extend .flash-message
background: #a4a4a4
text-shadow: 0 -1px #838484
.flash-success
@extend .flash-message
background: #1b942a
text-shadow: 0 -1px #1a7e1c
.flash-error
@extend .flash-message
background: #ef9000
text-shadow: 0 -1px #e8541c
li
font-weight: normal
Slide 196
Slide 196 text
_messaging.sass
.flash-message
position: relative
margin: 0 auto 15px
width: 435px
border-radius: 5px
padding: 10px 50px 10px 15px
color: white
font-weight: bold
.flash-icon
display: block
position: absolute
top: 11px
right: 12px
.flash-info
@extend .flash-message
background: #a4a4a4
text-shadow: 0 -1px #838484
.flash-success
@extend .flash-message
background: #1b942a
text-shadow: 0 -1px #1a7e1c
.flash-error
@extend .flash-message
background: #ef9000
text-shadow: 0 -1px #e8541c
li
font-weight: normal
Slide 197
Slide 197 text
_messaging.sass
$flash-info-background: #a4a4a4
$flash-info-text-shadow: #838484
$flash-success-background: #1b942a
$flash-success-text-shadow: #1a7e1c
$flash-error-background: #ef9000
$flash-error-text-shadow: #e8541c
.flash-message
position: relative
margin: 0 auto 15px
width: 435px
border-radius: 5px
padding: 10px 50px 10px 15px
color: white
font-weight: bold
.flash-icon
display: block
position: absolute
top: 11px
right: 12px
.flash-info
@extend .flash-message
background: #a4a4a4
text-shadow: 0 -1px #838484
.flash-success
@extend .flash-message
background: #1b942a
text-shadow: 0 -1px #1a7e1c
.flash-error
@extend .flash-message
background: #ef9000
text-shadow: 0 -1px #e8541c
li
font-weight: normal
Slide 198
Slide 198 text
_messaging.sass
$flash-info-background: #a4a4a4
$flash-info-text-shadow: #838484
$flash-success-background: #1b942a
$flash-success-text-shadow: #1a7e1c
$flash-error-background: #ef9000
$flash-error-text-shadow: #e8541c
.flash-message
position: relative
margin: 0 auto 15px
width: 435px
border-radius: 5px
padding: 10px 50px 10px 15px
color: white
font-weight: bold
.flash-icon
display: block
position: absolute
top: 11px
right: 12px
.flash-info
@extend .flash-message
background: $flash-info-background
text-shadow: 0 -1px $flash-info-text-shadow
.flash-success
@extend .flash-message
background: $flash-success-background
text-shadow: 0 -1px $flash-success-text-shadow
.flash-error
@extend .flash-message
background: $flash-error-background
text-shadow: 0 -1px $flash-error-text-shadow
li
font-weight: normal
Slide 199
Slide 199 text
_messaging.sass
$flash-info-background: #a4a4a4
$flash-info-text-shadow: #838484
$flash-success-background: #1b942a
$flash-success-text-shadow: #1a7e1c
$flash-error-background: #ef9000
$flash-error-text-shadow: #e8541c
.flash-message
position: relative
margin: 0 auto 15px
width: 435px
border-radius: 5px
padding: 10px 50px 10px 15px
color: white
font-weight: bold
.flash-icon
display: block
position: absolute
top: 11px
right: 12px
.flash-info
@extend .flash-message
background: $flash-info-background
text-shadow: 0 -1px $flash-info-text-shadow
.flash-success
@extend .flash-message
background: $flash-success-background
text-shadow: 0 -1px $flash-success-text-shadow
.flash-error
@extend .flash-message
background: $flash-error-background
text-shadow: 0 -1px $flash-error-text-shadow
li
font-weight: normal
Slide 200
Slide 200 text
_messaging.sass
.flash-message
position: relative
margin: 0 auto 15px
width: 435px
border-radius: 5px
padding: 10px 50px 10px 15px
color: white
font-weight: bold
.flash-icon
display: block
position: absolute
top: 11px
right: 12px
.flash-info
@extend .flash-message
background: $flash-info-background
text-shadow: 0 -1px $flash-info-text-shadow
.flash-success
@extend .flash-message
background: $flash-success-background
text-shadow: 0 -1px $flash-success-text-shadow
.flash-error
@extend .flash-message
background: $flash-error-background
text-shadow: 0 -1px $flash-error-text-shadow
li
font-weight: normal
Slide 201
Slide 201 text
Set all your site-wide values here.
_config.sass partial
Slide 202
Slide 202 text
_config.sass
Slide 203
Slide 203 text
_config.sass
$flash-info-background: #a4a4a4
$flash-info-text-shadow: #838484
$flash-success-background: #1b942a
$flash-success-text-shadow: #1a7e1c
$flash-error-background: #ef9000
$flash-error-text-shadow: #e8541c
Slide 204
Slide 204 text
_config.sass
$flash-info-background: #a4a4a4
$flash-info-text-shadow: #838484
$flash-success-background: #1b942a
$flash-success-text-shadow: #1a7e1c
$flash-error-background: #ef9000
$flash-error-text-shadow: #e8541c
screen.sass
@import compass/reset
@import layout
@import messaging
Slide 205
Slide 205 text
_config.sass
$flash-info-background: #a4a4a4
$flash-info-text-shadow: #838484
$flash-success-background: #1b942a
$flash-success-text-shadow: #1a7e1c
$flash-error-background: #ef9000
$flash-error-text-shadow: #e8541c
screen.sass
@import compass/reset
@import layout
@import messaging
@import config
Slide 206
Slide 206 text
Math
Slide 207
Slide 207 text
Just like in algebra class, show your work.
Math
Slide 208
Slide 208 text
Just like in algebra class, show your work.
• Replace arbitrary numbers with calculations.
Math
Slide 209
Slide 209 text
Just like in algebra class, show your work.
• Replace arbitrary numbers with calculations.
• Control your grid styles
Math
Slide 210
Slide 210 text
Just like in algebra class, show your work.
• Replace arbitrary numbers with calculations.
• Control your grid styles
• Document logic in your styles
Math
Slide 211
Slide 211 text
_messaging.sass
.flash-message
position: relative
margin: 0 auto 15px
width: 435px
border-radius: 5px
padding: 10px 50px 10px 15px
color: white
font-weight: bold
Slide 212
Slide 212 text
_messaging.sass
.flash-message
position: relative
margin: 0 auto 15px
width: 435px
border-radius: 5px
padding: 10px 50px 10px 15px
color: white
font-weight: bold
Slide 213
Slide 213 text
_messaging.sass
$flash-message-width: 500px
.flash-message
position: relative
width: 435px
border-radius: 5px
padding: 10px 50px 10px 15px
color: white
font-weight: bold
Slide 214
Slide 214 text
_messaging.sass
$flash-message-width: 500px
$flash-message-h-padding: 15px
.flash-message
position: relative
width: 435px
border-radius: 5px
padding: 10px 50px 10px 15px
color: white
font-weight: bold
Slide 215
Slide 215 text
_messaging.sass
$flash-message-width: 500px
$flash-message-h-padding: 15px
$flash-message-icon-padding: image-width("icon-info.png")
.flash-message
position: relative
width: 435px
border-radius: 5px
padding: 10px 50px 10px 15px
color: white
font-weight: bold
Slide 216
Slide 216 text
_messaging.sass
$flash-message-width: 500px
$flash-message-h-padding: 15px
$flash-message-icon-padding: image-width("icon-info.png")
.flash-message
position: relative
width: 435px
border-radius: 5px
padding: 10px 50px 10px 15px
color: white
font-weight: bold
35px
Slide 217
Slide 217 text
_messaging.sass
$flash-message-width: 500px
$flash-message-h-padding: 15px
$flash-message-icon-padding: image-width("icon-info.png") + $flash-message-h-padding
.flash-message
position: relative
width: 435px
border-radius: 5px
padding: 10px 50px 10px 15px
color: white
font-weight: bold
Slide 218
Slide 218 text
_messaging.sass
$flash-message-width: 500px
$flash-message-h-padding: 15px
$flash-message-icon-padding: image-width("icon-info.png") + $flash-message-h-padding
.flash-message
position: relative
width: 435px
border-radius: 5px
padding: 10px 50px 10px 15px
color: white
font-weight: bold
Slide 219
Slide 219 text
_messaging.sass
$flash-message-width: 500px
$flash-message-h-padding: 15px
$flash-message-icon-padding: image-width("icon-info.png") + $flash-message-h-padding
.flash-message
position: relative
width: 435px
border-radius: 5px
padding: 10px 50px 10px 15px
color: white
font-weight: bold
Slide 220
Slide 220 text
_messaging.sass
$flash-message-width: 500px
$flash-message-h-padding: 15px
$flash-message-icon-padding: image-width("icon-info.png") + 15px
.flash-message
position: relative
width: $flash-message-width - $flash-message-h-padding * 2 - $flash-message-icon-padding
border-radius: 5px
padding: 10px 50px 10px 15px
color: white
font-weight: bold
Slide 221
Slide 221 text
_messaging.sass
$flash-message-width: 500px
$flash-message-h-padding: 15px
$flash-message-icon-padding: image-width("icon-info.png") + 15px
.flash-message
position: relative
width: $flash-message-width - $flash-message-h-padding * 2 - $flash-message-icon-padding
border-radius: 5px
padding: 10px 50px 10px 15px
color: white
font-weight: bold
Slide 222
Slide 222 text
_messaging.sass
$flash-message-width: 500px
$flash-message-h-padding: 15px
$flash-message-icon-padding: image-width("icon-info.png") + 15px
.flash-message
position: relative
width: $flash-message-width - $flash-message-h-padding * 2 - $flash-message-icon-padding
border-radius: 5px
padding: 10px 50px 10px 15px
color: white
font-weight: bold
Slide 223
Slide 223 text
_messaging.sass
$flash-message-width: 500px
$flash-message-h-padding: 15px
$flash-message-icon-padding: image-width("icon-info.png") + 15px
.flash-message
position: relative
width: $flash-message-width - $flash-message-h-padding * 2 - $flash-message-icon-padding
border-radius: 5px
padding: 10px 50px 10px 15px
color: white
font-weight: bold
Slide 224
Slide 224 text
_messaging.sass
$flash-message-width: 500px
$flash-message-h-padding: 15px
$flash-message-icon-padding: image-width("icon-info.png") + 15px
.flash-message
position: relative
width: $flash-message-width - $flash-message-h-padding * 2 - $flash-message-icon-padding
border-radius: 5px
padding: 10px 50px 10px 15px
color: white
font-weight: bold
Slide 225
Slide 225 text
_messaging.sass
$flash-message-width: 500px
$flash-message-h-padding: 15px
$flash-message-icon-padding: image-width("icon-info.png") + 15px
.flash-message
position: relative
width: $flash-message-width - $flash-message-h-padding * 2 - $flash-message-icon-padding
border-radius: 5px
padding: 10px $flash-message-h-padding + $flash-message-icon-padding 10px $flash-message-h-padding
color: white
font-weight: bold
Slide 226
Slide 226 text
_messaging.sass
$flash-message-width: 500px
$flash-message-h-padding: 15px
$flash-message-icon-padding: image-width("icon-info.png") + 15px
.flash-message
position: relative
width: $flash-message-width - $flash-message-h-padding * 2 - $flash-message-icon-padding
border-radius: 5px
padding: 10px $flash-message-h-padding + $flash-message-icon-padding 10px $flash-message-h-padding
color: white
font-weight: bold
Slide 227
Slide 227 text
_messaging.sass
$flash-message-width: 500px
$flash-message-h-padding: 15px
$flash-message-icon-padding: image-width("icon-info.png") + 15px
.flash-message
position: relative
width: $flash-message-width - $flash-message-h-padding * 2 - $flash-message-icon-padding
border-radius: 5px
padding: 10px $flash-message-h-padding + $flash-message-icon-padding 10px $flash-message-h-padding
color: white
font-weight: bold
Slide 228
Slide 228 text
_messaging.sass
$flash-message-width: 500px
$flash-message-h-padding: 15px
$flash-message-icon-padding: image-width("icon-info.png") + 15px
.flash-message
position: relative
width: $flash-message-width - $flash-message-h-padding * 2 - $flash-message-icon-padding
border-radius: 5px
padding: 10px $flash-message-h-padding + $flash-message-icon-padding 10px $flash-message-h-padding
color: white
font-weight: bold
Slide 229
Slide 229 text
@mixin(argument)
Slide 230
Slide 230 text
A reusable block of content… with optional arguments.
@mixin(argument)
Slide 231
Slide 231 text
_messaging.sass
.flash-info
@extend .flash-message
background: $flash-info-background
text-shadow: 0 -1px $flash-info-text-shadow
.flash-success
@extend .flash-message
background: $flash-success-background
text-shadow: 0 -1px $flash-success-text-shadow
.flash-error
@extend .flash-message
background: $flash-error-background
text-shadow: 0 -1px $flash-error-text-shadow
li
font-weight: normal
Slide 232
Slide 232 text
_messaging.sass
.flash-info
@extend .flash-message
background: $flash-info-background
text-shadow: 0 -1px $flash-info-text-shadow
.flash-success
@extend .flash-message
background: $flash-success-background
text-shadow: 0 -1px $flash-success-text-shadow
.flash-error
@extend .flash-message
background: $flash-error-background
text-shadow: 0 -1px $flash-error-text-shadow
li
font-weight: normal
see
Slide 233
Slide 233 text
_messaging.sass
.flash-info
@extend .flash-message
background: $flash-info-background
text-shadow: 0 -1px $flash-info-text-shadow
.flash-success
@extend .flash-message
background: $flash-success-background
text-shadow: 0 -1px $flash-success-text-shadow
.flash-error
@extend .flash-message
background: $flash-error-background
text-shadow: 0 -1px $flash-error-text-shadow
li
font-weight: normal
see
the
Slide 234
Slide 234 text
_messaging.sass
.flash-info
@extend .flash-message
background: $flash-info-background
text-shadow: 0 -1px $flash-info-text-shadow
.flash-success
@extend .flash-message
background: $flash-success-background
text-shadow: 0 -1px $flash-success-text-shadow
.flash-error
@extend .flash-message
background: $flash-error-background
text-shadow: 0 -1px $flash-error-text-shadow
li
font-weight: normal
see
the
pattern?
Slide 235
Slide 235 text
_messaging.sass
@mixin flash-message($type, $background, $text-shadow)
.flash-#{$type}
@extend .flash-message
background: $background
text-shadow: 0 -1px $text-shadow
Slide 236
Slide 236 text
_messaging.sass
@mixin flash-message($type, $background, $text-shadow)
.flash-#{$type}
@extend .flash-message
background: $background
text-shadow: 0 -1px $text-shadow
Slide 237
Slide 237 text
_messaging.sass
@mixin flash-message($type, $background, $text-shadow)
.flash-#{$type}
@extend .flash-message
background: $background
text-shadow: 0 -1px $text-shadow
Slide 238
Slide 238 text
_messaging.sass
@mixin flash-message($type, $background, $text-shadow)
.flash-#{$type}
@extend .flash-message
background: $background
text-shadow: 0 -1px $text-shadow
Slide 239
Slide 239 text
_messaging.sass
@mixin flash-message($type, $background, $text-shadow)
.flash-#{$type}
@extend .flash-message
background: $background
text-shadow: 0 -1px $text-shadow
Slide 240
Slide 240 text
_messaging.sass
@mixin flash-message($type, $background, $text-shadow)
.flash-#{$type}
@extend .flash-message
background: $background
text-shadow: 0 -1px $text-shadow
Slide 241
Slide 241 text
_messaging.sass
@mixin flash-message($type, $background, $text-shadow)
.flash-#{$type}
@extend .flash-message
background: $background
text-shadow: 0 -1px $text-shadow
Slide 242
Slide 242 text
_messaging.sass
@mixin flash-message($type, $background, $text-shadow)
.flash-#{$type}
@extend .flash-message
background: $background
text-shadow: 0 -1px $text-shadow
Slide 243
Slide 243 text
_messaging.sass
@mixin flash-message($type, $background, $text-shadow)
.flash-#{$type}
@extend .flash-message
background: $background
text-shadow: 0 -1px $text-shadow
@if $type == error
li
font-weight: normal
Slide 244
Slide 244 text
_messaging.sass
@mixin flash-message($type, $background, $text-shadow)
.flash-#{$type}
@extend .flash-message
background: $background
text-shadow: 0 -1px $text-shadow
@if $type == error
li
font-weight: normal
Slide 245
Slide 245 text
_messaging.sass
@mixin flash-message($type, $background, $text-shadow)
.flash-#{$type}
@extend .flash-message
background: $background
text-shadow: 0 -1px $text-shadow
@if $type == error
li
font-weight: normal
Slide 246
Slide 246 text
_messaging.sass
@include flash-message(info, $flash-info-background, $flash-info-text-shadow)
@include flash-message(success, $flash-success-background, $flash-success-text-shadow)
@include flash-message(error, $flash-error-background, $flash-error-text-shadow)
@mixin flash-message($type, $background, $text-shadow)
.flash-#{$type}
@extend .flash-message
background: $background
text-shadow: 0 -1px $text-shadow
@if $type == error
li
font-weight: normal
Slide 247
Slide 247 text
_messaging.sass
+flash-message(info, $flash-info-background, $flash-info-text-shadow)
+flash-message(success, $flash-success-background, $flash-success-text-shadow)
+flash-message(error, $flash-error-background, $flash-error-text-shadow)
=flash-message($type, $background, $text-shadow)
.flash-#{$type}
@extend .flash-message
background: $background
text-shadow: 0 -1px $text-shadow
@if $type == error
li
font-weight: normal
Slide 248
Slide 248 text
Delightfully simple with Compass
Sprites
Slide 249
Slide 249 text
Delightfully simple with Compass
Sprites
error.png
info.png
success.png
Slide 250
Slide 250 text
Delightfully simple with Compass
Sprites
error.png
info.png
success.png
Slide 251
Slide 251 text
Delightfully simple with Compass
Sprites
error.png
info.png
success.png
foo-sprite.png
Slide 252
Slide 252 text
No content
Slide 253
Slide 253 text
create folder of images to sprite
Slide 254
Slide 254 text
place images in folder
Slide 255
Slide 255 text
simplify filenames
Slide 256
Slide 256 text
_messaging.sass
.flash-icon
display: block
position: absolute
top: 11px
right: 12px
Slide 257
Slide 257 text
_messaging.sass
.icon-sprite
display: block
position: absolute
top: 11px
right: 12px
Slide 258
Slide 258 text
_messaging.sass
.icon-sprite
display: block
position: absolute
top: 11px
right: 12px
@import "icon/*.png"
+all-icon-sprites
Slide 259
Slide 259 text
_messaging.sass
.icon-sprite
display: block
position: absolute
top: 11px
right: 12px
@import "icon/*.png"
+all-icon-sprites
$icon-sprite-dimensions: true
Slide 260
Slide 260 text
_messaging.sass
.icon-sprite
display: block
position: absolute
top: 11px
right: 12px
@import "icon/*.png"
+all-icon-sprites
$icon-sprite-dimensions: true
Slide 261
Slide 261 text
_messaging.sass
.icon-sprite
display: block
position: absolute
top: 11px
right: 12px
@import "icon/*.png"
+all-icon-sprites
$icon-sprite-dimensions: true
Compass config file
Slide 262
Slide 262 text
_messaging.sass
.icon-sprite
display: block
position: absolute
top: 11px
right: 12px
@import "icon/*.png"
+all-icon-sprites
$icon-sprite-dimensions: true
config.rb
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
output_style = :nested
relative_assets = true
line_comments = false
Compass config file
Slide 263
Slide 263 text
_messaging.sass
.icon-sprite
display: block
position: absolute
top: 11px
right: 12px
@import "icon/*.png"
+all-icon-sprites
$icon-sprite-dimensions: true
config.rb
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
output_style = :nested
relative_assets = true
line_comments = false
Compass config file
Slide 264
Slide 264 text
_messaging.sass
.icon-sprite
display: block
position: absolute
top: 11px
right: 12px
@import "icon/*.png"
+all-icon-sprites
$icon-sprite-dimensions: true
Compass config file
Slide 265
Slide 265 text
_messaging.sass
.icon-sprite
display: block
position: absolute
top: 11px
right: 12px
@import "icon/*.png"
+all-icon-sprites
$icon-sprite-dimensions: true
generated sprite
icon-s5c33447329.png
Compass config file
Slide 266
Slide 266 text
Compiled sprite CSS
.icon-sprite, .icon-error, .icon-info, .icon-success {
display: block;
position: absolute;
top: 11px;
right: 12px; }
.icon-sprite, .icon-error, .icon-info, .icon-success {
background: url('../images/icon-sa3bc8b9105.png') no-repeat; }
Slide 267
Slide 267 text
Compiled sprite CSS
.icon-sprite, .icon-error, .icon-info, .icon-success {
display: block;
position: absolute;
top: 11px;
right: 12px; }
.icon-sprite, .icon-error, .icon-info, .icon-success {
background: url('../images/icon-sa3bc8b9105.png') no-repeat; }
Slide 268
Slide 268 text
Compiled sprite CSS
.icon-sprite, .icon-error, .icon-info, .icon-success {
display: block;
position: absolute;
top: 11px;
right: 12px; }
.icon-sprite, .icon-error, .icon-info, .icon-success {
background: url('../images/icon-sa3bc8b9105.png') no-repeat; }
Slide 269
Slide 269 text
Compiled sprite CSS
.icon-sprite, .icon-error, .icon-info, .icon-success {
display: block;
position: absolute;
top: 11px;
right: 12px; }
.icon-sprite, .icon-error, .icon-info, .icon-success {
background: url('../images/icon-sa3bc8b9105.png') no-repeat; }
Slide 270
Slide 270 text
Compiled sprite CSS
.icon-sprite, .icon-error, .icon-info, .icon-success {
display: block;
position: absolute;
top: 11px;
right: 12px; }
.icon-sprite, .icon-error, .icon-info, .icon-success {
background: url('../images/icon-sa3bc8b9105.png') no-repeat; }
.icon-error {
background-position: 0 0;
height: 19px;
width: 20px; }
.icon-info {
background-position: 0 -19px;
height: 21px;
width: 20px; }
.icon-success {
background-position: 0 -40px;
height: 21px;
width: 20px; }
Slide 271
Slide 271 text
Compiled sprite CSS
.icon-sprite, .icon-error, .icon-info, .icon-success {
display: block;
position: absolute;
top: 11px;
right: 12px; }
.icon-sprite, .icon-error, .icon-info, .icon-success {
background: url('../images/icon-sa3bc8b9105.png') no-repeat; }
.icon-error {
background-position: 0 0;
height: 19px;
width: 20px; }
.icon-info {
background-position: 0 -19px;
height: 21px;
width: 20px; }
.icon-success {
background-position: 0 -40px;
height: 21px;
width: 20px; }
Slide 272
Slide 272 text
Compiled sprite CSS
.icon-sprite, .icon-error, .icon-info, .icon-success {
display: block;
position: absolute;
top: 11px;
right: 12px; }
.icon-sprite, .icon-error, .icon-info, .icon-success {
background: url('../images/icon-sa3bc8b9105.png') no-repeat; }
.icon-error {
background-position: 0 0;
height: 19px;
width: 20px; }
.icon-info {
background-position: 0 -19px;
height: 21px;
width: 20px; }
.icon-success {
background-position: 0 -40px;
height: 21px;
width: 20px; }
Slide 273
Slide 273 text
messaging.html
You have mail.
Settings updated!
Please fix the following errors:
- Username requires more pizazz.
- Password is too easy to hack.
- You must be at least this tall to ride this ride.
Slide 274
Slide 274 text
messaging.html
You have mail.
Settings updated!
Please fix the following errors:
- Username requires more pizazz.
- Password is too easy to hack.
- You must be at least this tall to ride this ride.
Slide 275
Slide 275 text
messaging.html
You have mail.
Settings updated!
Please fix the following errors:
- Username requires more pizazz.
- Password is too easy to hack.
- You must be at least this tall to ride this ride.
Slide 276
Slide 276 text
messaging.html
You have mail.
Settings updated!
Please fix the following errors:
- Username requires more pizazz.
- Password is too easy to hack.
- You must be at least this tall to ride this ride.
Slide 277
Slide 277 text
No content
Slide 278
Slide 278 text
No content
Slide 279
Slide 279 text
Built into Compass.
Inline images
Slide 280
Slide 280 text
Built into Compass.
Inline images
Slide 281
Slide 281 text
Inline images
ul
margin-left: 20px
list-style: disc
Slide 282
Slide 282 text
Inline images
ul
margin-left: 20px
$bullet-image: "bullet.png"
list-style: disc
Slide 283
Slide 283 text
Inline images
ul
margin-left: 20px
$bullet-image: "bullet.png"
list-style-image: inline-image($bullet-image, image/png)
Slide 284
Slide 284 text
Inline images
ul
margin-left: 20px
$bullet-image: "bullet.png"
list-style-image: inline-image($bullet-image, image/png)
ul {
list-style-image: url('data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAJCAYAAAAPU20uAAAAT0lEQVR42r3KsQ2AMAxE0ZuA
UdIwAPOwldfJJiAxgN344muDQslJv/EzSB5V53tdhsy8uJgM5Pf+eHD3e4UymNkZEc
+MuslQ26pW7VNNNgBdFvofIZ4THgAAAABJRU5ErkJggg==');
margin-left: 20px; }
Slide 285
Slide 285 text
No content
Slide 286
Slide 286 text
How about some CSS3?
Slide 287
Slide 287 text
Ooooh, rounded corners…
border-radius
Slide 288
Slide 288 text
border-radius
CSS
.flash-message {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px; }
Slide 289
Slide 289 text
@import compass/css3
.flash-message
+border-radius(5px)
border-radius
Sass
CSS
.flash-message {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px; }
Slide 290
Slide 290 text
Add some depth
box-shadow
Slide 291
Slide 291 text
box-shadow
.flash-message {
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset;
-o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset; }
CSS
Slide 292
Slide 292 text
box-shadow
.flash-message
$inner-shadow: 0 0 3px rgba(0, 0, 0, .12) inset
$inner-shadow-top: 0 1px 0 rgba(0, 0, 0, .05) inset
+box-shadow($inner-shadow, $inner-shadow-top)
.flash-message {
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset;
-o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset; }
Sass
CSS
Slide 293
Slide 293 text
box-shadow
.flash-message
$inner-shadow: 0 0 3px rgba(0, 0, 0, .12) inset
$inner-shadow-top: 0 1px 0 rgba(0, 0, 0, .05) inset
+box-shadow($inner-shadow, $inner-shadow-top)
.flash-message {
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset;
-o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset; }
Sass
CSS
Slide 294
Slide 294 text
No content
Slide 295
Slide 295 text
No content
Slide 296
Slide 296 text
Advanced nesting
Parent Selector
Slide 297
Slide 297 text
No content
Slide 298
Slide 298 text
div
color: black
.foo
color: black
&.bar
color: black
&:hover
color: black
.ie7 &
color: black
.parent & .child
color: black
Sass
Slide 299
Slide 299 text
div
color: black
.foo
color: black
&.bar
color: black
&:hover
color: black
.ie7 &
color: black
.parent & .child
color: black
div {
color: black; }
div .foo {
color: black; }
div.bar {
color: black; }
div:hover {
color: black; }
.ie7 div {
color: black; }
.parent div .child {
color: black; }
Sass CSS
Slide 300
Slide 300 text
div
color: black
.foo
color: black
&.bar
color: black
&:hover
color: black
.ie7 &
color: black
.parent & .child
color: black
div {
color: black; }
div .foo {
color: black; }
div.bar {
color: black; }
div:hover {
color: black; }
.ie7 div {
color: black; }
.parent div .child {
color: black; }
Sass CSS
Slide 301
Slide 301 text
div
color: black
.foo
color: black
&.bar
color: black
&:hover
color: black
.ie7 &
color: black
.parent & .child
color: black
div {
color: black; }
div .foo {
color: black; }
div.bar {
color: black; }
div:hover {
color: black; }
.ie7 div {
color: black; }
.parent div .child {
color: black; }
Sass CSS
Slide 302
Slide 302 text
div
color: black
.foo
color: black
&.bar
color: black
&:hover
color: black
.ie7 &
color: black
.parent & .child
color: black
div {
color: black; }
div .foo {
color: black; }
div.bar {
color: black; }
div:hover {
color: black; }
.ie7 div {
color: black; }
.parent div .child {
color: black; }
Sass CSS
Slide 303
Slide 303 text
div
color: black
.foo
color: black
&.bar
color: black
&:hover
color: black
.ie7 &
color: black
.parent & .child
color: black
div {
color: black; }
div .foo {
color: black; }
div.bar {
color: black; }
div:hover {
color: black; }
.ie7 div {
color: black; }
.parent div .child {
color: black; }
Sass CSS
Slide 304
Slide 304 text
div
color: black
.foo
color: black
&.bar
color: black
&:hover
color: black
.ie7 &
color: black
.parent & .child
color: black
div {
color: black; }
div .foo {
color: black; }
div.bar {
color: black; }
div:hover {
color: black; }
.ie7 div {
color: black; }
.parent div .child {
color: black; }
Sass CSS
Slide 305
Slide 305 text
Styling links
Slide 306
Slide 306 text
.flash-message
a
text-decoration: none
color: $link-color
&:visited
color: $link-color
&:hover
color: $link-hover-color
text-decoration: underline
&:active
color: $link-active-color
Styling links
Slide 307
Slide 307 text
.flash-message
a
text-decoration: none
color: $link-color
&:visited
color: $link-color
&:hover
color: $link-hover-color
text-decoration: underline
&:active
color: $link-active-color
Styling links
$link-color: #89F2FF
$link-hover-color: darken($link-color, 20%)
$link-active-color: complement($link-color)
Slide 308
Slide 308 text
.flash-message
a
text-decoration: none
color: $link-color
&:visited
color: $link-color
&:hover
color: $link-hover-color
text-decoration: underline
&:active
color: $link-active-color
Styling links
.flash-message a {
text-decoration: none;
color: #89f2ff; }
.flash-message a:visited {
color: #89f2ff; }
.flash-message a:hover {
color: #23e7ff;
text-decoration: underline; }
.flash-message a:active {
color: #ff9689; }
$link-color: #89F2FF
$link-hover-color: darken($link-color, 20%)
$link-active-color: complement($link-color)
Compiled CSS
Slide 309
Slide 309 text
IE fixes
.flash-message
background: #f9f9f9 image-url("images/page.png")
+box-shadow(0 0 0 3px rgba(black, .5))
.ie &
+box-shadow(0 0 0 1px rgba(black, .2)) // adjust box-shadow
.ie7 &
border: 1px solid #e0e0e0 // use border in place of box-shadow
background: #f9f9f9 // just background color
Slide 310
Slide 310 text
IE fixes
.flash-message {
background: #f9f9f9 url('../images/icon/info.png?1315463945');
-moz-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5); }
.ie .flash-message {
-moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); }
.ie7 .flash-message {
border: 1px solid #e0e0e0;
background: #f9f9f9; }
.flash-message
background: #f9f9f9 image-url("images/page.png")
+box-shadow(0 0 0 3px rgba(black, .5))
.ie &
+box-shadow(0 0 0 1px rgba(black, .2)) // adjust box-shadow
.ie7 &
border: 1px solid #e0e0e0 // use border in place of box-shadow
background: #f9f9f9 // just background color
Compiled CSS
Slide 311
Slide 311 text
No content
Slide 312
Slide 312 text
WITH GREAT POWER
COMES GREAT RESPONSIBILITY...
Slide 313
Slide 313 text
Improper @mixin use can cause
redundant CSS declarations.
Slide 314
Slide 314 text
Improper @mixin use can cause
redundant CSS declarations.
Abusing @extend and deep
nesting will lead to needlessly
long selector strings.
Slide 315
Slide 315 text
No content
Slide 316
Slide 316 text
Learn more
theSassWay.com
compass-style.org
sass-lang.com
Slides?
bit.ly/sass-why
Questions?
hit me up… @beau