COMPASS, SASS, AND THE ENLIGHTENED WEB                             WYNNNETHERLAND
whoami
+
or “Okie” in the localNative Oklahoman        vernacular.              Naturalized Texan
Like you, I work on the Interwebs.
... but my story begins in
theDARK AGES
Literally.
Literally.   this still works :brew install lynx
gopher://   anyone?
gopher://      anyone?    look it up, kids.
Flight of the Navigator
Flight of the Navigator technology from the future!
These were perilous times.
Full of strange magic.
<font>
<center>
<blink>
<table>  <tr>    <td valign=top>Remember this?</td>    <td>    <table>         <tr>           <td>And this?</td>         <...
Nested tables FTW.
JavaScript vs. JScript
Sometimes we’d hide these andupdate the page without a refresh, backwhen Ajax was something Momma used toclean the bathtub.
DOM level 0.
document.formName.inputName
Why am I sharing all this?
Consider it inoculation againstCURMUDGEONRY.
THAT’S THEWAY IT WAS ANDWE LIKED IT.
“GET OFF MY LAWN.” Nathan Smith Creator, 960.gs RefreshOKC headliner Reformed Curmudgeon
Back to our story
theRENAISSANCE
JavaScript Frameworks
CSS Frameworks
HTML5
CSS3
border-radius
border-image
www.zurb.com/playground/awesome-overlays
background-size
gradients
RGBA, HSL, HSLA colors
RGBA, HSL, HSLA colorsrgba (0,0,0,1) is the new black!
text-shadow
box-shadow
wordwrap
outline
outline
columns
@font-face
@font-face  means
@font-face       meansTypographic freedom!
Cool       New selectors
CSS3 selectors (and some golden oldies)          *                 ::first-letter       :enabled          E               ...
CSS3 selectors (and some golden oldies)          *                 ::first-letter       :enabled          E               ...
CSS3 selectors (and some golden oldies)          *                 ::first-letter                   :enabled          E   ...
This is not a talk about CSS
This is not a talk about CSSFollow @smashingmag for your CSS tips & tricks
I want to talk about
I want to talk about        REAL stylesheet innovation
I want to talk about
I want to talk about        HOW we write stylesheets
I want to talk about
I want to talk about     how we MAINTAIN stylesheets
I want to talk about
I want to talk about      how we SIMPLIFY stylesheets
Were gonna see a brave newworld where they run everybody awire and hook us all up to a grid.Yes, sir, a veritable age of r...
theAGE OF ENLIGHTENMENT
Sass
Syntax options
Syntax options - SCSS   Sassy CSS!table.users {  tr {    td {       background: #d1d1d;       a {         color: #111;    ...
Syntax options - Indented   I   whitespacetable.users  tr     td        background: #d1d1d        a          color: #111
Nested rules
Nested rules - selectorstable.users tr td a {color: #111}table.users tr.alt td a {color: #333}
Nested rules - selectorstable.users  tr     td        a          color: #111     td.alt        a          color: #333
Nested rules - selectorstable.users                Lo  o k , Ma,  tr                        n o braces     td        a    ...
Nested rules - selectorstable.users                Lo  o k , Ma,  tr                        n o braces     td        a    ...
Nested rules - selectorstable.users                Lo  o k , Ma,  tr                        n o braces     td        a    ...
Nested rules - selectorstable.users  tr     td        color: #111        &.alt          color: #333        &:hover        ...
Nested rules - selectorstable.users  tr                           C ha nge this     td        color: #111        &.alt    ...
Nested rules - selectorstable.users  tr                           C ha nge this     td        color: #111        &.alt    ...
Nested rules - properties.users  font:    size: 1.2em    style: italics    weight: bold
Variables
Variables.user {  background: #333;  border-size: 2px;}.owner {  background: #333;  border-size: 2px;}.admin {  background...
Variables!gray = #333!default_border = 2px.user  background: = !gray  border-size: = !default_border.owner  background: = ...
Variables!gray = #333!default_border = 2px.user  background: = !gray  border-size: = !default_border.owner  background: = ...
Variables!gray = #333!default_border = 2px.user  background: = !gray  border-size: = !default_border.owner                ...
Variables $font-apres:           Apres, Arial, sans-serif $dark-gray:            #1e1e1e !default $body-text:            #...
Mixins
Mixins.avatar {  padding: 2px;  border: solid 1px #ddd;  position: absolute;  top: 5px;  left: 5px;}p img {  padding: 2px;...
Mixins=frame(!padding_width = 2px, !border_color = #ddd)  padding = !padding_width  border:    width: 1px    style: solid ...
Mixins=frame(!padding_width = 2px, !border_color = #ddd)  padding = !padding_width  border:    width: 1px                 ...
Mixins=frame(!padding_width = 2px, !border_color = #ddd)  padding = !padding_width  border:    width: 1px                 ...
Selector inheritance
Selector inheritance.flash {  padding: 5px;  border-width: 1px;  font-weight: bold;}.error {  color: #8a1f11;  background:...
Selector inheritance.flash  padding: 5px  border-width: 1px  font-weight: bold.error.flash  color: #8a1f11  background: #f...
Selector inheritance.flash,.error,.notice { padding: 5px; border-width: 1px; font-weight: bold; }.error { color: #8a1f11; ...
Selector inheritance.flash,.error,.notice { padding: 5px; border-width: 1px; font-weight: bold; }.error { color: #8a1f11; ...
Imports
Imports@import url(/css/reset.css)@import url(/css/typography.css)@import url(/css/layout.css)
Imports@import url(/css/reset.css)@import url(/css/typography.css)@import url(/css/layout.css)    parent + 3 @imports = 4 ...
Imports@import reset.sass        #   _reset.sass@import typography.sass   #   _typography.sass@import layout.sass       # ...
Imports@import reset.sass          #   _reset.sass@import typography.sass     #   _typography.sass@import layout.sass     ...
Imports + Mixins
Imports + Mixins  Now it gets fun!
Compass CSS3 mixins@import compass/css3.sass.callout  +border-radius(5px)  +linear-gradient("left top", "left bottom", #ff...
Compass CSS3 mixins@import compass/css3.sass.callout  +border-radius(5px)  +linear-gradient("left top", "left bottom", #ff...
Compass CSS3 mixinscss3/border_radius.sasscss3/inline_block.sasscss3/opacity.sasscss3/text_shadow.sasscss3/box_shadow.sass...
Bring your favorite CSS Framework
A Blueprint example<div id=wrapper class="container">    <div id=content class="span-7 prepend-1">        <div id=main cla...
A Blueprint example<div id=wrapper class="container">    <div id=content class="span-7 prepend-1">        <div id=main cla...
A Blueprint example@import   blueprint/reset.sass@import   partials/base.sass@import   blueprint@import   blueprint/module...
Functions
Very. Powerful. Functions.
Sass 2.4 color functionshue(#cc3) => 60degsaturation(#cc3) => 60%lightness(#cc3) => 50%adjust-hue(#cc3, 20deg) => #9c3satu...
with alpha support!Sass 2.4 color functionsmix(rgba(51, 255, 51, 0.75), #f00) => rgba(178, 95, 19, 0.875)mix(rgba(51, 255,...
Who makes this syntactic sugar?
Sass and Compass
Upcoming SlideShare
Loading in...5
×

Compass, Sass, and the Enlightened CSS Developer

6,773

Published on

Slides from RefreshOKC

Published in: Design, Technology
2 Comments
22 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,773
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
116
Comments
2
Likes
22
Embeds 0
No embeds

No notes for slide

Compass, Sass, and the Enlightened CSS Developer

  1. 1. COMPASS, SASS, AND THE ENLIGHTENED WEB WYNNNETHERLAND
  2. 2. whoami
  3. 3. +
  4. 4. or “Okie” in the localNative Oklahoman vernacular. Naturalized Texan
  5. 5. Like you, I work on the Interwebs.
  6. 6. ... but my story begins in
  7. 7. theDARK AGES
  8. 8. Literally.
  9. 9. Literally. this still works :brew install lynx
  10. 10. gopher:// anyone?
  11. 11. gopher:// anyone? look it up, kids.
  12. 12. Flight of the Navigator
  13. 13. Flight of the Navigator technology from the future!
  14. 14. These were perilous times.
  15. 15. Full of strange magic.
  16. 16. <font>
  17. 17. <center>
  18. 18. <blink>
  19. 19. <table> <tr> <td valign=top>Remember this?</td> <td> <table> <tr> <td>And this?</td> </tr> </table> </td> </tr> Nested tables FTW. </tr></table>
  20. 20. Nested tables FTW.
  21. 21. JavaScript vs. JScript
  22. 22. Sometimes we’d hide these andupdate the page without a refresh, backwhen Ajax was something Momma used toclean the bathtub.
  23. 23. DOM level 0.
  24. 24. document.formName.inputName
  25. 25. Why am I sharing all this?
  26. 26. Consider it inoculation againstCURMUDGEONRY.
  27. 27. THAT’S THEWAY IT WAS ANDWE LIKED IT.
  28. 28. “GET OFF MY LAWN.” Nathan Smith Creator, 960.gs RefreshOKC headliner Reformed Curmudgeon
  29. 29. Back to our story
  30. 30. theRENAISSANCE
  31. 31. JavaScript Frameworks
  32. 32. CSS Frameworks
  33. 33. HTML5
  34. 34. CSS3
  35. 35. border-radius
  36. 36. border-image
  37. 37. www.zurb.com/playground/awesome-overlays
  38. 38. background-size
  39. 39. gradients
  40. 40. RGBA, HSL, HSLA colors
  41. 41. RGBA, HSL, HSLA colorsrgba (0,0,0,1) is the new black!
  42. 42. text-shadow
  43. 43. box-shadow
  44. 44. wordwrap
  45. 45. outline
  46. 46. outline
  47. 47. columns
  48. 48. @font-face
  49. 49. @font-face means
  50. 50. @font-face meansTypographic freedom!
  51. 51. Cool New selectors
  52. 52. CSS3 selectors (and some golden oldies) * ::first-letter :enabled E :first-line :disabled .class ::first-line :checked #id E[attribute^=value] E F E[attribute$=value] E > F E[attribute*=value] E + F E ~ F E[attribute] :rootE[attribute=value] :last-childE[attribute~=value] :only-childE[attribute|=value] :nth-child() :first-child :nth-last-child() :link :first-of-type :visited :last-of-type :lang() :only-of-type :before :nth-of-type() ::before :nth-last-of-type() :after :empty ::after :not() :first-letter :target
  53. 53. CSS3 selectors (and some golden oldies) * ::first-letter :enabled E :first-line :disabled .class ::first-line :checked #id E[attribute^=value] :header E F E[attribute$=value] E > F E[attribute*=value] E + F E ~ F E[attribute] :rootE[attribute=value] :last-childE[attribute~=value] :only-childE[attribute|=value] :nth-child() :first-child :nth-last-child() :link :first-of-type :visited :last-of-type :lang() :only-of-type :before :nth-of-type() ::before :nth-last-of-type() :after :empty ::after :not() :first-letter :target
  54. 54. CSS3 selectors (and some golden oldies) * ::first-letter :enabled E :first-line :disabled .class ::first-line :checked #id E[attribute^=value] :header E F E[attribute$=value] E > F E[attribute*=value] E + F E ~ F E[attribute] :root Steal this from jQuery, pleaseE[attribute=value] :last-childE[attribute~=value] :only-childE[attribute|=value] :nth-child() :first-child :nth-last-child() :link :first-of-type :visited :last-of-type :lang() :only-of-type :before :nth-of-type() ::before :nth-last-of-type() :after :empty ::after :not() :first-letter :target
  55. 55. This is not a talk about CSS
  56. 56. This is not a talk about CSSFollow @smashingmag for your CSS tips & tricks
  57. 57. I want to talk about
  58. 58. I want to talk about REAL stylesheet innovation
  59. 59. I want to talk about
  60. 60. I want to talk about HOW we write stylesheets
  61. 61. I want to talk about
  62. 62. I want to talk about how we MAINTAIN stylesheets
  63. 63. I want to talk about
  64. 64. I want to talk about how we SIMPLIFY stylesheets
  65. 65. Were gonna see a brave newworld where they run everybody awire and hook us all up to a grid.Yes, sir, a veritable age of reason.Like the one they had in France.Not a moment too soon.~ Ulysses Everett McGill
  66. 66. theAGE OF ENLIGHTENMENT
  67. 67. Sass
  68. 68. Syntax options
  69. 69. Syntax options - SCSS Sassy CSS!table.users { tr { td { background: #d1d1d; a { color: #111; } } }}
  70. 70. Syntax options - Indented I whitespacetable.users tr td background: #d1d1d a color: #111
  71. 71. Nested rules
  72. 72. Nested rules - selectorstable.users tr td a {color: #111}table.users tr.alt td a {color: #333}
  73. 73. Nested rules - selectorstable.users tr td a color: #111 td.alt a color: #333
  74. 74. Nested rules - selectorstable.users Lo o k , Ma, tr n o braces td a color: #111 td.alt a color: #333
  75. 75. Nested rules - selectorstable.users Lo o k , Ma, tr n o braces td a color: #111 or semicolons td.alt a color: #333
  76. 76. Nested rules - selectorstable.users Lo o k , Ma, tr n o braces td a color: #111 or semicolons td.alt a color: #333 But you can use both if you wanna
  77. 77. Nested rules - selectorstable.users tr td color: #111 &.alt color: #333 &:hover color: #666
  78. 78. Nested rules - selectorstable.users tr C ha nge this td color: #111 &.alt color: #333 &:hover color: #666
  79. 79. Nested rules - selectorstable.users tr C ha nge this td color: #111 &.alt you chang e these . . . an d color: #333 &:hover color: #666
  80. 80. Nested rules - properties.users font: size: 1.2em style: italics weight: bold
  81. 81. Variables
  82. 82. Variables.user { background: #333; border-size: 2px;}.owner { background: #333; border-size: 2px;}.admin { background: #666; border-size: 4px;}
  83. 83. Variables!gray = #333!default_border = 2px.user background: = !gray border-size: = !default_border.owner background: = !gray border-size: = !default_border.admin background: = !gray + #333 border-size: = !default_border + 2px
  84. 84. Variables!gray = #333!default_border = 2px.user background: = !gray border-size: = !default_border.owner background: = !gray border-size: = !default_border.admin Eve n ma t h ! background: = !gray + #333 border-size: = !default_border + 2px
  85. 85. Variables!gray = #333!default_border = 2px.user background: = !gray border-size: = !default_border.owner r mixing! background: = !gray border-size: = !default_border and colo.admin Ev e n ma t h ! background: = !gray + #333 border-size: = !default_border + 2px
  86. 86. Variables $font-apres: Apres, Arial, sans-serif $dark-gray: #1e1e1e !default $body-text: #bbb !default $strong-text: lighten($body-text, 40%) $muted-text: darken($body-text, 40%) $content-background: #fff $content-text: #555 $content-border: #ccc $form-background: rgba(0, 0, 0, .5) $blue-primary: #6095c2 $blue-secondary: #1742db $green-primary: #64b900 $green-secondary: #298527 $pink-primary: #f44ab7
  87. 87. Mixins
  88. 88. Mixins.avatar { padding: 2px; border: solid 1px #ddd; position: absolute; top: 5px; left: 5px;}p img { padding: 2px; border: solid 1px #ddd;}
  89. 89. Mixins=frame(!padding_width = 2px, !border_color = #ddd) padding = !padding_width border: width: 1px style: solid color = !border_color.avatar +frame position: absolute top: 5px left: 5pxp img +frame(1px, #ccc)
  90. 90. Mixins=frame(!padding_width = 2px, !border_color = #ddd) padding = !padding_width border: width: 1px defines t he mixin style: solid color = !border_color.avatar +frame position: absolute top: 5px left: 5pxp img +frame(1px, #ccc)
  91. 91. Mixins=frame(!padding_width = 2px, !border_color = #ddd) padding = !padding_width border: width: 1px defines t he mixin style: solid color = !border_color.avatar +frame position: absolute top: 5px mixes in t h e rule s left: 5pxp img +frame(1px, #ccc)
  92. 92. Selector inheritance
  93. 93. Selector inheritance.flash { padding: 5px; border-width: 1px; font-weight: bold;}.error { color: #8a1f11; background: #fbe3e4;}.notice { color: #514721; background: #fff6bf;}
  94. 94. Selector inheritance.flash padding: 5px border-width: 1px font-weight: bold.error.flash color: #8a1f11 background: #fbe3e4.notice.flash color: #514721 background: #fff6bf
  95. 95. Selector inheritance.flash,.error,.notice { padding: 5px; border-width: 1px; font-weight: bold; }.error { color: #8a1f11; background: #fbe3e4; }.notice { color: #514721; background: #fff6bf; }
  96. 96. Selector inheritance.flash,.error,.notice { padding: 5px; border-width: 1px; font-weight: bold; }.error { color: #8a1f11; background: #fbe3e4; }.notice { color: #514721; background: #fff6bf; } now we can use a single class in our markup
  97. 97. Imports
  98. 98. Imports@import url(/css/reset.css)@import url(/css/typography.css)@import url(/css/layout.css)
  99. 99. Imports@import url(/css/reset.css)@import url(/css/typography.css)@import url(/css/layout.css) parent + 3 @imports = 4 http requests
  100. 100. Imports@import reset.sass # _reset.sass@import typography.sass # _typography.sass@import layout.sass # _layout.sass
  101. 101. Imports@import reset.sass # _reset.sass@import typography.sass # _typography.sass@import layout.sass # _layout.sass Included at compile time - just one http request
  102. 102. Imports + Mixins
  103. 103. Imports + Mixins Now it gets fun!
  104. 104. Compass CSS3 mixins@import compass/css3.sass.callout +border-radius(5px) +linear-gradient("left top", "left bottom", #fff, #ddd).callout { -moz-border-radius: 5px; -webkit-border-radius: 5px; -border-radius: 5px; background-image: -moz-linear-gradient(top, bottom, from(#fff), to(#ddd)); background-image: -webkit-gradient(linear, left top, left bottom,color-stop(0.00, #fff), color-stop(1.00, #ddd));}
  105. 105. Compass CSS3 mixins@import compass/css3.sass.callout +border-radius(5px) +linear-gradient("left top", "left bottom", #fff, #ddd).callout { very different syntax -moz-border-radius: 5px; -webkit-border-radius: 5px; -border-radius: 5px; background-image: -moz-linear-gradient(top, bottom, from(#fff), to(#ddd)); background-image: -webkit-gradient(linear, left top, left bottom,color-stop(0.00, #fff), color-stop(1.00, #ddd));}
  106. 106. Compass CSS3 mixinscss3/border_radius.sasscss3/inline_block.sasscss3/opacity.sasscss3/text_shadow.sasscss3/box_shadow.sasscss3/columns.sasscss3/box_sizing.sasscss3/gradient.sasscss3/background_clip.sasscss3/background_origin.sasscss3/background_size.sasscss3/font_face.sasscss3/transform.sasscss3/transition.sass
  107. 107. Bring your favorite CSS Framework
  108. 108. A Blueprint example<div id=wrapper class="container"> <div id=content class="span-7 prepend-1"> <div id=main class="container"> ... </div> <div id=featured class="span-5 last"> ... </div> </div> <div id=sidebar class="span-3 append-1 last"> ... </div></div>
  109. 109. A Blueprint example<div id=wrapper class="container"> <div id=content class="span-7 prepend-1"> <div id=main class="container"> boo ... </div> <div id=featured class="span-5 last"> ... </div> </div> <div id=sidebar class="span-3 append-1 last"> ... </div></div>
  110. 110. A Blueprint example@import blueprint/reset.sass@import partials/base.sass@import blueprint@import blueprint/modules/scaffolding.sass#wrapper +container #content +column(7) +append(1) #featured +column(5, true) #sidebar +column(3, true) +prepend(1)
  111. 111. Functions
  112. 112. Very. Powerful. Functions.
  113. 113. Sass 2.4 color functionshue(#cc3) => 60degsaturation(#cc3) => 60%lightness(#cc3) => 50%adjust-hue(#cc3, 20deg) => #9c3saturate(#cc3, 10%) => #d9d926desaturate(#cc3, 10%) => #bfbf40lighten(#cc3, 10%) => #d6d65cdarken(#cc3, 10%) => #a3a329grayscale(#cc3) => desaturate(#cc3, 100%) = #808080complement(#cc3) => adjust-hue(#cc3, 180deg) = #33cmix(#cc3, #00f) => #e56619mix(#cc3, #00f, 10%) => #f91405mix(#cc3, #00f, 90%) => #d1b72dhttp://nex-3.com/posts/89-powerful-color-manipulation-with-sass
  114. 114. with alpha support!Sass 2.4 color functionsmix(rgba(51, 255, 51, 0.75), #f00) => rgba(178, 95, 19, 0.875)mix(rgba(51, 255, 51, 0.90), #f00) => rgba(163, 114, 22, 0.95)alpha(rgba(51, 255, 51, 0.75)) => 0.75opacity(rgba(51, 255, 51, 0.75)) => 0.75opacify(rgba(51, 255, 51, 0.75), 0.1) => rgba(51, 255, 51, 0.85)fade-in(rgba(51, 255, 51, 0.75), 0.1) => rgba(51, 255, 51, 0.85)transparentize(rgba(51, 255, 51, 0.75), 0.1) => rgba(51, 255, 51, 0.65)fade-out(rgba(51, 255, 51, 0.75), 0.1) => rgba(51, 255, 51, 0.65)http://nex-3.com/posts/89-powerful-color-manipulation-with-sass
  115. 115. Who makes this syntactic sugar?
  116. 116. Sass and Compass
  117. 117. xtens io n s &C SS e co mpiler Sass and Compass
  118. 118. Patte xtens io n s & rns &C SS e plugins co mpiler Sass and Compass
  119. 119. ...like peas and carrots.
  120. 120. Sass and Compass$ sudo gem install haml$ sudo gem install compass --preCALL IT FROM THE COMMAND LINE$ sass screen.sass screen.cssOR COMPASS-IZE YOUR PROJECT$ compass --rails -f blueprintOR WATCH A FOLDER$ compass --watch
  121. 121. A quick survey of Compass
  122. 122. Blueprint
  123. 123. Blueprint ★ Buttons ★ Link Icons ★ Colors ★ Liquid ★ Debug ★ Print ★ Fancy Type ★ Reset ★ Form ★ Rtl ★ Grid ★ Scaffolding ★ Interaction ★ Typography ★ Internet Explorer ★ Utilities
  124. 124. CSS3
  125. 125. CSS3 ★ Appearance ★ Gradient ★ Background Clip ★ Images ★ Background Origin ★ Inline Block ★ Background Size ★ Opacity ★ Border Radius ★ Shared Utilities ★ Box ★ Text Shadow ★ Box Shadow ★ Transform ★ Box Sizing ★ Transform (legacy) ★ CSS3 Pie ★ Transition ★ Columns ★ Font Face
  126. 126. Image sprites
  127. 127. I like the Sprite in you Image sprites ® 1. @import "icon/*.png"@import "icon/*.png".actions 2. public/images/icon/new.png public/images/icon/edit.png .new public/images/icon/save.png +icon-sprite(new) public/images/icon/delete.png .edit +icon-sprite(edit) .save .icon-sprite, +icon-sprite(save) .actions .new, .delete .actions .edit, +icon-sprite(delete) .actions .save, .actions .delete { background: url(/images/icon-34fe0604ab.png) no-repeat; } .actions .new { background-position: 0 -64px; } .actions .edit { background-position: 0 -32px; } .actions .save { background-position: 0 -96px; } 3. .actions .delete { background-position: 0 0; }
  128. 128. URL helpers
  129. 129. URL helpers#nav background: image-url("nav_bg.png") repeat-x top centerDEVELOPMENT#nav { background: url("/images/nav_bg.png") repeat-x top center;}PRODUCTION#nav { background: url("http://assets.example.com/images/nav_bg.png")repeat-x top center;}
  130. 130. URL helpers#nav background: image-url("nav_bg.png") repeat-x top centerDEVELOPMENT#nav { background: url("/images/nav_bg.png") repeat-x top center;} elopment, ths for dev relative paPRODUCTION production a bsolute for#nav { background: url("http://assets.example.com/images/nav_bg.png")repeat-x top center;}
  131. 131. URL helpersstylesheet-url($path)font-url($path)image-url($path)
  132. 132. Share your patterns
  133. 133. http://brandonmathis.com/projects/fancy-buttons/
  134. 134. @import "fancy-buttons"button,a.button +fancy-button(#2966a8)
  135. 135. compass-960
  136. 136. Compass 960 $ninesixty-columns: 16 #wrap +grid-container #left-nav +alpha +grid(5) #main-content +grid-prefix(1) +grid(10) +omegahttps://github.com/chriseppstein/compass-960-plugin
  137. 137. compass-wordpress
  138. 138. shameless plugCompass and WordPress$ gem install compass-wordpressCRANK OUT A NEW SASS-Y WORDPRESS THEME$ compass -r compass-wordpress -f wordpress  -p thematic  --sass-dir=sass --css-dir=css -s compressed my_awesome_themeAUTOCOMPILE YOUR CHANGES$ compass --watch
  139. 139. Announcing!compass-formalize
  140. 140. Compass and FormalizeINSTALL THE GEM$ gem install compass_formalizeCREATE THE COMPASS PROJECT$ compass create my-great-app -r compass_formalize$ cd my-great-appAPPLY THE PATTERN$ compass install formalize/jquery
  141. 141. Stats
  142. 142. Stats| --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- || Filename | Rules | Properties | Mixins Defs | Mixins Used | CSS Rules | CSS Properties || --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- || app/stylesheets/_960.sass | 198 | 141 | 0 | 0 | -- | -- || app/stylesheets/_animation.sass | 2 | 2 | 0 | 0 | -- | -- || app/stylesheets/application.sass | 268 | 607 | 0 | 33 | 1131 | 3684 || app/stylesheets/_data_table.sass | 39 | 66 | 0 | 4 | -- | -- || app/stylesheets/_datepicker.sass | 125 | 242 | 0 | 0 | -- | -- || app/stylesheets/_formalize.sass | 82 | 78 | 0 | 4 | -- | -- || app/stylesheets/_forms.sass | 227 | 242 | 0 | 21 | -- | -- || app/stylesheets/ie.sass | 0 | 0 | 0 | 0 | 0 | 0 || app/stylesheets/_jscrollpane.sass | 20 | 43 | 0 | 0 | -- | -- || app/stylesheets/_prettify.sass | 16 | 16 | 0 | 0 | -- | -- || app/stylesheets/print.sass | 0 | 0 | 0 | 0 | 0 | 0 || app/stylesheets/_reset.sass | 111 | 18 | 0 | 0 | -- | -- || app/stylesheets/_text.sass | 27 | 18 | 0 | 0 | -- | -- || app/stylesheets/_tiptip.sass | 19 | 40 | 0 | 0 | -- | -- || app/stylesheets/_util.sass | 56 | 54 | 0 | 0 | -- | -- || app/stylesheets/_vars.sass | 0 | 6 | 2 | 0 | -- | -- || --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- || Total (16 files): | 1190 | 1573 | 2 | 62 | 1131 | 3684 || --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- |
  143. 143. GETTHEBOOK.
  144. 144. Isn’t she Sassy, folks?GETTHEBOOK.
  145. 145. Save 40% and get early access! sass40
  146. 146. Save 40% and get early access! sass40Sadly, sass100 is not a valid code.
  147. 147. Resources an d thanks for having me!sass-lang.combeta.compass-style.org slides!wynn.fm/okc gra b t he blog: wynnnetherland.com twitter: @pengwynn email: wynn@hp.com linkedin.com/in/netherland
  1. A particular slide catching your eye?

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

×