Preparation H is a hemorrhoid creme, and it’s the title of this presentation
CSS is a pain in the assBecause at one point in time we’ve all thought that CSS is a pain in the ass
SASS & Compass will make writing CSS easier                                But first this is what people think about CSSTha...
CSS makes me want to kill myself                                                            @mullets4lyfe                 ...
suicidal thoughts                                   CSS makes me want to kill myself                                      ...
CSS sucks!The conversation around CSS goes something like this
CSS sucks!No it doesn’t! You suck at using it.
CSS sucks! No it doesn’t! You suck at using it.No I don’t, browsers don’t support it.
CSS sucks! No it doesn’t! You suck at using it.No I don’t, browsers don’t support it.                Well.
CSS sucks!                      No it doesn’t! You suck at using it.                  No I don’t, browsers don’t support i...
1. Understand a little more about CSS                   2. Have a go at SASS & CompassHopefully at the end of these slides...
.selector {                                       property: value;                                     }So we’re on the sa...
.selector {                                     property: value;                                   }We use selectors to ta...
.selector {                                       property: value;                                     }We use properties ...
.selector {                                         property: value;                                       }A CSS class is...
1. Styles may not work                              Many properties depend on the display valueHas anyone ever added some ...
span	  {                  	  	  height:	  100px;                  }This won’t work
span	  {                      	  	  display:	  inline; ‹ from the browser’s stylesheet                      	  	  height:	...
span	  {                      	  	  display:	  block;                      	  	  height:	  100px;                      }If...
div	  {                  from the browser’s stylesheet ›      	  	  position:	  static;                                   ...
div	  {                                                                              	  	  position:	  relative;          ...
2. Values affect other values                                     The browser computes a lot of stuffThe browser computes ...
body	  {                       	  	  font-­‐size:	  12px;                       }                       div	  {           ...
body	  {                        	  	  font-­‐size:	  12px;                        }                        div	  {        ...
body	  {                        	  	  font-­‐size:	  12px;                        }                        div	  {        ...
span	  {                       	  	  display:	  inline;              calculates to › block                       	  	  flo...
3. The total element size is computed                              You may have heard of the box model debacleThe browser ...
div	  {                  	  	  width:	  100px;           the width on screen ›   100px                  }If you have a DIV...
div	  {                 	  	  width:	  100px;         the width on screen ›                    120px                 	  	 ...
div	  {                 	  	  width:	  100px;         the width on screen ›                   122px                 	  	  ...
4. there’re only two ways to flow                 4. Elements belong to a position                                       F...
<div>Top</div>            <div>Middle</div>            <div>Bottom</div>                                                  ...
<div>Top</div>            <div	  class="blue">Middle</div>            <div>Bottom</div>                   Top             ...
<div>Top</div>              <div	  class="blue">Middle</div>              <div>Bottom</div>                   Top         ...
<div>Top</div>            <div	  class="blue">Middle</div>            <div>Bottom</div>                                   ...
<div>Top</div>            <div	  class="blue">Middle</div>            <div>Bottom</div>                                   ...
<div>Top</div>            <div	  class="blue">Middle</div>            <div>Bottom</div>                                 To...
<div>Top</div>            <div	  class="blue">Middle</div>            <div>Bottom</div>                                   ...
<div>Top</div>            <div	  class="blue">Middle</div>            <div>Bottom</div>                                   ...
5. Layout affects browser calculation                 5. browsers miscalculate                         It’s the browser ca...
<div	  class="parent">                     	  	  <div	  class="child"></div>                     </div>                   ...
<div	  class="parent">                      	  	  <div	  class="child"></div>                      </div>                 ...
<div	  class="parent">                      	  	  <div	  class="child"></div>                      </div>                 ...
1. Styles may not necessarily work                                        Properties can “toggle” other properties on and ...
CSS3 will fix most of that stuff                             But vendors implement the fixes inconsistentlyCSS3 will fix most...
Now a short tangent. Here I am back in 2000. I have my lap top. I’m feeling cool. I’m wearing sandals and socks
When I write my web app, I decide what browsers I’ll support
function	  listen(fn){                                                            	   //	  I	  want	  to	  add	  multiple	...
My JavaScriptI have to make sure it works in all browsers, likewise I have to educate my colleagues on the custom function...
JavaScript LibraryWhen JavaScript libraries became popular, I could depend on the library to take are of browser discrepan...
CSS preprocessorCSS preprocessors, and specifically Compass, are the same idea. Let them worry about browser differences
SASS is a CSS preprocessor                                     CSS will no longer be a long stringVariables have been disc...
gem install sassYou need Ruby, you can install SASS with the command prompt or through terminal
.box	  {}                                                .box	  .content	  {}                                             ...
.box	  {                 	  	  .content	  {                 	  	  	  	  p	  {                 	  	  	  	  	  	  a	  {}    ...
a:link	  {                                              	  	  color:	  blue;                                              ...
a	  {         	  	  color:	  blue;         	  	           	  	  &:visited	  {         	  	  	  	  color:	  purple;        ...
a	  {          	  	  color:	  blue;          	  	            	  	  &:visited	  {          	  	  	  	  color:	  purple;    ...
$width:	  1000px;              .container	  {	                	  	  width:	  $width;	                }                    ...
$width:	  1000px;             .container	  {	               	  	  width:	  $width;	               }                       ...
@mixin	  text	  {                	  	  color:	  #000;	  	                  	  	  font-­‐size:	  12px;                }    ...
@mixin	  text($color:	  #000)	  {       	  	  color:	  $color;	  	         	  	  font-­‐size:	  12px;       }       .box	 ...
$color:	  blue;     p	  {	       	  	  color:	  darken($color,	  10%);     	  	  &.disabled	  {                           ...
.box	  {	                 	  	  color:	  #000;               	  	  width:	  100px;               }               .big-­‐bo...
$color:	  blue;            p	  {	              	  	  @if	  $color	  ==	  blue	  {            	  	  	  	  color:	  blue;   ...
@for	  $i	  from	  1	  through	  3	  {         	  	  .item-­‐#{$i}	  {	           	  	  	  	  width:	  10px	  *	  $i;	    ...
@mixin	  round-­‐corners($x)	  {     	  	  @if	  $x	  >	  3px	  {     	   	   @warn	  "Thats	  too	  round!";     	  	  } ...
$	  sass	  -­‐i                >>	  1px	  +	  1px	  +	  1px                3px                                            ...
compass is a collection of mixins                                              http://compass-style.orgCompass is a collec...
gem install compassInstall Compass the same way
compass create ‹myproject›CD to your application directory and create your Compass project
$blue:	  #0089B3;         a	  {	           	  	  color:	  $blue;         	  	           	  	  &:hover	  {         	  	  	 ...
a	  {                   	  	  color:	  #0089b3;                   }                   a:hover	  {                   	  	  ...
compass watch                                    watches your .scss files for changesRun this command to have Compass autom...
.box	  {	                                       	  	  @include	  border-­‐radius(10px);                                   ...
.box	  {	                 	  	  @include	  background-­‐image(linear-­‐gradient(red,	  white,	  blue));               }   ...
$blue	  =	  #0089B3;         a	  {	           	  	  @include	  link-­‐colors(	           	  	  	  	  $blue,	           	  ...
ul	  {	                      	  	  @include	  pretty-­‐bullets("bullet.png");                    }                        ...
<body>          	  	  <div	  id="root">          	  	  	  	  <div	  id="root_footer"></div>          	  	  </div>         ...
compass will handle the vendor stuff                     output stylesNotice I haven’t shown you much CSS, because you don...
it will output errorsAnd like any compiled language, it will output errors if you’ve made some syntax mistakes
gem update sass                                  gem update compassBest of all if there are any updates to CSS properties,...
Thanks!follow me on twitter @jefweg
Upcoming SlideShare
Loading in …5
×

CSS, SASS & Compass at WDCNZ

4,215 views
4,093 views

Published on

"CSS sucks! Can we please go back to intuitive tables?" - Anonymous developer

"Why does CSS make me want to kill myself? How do I make it OBEY me?" - Anonymous aspiring dictator

"I'm having a bad day. CSS ate my brains." - Anonymous zombie

CSS may seem unreliable, but actually it's just a bit dumb. We'll take a look at the dumbest bits of CSS, and we'll check out CSS's optional, shiny new brain, SASS and Compass.

Published in: Technology, Education
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,215
On SlideShare
0
From Embeds
0
Number of Embeds
583
Actions
Shares
0
Downloads
33
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

CSS, SASS & Compass at WDCNZ

  1. 1. Preparation H is a hemorrhoid creme, and it’s the title of this presentation
  2. 2. CSS is a pain in the assBecause at one point in time we’ve all thought that CSS is a pain in the ass
  3. 3. SASS & Compass will make writing CSS easier But first this is what people think about CSSThat may be true, but it’s getting better. CSS preprocessors will help you write CSS, but before we jump in here’s what peoplethink of CSS
  4. 4. CSS makes me want to kill myself @mullets4lyfe Mastering CSS is like mastering throwing shit into a fan @hatianminera CSS sucks! Can we please go back to intuitive tables? @delainanicole CSS is fun. You just need to be in the right mood & have patience. Bit like anal sex @darwoodster I fucking hate CSS. strait up, going to kill its children @clearasconcrete God I hate CSS. Its not proper development, is it? @fergalleon Im going through all nine circles of CSS hell @gijsdekoningThese are all within the last week or two. CSS is still hard today, for everyone
  5. 5. suicidal thoughts CSS makes me want to kill myself @mullets4lyfe Mastering CSS is like mastering throwing shit into a fan @hatianminera CSS sucks! Can we please go back to intuitive tables? @delainanicole CSS is fun. You just need to be in the right mood & have patience. Bit like anal sex @darwoodster I fucking hate CSS. strait up, going to kill its children @clearasconcrete God I hate CSS. Its not proper development, is it? @fergalleon Im going through all nine circles of CSS hell @gijsdekoning everlasting divine punishmentMost comments were negative
  6. 6. CSS sucks!The conversation around CSS goes something like this
  7. 7. CSS sucks!No it doesn’t! You suck at using it.
  8. 8. CSS sucks! No it doesn’t! You suck at using it.No I don’t, browsers don’t support it.
  9. 9. CSS sucks! No it doesn’t! You suck at using it.No I don’t, browsers don’t support it. Well.
  10. 10. CSS sucks! No it doesn’t! You suck at using it. No I don’t, browsers don’t support it. It’s Microsoft’s fault.It’s not really Microsoft’s fault, the way we learn how to use CSS is a bit weird
  11. 11. 1. Understand a little more about CSS 2. Have a go at SASS & CompassHopefully at the end of these slides, you’ll feel better about CSS, and you’ll give SASS & Compass a try
  12. 12. .selector { property: value; }So we’re on the same page, here’s the terminology. This is a CSS class
  13. 13. .selector { property: value; }We use selectors to target HTML elements
  14. 14. .selector { property: value; }We use properties to apply styles. There are over 150 properties in CSS2
  15. 15. .selector { property: value; }A CSS class is a collection of property value pairs
  16. 16. 1. Styles may not work Many properties depend on the display valueHas anyone ever added some styles, only to refresh the browser to see nothing change? It’s probably because the element has thewrong display value
  17. 17. span  {    height:  100px; }This won’t work
  18. 18. span  {    display:  inline; ‹ from the browser’s stylesheet    height:  100px; }SPANS inherit a display value of inline from the browser’s stylesheet
  19. 19. span  {    display:  block;    height:  100px; }If you override that value, and make the SPAN a block, it will work
  20. 20. div  { from the browser’s stylesheet ›    position:  static;    top:  10px; }Likewise if you add a property of top, it won’t work
  21. 21. div  {    position:  relative;    top:  10px; }If you change the position of the DIV from static to relative, it will work
  22. 22. 2. Values affect other values The browser computes a lot of stuffThe browser computes every value that is not in pixels when your stylesheet loads
  23. 23. body  {    font-­‐size:  12px; } div  {    font-­‐size:  2em; } <body>    <div>        <div></div>    </div> </body>So if we have this HTML & CSS
  24. 24. body  {    font-­‐size:  12px; } div  {    font-­‐size:  2em; } <body>    <div>        <div></div> calculates to › (12px  x  2)  =  24px    </div> </body>This DIV will have a font-size of 24px
  25. 25. body  {    font-­‐size:  12px; } div  {    font-­‐size:  2em; } <body>    <div>        <div></div> calculates to › (24px  x  2)  =  48px    </div> </body>This DIV will have a font-size of 48px. Often when a browser computes a value, it uses the parent’s value as a reference
  26. 26. span  {    display:  inline; calculates to › block    float:  left; }Likewise if I float an element, the browser will compute the display value as block. That’s kind of important to know
  27. 27. 3. The total element size is computed You may have heard of the box model debacleThe browser computes a lot of stuff, it’s true
  28. 28. div  {    width:  100px; the width on screen › 100px }If you have a DIV with a width of 100px, it’s correct when you view it
  29. 29. div  {    width:  100px; the width on screen › 120px    padding:  10px; }If you add padding, what you see on screen when you view it will actually be 100px + 10px + 10px
  30. 30. div  {    width:  100px; the width on screen › 122px    padding:  10px;    border:  1px; }Likewise if you also add a border, the width you see on screen is 100px + 10px + 10px + 1px + 1px
  31. 31. 4. there’re only two ways to flow 4. Elements belong to a position Float and position disrupt the flowFloat and position are the only ways to change layout in CSS 2, which is sad, because they’re not very good at their jobs
  32. 32. <div>Top</div> <div>Middle</div> <div>Bottom</div> Top Middle BottomLet’s say I have this HTML and it generates the boxes on the right. They belong in the same flow, appearing in sequence one afterthe other as I would expect
  33. 33. <div>Top</div> <div  class="blue">Middle</div> <div>Bottom</div> Top Middle BottomI’ll make one blue
  34. 34. <div>Top</div> <div  class="blue">Middle</div> <div>Bottom</div> Top .blue  {    float:  left; } Middle BottomAnd I’ll float it
  35. 35. <div>Top</div> <div  class="blue">Middle</div> <div>Bottom</div> Top .blue  {    float:  left; } Middle BottomThe bottom DIV slides up, as if the blue DIV isn’t even there. Floating puts elements “above and below” of each other, instead of“side by side”
  36. 36. <div>Top</div> <div  class="blue">Middle</div> <div>Bottom</div> Top .blue  {    float:  left; } Middle BottomContent from other elements will not hide beneath floating elements
  37. 37. <div>Top</div> <div  class="blue">Middle</div> <div>Bottom</div> Top .blue  {    float:  left; } BottomNote that floating does not affect how other boxes are drawn
  38. 38. <div>Top</div> <div  class="blue">Middle</div> <div>Bottom</div> Top .blue  {    position:  absolute; } Middle BottomPositioning is the same as floating, except content from other DIVs will hide underneath
  39. 39. <div>Top</div> <div  class="blue">Middle</div> <div>Bottom</div> Middle Top .blue  {    position:  absolute;    top:  0px;    left:  0px; Bottom }And you can also add other properties, like top, left, right, bottom and z-index
  40. 40. 5. Layout affects browser calculation 5. browsers miscalculate It’s the browser calculation that makes CSS painfulWhen you use float or position, it changes the way the browser will calculate surrounding DIVs
  41. 41. <div  class="parent">    <div  class="child"></div> </div> .parent  {    height:  auto; ‹ from the browser’s stylesheet } .child  {    height:  auto; }Let’s say I have this HTML and CSS
  42. 42. <div  class="parent">    <div  class="child"></div> </div> .parent  {    height:  auto; parent height is › 100px } .child  {    height:  100px; }If I give the child of 100px, the parent DIV will have a height of 100px. The browser uses child elements to calculate the heightand width of a parent element
  43. 43. <div  class="parent">    <div  class="child"></div> </div> .parent  {    height:  auto; parent height is › 0px } .child  {    height:  100px;    float:  left; }The parent will no longer use floated child elements to calculate its height, so as far as the browser is concerned, the parent DIVis empty
  44. 44. 1. Styles may not necessarily work Properties can “toggle” other properties on and off 2. Values affect other values The browser calculates a lot of stuff when your stylesheet loads 3. The total element size is computed The box model can be a little confusing 4. Elements belong to a flow Float and position affect the flow 5. Layout affects browser calculation This makes CSS pretty painfulCSS is still hard today, and it’s mostly because of browser calculations
  45. 45. CSS3 will fix most of that stuff But vendors implement the fixes inconsistentlyCSS3 will fix most of those issues, but vendors implement the fixes differently and at different times
  46. 46. Now a short tangent. Here I am back in 2000. I have my lap top. I’m feeling cool. I’m wearing sandals and socks
  47. 47. When I write my web app, I decide what browsers I’ll support
  48. 48. function  listen(fn){   //  I  want  to  add  multiple  event  handlers } function  grab(id){   //  I  want  to  grab  an  element  from  the  DOM } function  update(elm){   //  I  want  to  update  the  innerHTML  of  an  element }Remember JavaScript before libraries? You need to write custom functions yourself for basic tasks
  49. 49. My JavaScriptI have to make sure it works in all browsers, likewise I have to educate my colleagues on the custom functions I’ve written. Hardstuff
  50. 50. JavaScript LibraryWhen JavaScript libraries became popular, I could depend on the library to take are of browser discrepancies. They created a basefor all developers to work from, and your experience working in a library could transfer from job to job
  51. 51. CSS preprocessorCSS preprocessors, and specifically Compass, are the same idea. Let them worry about browser differences
  52. 52. SASS is a CSS preprocessor CSS will no longer be a long stringVariables have been discussed for a decade. Why wait for browsers to implement them? The future of CSS is moving towardsbeing a more programmatic language. SASS is the preprocessor we’ll look at now
  53. 53. gem install sassYou need Ruby, you can install SASS with the command prompt or through terminal
  54. 54. .box  {} .box  .content  {} .box  .content  p  {} .box  .content  p  a  {}If you write CSS for sites you end up duplicating classes. There is no standard structure for a CSS file, it’s up to the developer tocreate one
  55. 55. .box  {    .content  {        p  {            a  {} nest selectors        }    } }A CSS preprocessor will let you nest selectors, letting you group your CSS classes together
  56. 56. a:link  {    color:  blue; } a:visited  {    color:  purple; } a:active  {    color:  blue; } a:hover  {    text-­‐decoration:  underline; } a.red  {    color:  red; }This is pretty common in CSS, marking each pseudo element
  57. 57. a  {    color:  blue;        &:visited  {        color:  purple;    }        &:active  {        color:  blue;    } parent selectors    &:hover  {        text-­‐decoration:  underline;    }    &.red  {        color:  red;    } }You can use parent selectors to add pseudo elements and classes to your HTML elements
  58. 58. a  {    color:  blue;        &:visited  {        color:  purple;    }        &:active  {        color:  blue;    } parent selectors    &:hover  {        text-­‐decoration:  underline;    }    &.red  {        color:  red;    } }So this would output CSS with an A link and a class of red
  59. 59. $width:  1000px; .container  {      width:  $width;   } variables .column  {      width:  $width;   }You can use variables like any other programming language
  60. 60. $width:  1000px; .container  {      width:  $width;   } math .column  {      width:  $width  /  2;   }You can even use math
  61. 61. @mixin  text  {    color:  #000;        font-­‐size:  12px; } .box  {      @include  text; mixins } .baz  {      @include  text; }You can use mixins to create a template of styles, and use them in classes throughout your document
  62. 62. @mixin  text($color:  #000)  {    color:  $color;        font-­‐size:  12px; } .box  {      @include  text(#F00); arguments } .baz  {      @include  text; }Mixins can have arguments, like JS functions, and you can pass values to the mixins
  63. 63. $color:  blue; p  {      color:  darken($color,  10%);    &.disabled  { color functions        color:  grayscale($color);    } }You can use color functions. For example you can have a base color, and modify that with functions like darken, lighten andgrayscale
  64. 64. .box  {      color:  #000;    width:  100px; } .big-­‐box  {   extend    @extend  .box;    font-­‐size:  14px; }You can extend classes to mimic inheritance in normal programming languages
  65. 65. $color:  blue; p  {      @if  $color  ==  blue  {        color:  blue;    } if statements    @else  {        color:  red;    } }You can use if & else statements to give your CSS logic
  66. 66. @for  $i  from  1  through  3  {    .item-­‐#{$i}  {          width:  10px  *  $i;   for loops    } }You can use for loops, to output a bunch of similar CSS
  67. 67. @mixin  round-­‐corners($x)  {    @if  $x  >  3px  {     @warn  "Thats  too  round!";    }    @include  border-­‐radius($x); } warnings .box  {    @include  round-­‐corners(5px); }You can even add warnings that will print when you compile your files
  68. 68. $  sass  -­‐i >>  1px  +  1px  +  1px 3px shell >>  #777  +  #888 #fffSASS has a shell like Ruby, so you can test your functions before using them
  69. 69. compass is a collection of mixins http://compass-style.orgCompass is a collection of SASS mixins that are already written for you
  70. 70. gem install compassInstall Compass the same way
  71. 71. compass create ‹myproject›CD to your application directory and create your Compass project
  72. 72. $blue:  #0089B3; a  {      color:  $blue;        &:hover  {        color:  darken($blue,  10%); write some .scss    }          &:active  {        color:  invert($blue);    }        &:visited  {        color:  darken($blue,  30%);    } }Write some CSS, in this example I’m using variables and color functions
  73. 73. a  {    color:  #0089b3; } a:hover  {    color:  #006280; } a:active  { compass compile    color:  #ff764c; } a:visited  {    color:  #00141a; }Run “compass compile” and here is the CSS it will output
  74. 74. compass watch watches your .scss files for changesRun this command to have Compass automagically detect when your files changes, and it will compile it for you
  75. 75. .box  {      @include  border-­‐radius(10px); } border-radiusYou can then easily use mixins like border-radius
  76. 76. .box  {      @include  background-­‐image(linear-­‐gradient(red,  white,  blue)); } gradientsOr gradients
  77. 77. $blue  =  #0089B3; a  {      @include  link-­‐colors(          $blue,          darken($blue,  10%),   link-colors        invert($blue),          darken($blue,  30%)    ); }Or link colors
  78. 78. ul  {      @include  pretty-­‐bullets("bullet.png"); } pretty bulletsOr pretty bullets
  79. 79. <body>    <div  id="root">        <div  id="root_footer"></div>    </div>    <div  id="footer">        Footer  content  goes  here. sticky footer    </div> </body> @include  sticky-­‐footer(100px);Or you can even automatically create CSS for a sticky footer
  80. 80. compass will handle the vendor stuff output stylesNotice I haven’t shown you much CSS, because you don’t need to look at it. Compass will handle everything for you, and it willjust work
  81. 81. it will output errorsAnd like any compiled language, it will output errors if you’ve made some syntax mistakes
  82. 82. gem update sass gem update compassBest of all if there are any updates to CSS properties, or a new browser enters the market, just update your gems, recompile, andyou’re done
  83. 83. Thanks!follow me on twitter @jefweg

×