• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Compass, Sass, and the Enlightened CSS Developer
 

Compass, Sass, and the Enlightened CSS Developer

on

  • 6,882 views

Slides from RefreshOKC

Slides from RefreshOKC

Statistics

Views

Total Views
6,882
Views on SlideShare
6,430
Embed Views
452

Actions

Likes
22
Downloads
109
Comments
2

3 Embeds 452

http://makoto-tanaka.com 449
http://webcache.googleusercontent.com 2
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Compass, Sass, and the Enlightened CSS Developer Compass, Sass, and the Enlightened CSS Developer Presentation Transcript

    • 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> </tr> </table> </td> </tr> Nested tables FTW. </tr></table>
    • 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 :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
    • 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
    • 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
    • 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 reason.Like the one they had in France.Not a moment too soon.~ Ulysses Everett McGill
    • 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 color: #111 td.alt a color: #333
    • Nested rules - selectorstable.users Lo o k , Ma, tr n o braces td a color: #111 or semicolons td.alt a color: #333
    • 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
    • Nested rules - selectorstable.users tr td color: #111 &.alt color: #333 &:hover color: #666
    • Nested rules - selectorstable.users tr C ha nge this td color: #111 &.alt color: #333 &:hover color: #666
    • Nested rules - selectorstable.users tr C ha nge this td color: #111 &.alt you chang e these . . . an d color: #333 &:hover color: #666
    • 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: #666; border-size: 4px;}
    • 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
    • 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
    • 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
    • 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
    • Mixins
    • Mixins.avatar { padding: 2px; border: solid 1px #ddd; position: absolute; top: 5px; left: 5px;}p img { padding: 2px; border: solid 1px #ddd;}
    • 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)
    • 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)
    • 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)
    • Selector inheritance
    • Selector inheritance.flash { padding: 5px; border-width: 1px; font-weight: bold;}.error { color: #8a1f11; background: #fbe3e4;}.notice { color: #514721; background: #fff6bf;}
    • Selector inheritance.flash padding: 5px border-width: 1px font-weight: bold.error.flash color: #8a1f11 background: #fbe3e4.notice.flash color: #514721 background: #fff6bf
    • Selector inheritance.flash,.error,.notice { padding: 5px; border-width: 1px; font-weight: bold; }.error { color: #8a1f11; background: #fbe3e4; }.notice { color: #514721; background: #fff6bf; }
    • 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
    • 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 http requests
    • Imports@import reset.sass # _reset.sass@import typography.sass # _typography.sass@import layout.sass # _layout.sass
    • Imports@import reset.sass # _reset.sass@import typography.sass # _typography.sass@import layout.sass # _layout.sass Included at compile time - just one http request
    • 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", #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));}
    • 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));}
    • 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
    • Bring your favorite CSS Framework
    • 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>
    • 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>
    • 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)
    • Functions
    • Very. Powerful. Functions.
    • 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
    • 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
    • Who makes this syntactic sugar?
    • Sass and Compass
    • xtens io n s &C SS e co mpiler Sass and Compass
    • Patte xtens io n s & rns &C SS e plugins co mpiler Sass and Compass
    • ...like peas and carrots.
    • 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
    • A quick survey of Compass
    • Blueprint
    • Blueprint ★ Buttons ★ Link Icons ★ Colors ★ Liquid ★ Debug ★ Print ★ Fancy Type ★ Reset ★ Form ★ Rtl ★ Grid ★ Scaffolding ★ Interaction ★ Typography ★ Internet Explorer ★ Utilities
    • CSS3
    • 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
    • Image sprites
    • 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; }
    • URL helpers
    • 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;}
    • 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;}
    • URL helpersstylesheet-url($path)font-url($path)image-url($path)
    • Share your patterns
    • http://brandonmathis.com/projects/fancy-buttons/
    • @import "fancy-buttons"button,a.button +fancy-button(#2966a8)
    • compass-960
    • 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
    • compass-wordpress
    • 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
    • Announcing!compass-formalize
    • 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
    • Stats
    • 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 || --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- |
    • GETTHEBOOK.
    • Isn’t she Sassy, folks?GETTHEBOOK.
    • Save 40% and get early access! sass40
    • Save 40% and get early access! sass40Sadly, sass100 is not a valid code.
    • 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