• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CSS, SASS & Compass at WDCNZ
 

CSS, SASS & Compass at WDCNZ

on

  • 4,032 views

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

"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.

Statistics

Views

Total Views
4,032
Views on SlideShare
3,474
Embed Views
558

Actions

Likes
8
Downloads
27
Comments
0

9 Embeds 558

http://www.jwegesin.com 507
http://lanyrd.com 22
http://twitter.com 15
https://twitter.com 4
http://feeds2.feedburner.com 4
http://us-w1.rockmelt.com 2
http://paper.li 2
http://webcache.googleusercontent.com 1
http://hghltd.yandex.net 1
More...

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    CSS, SASS & Compass at WDCNZ CSS, SASS & Compass at WDCNZ Presentation Transcript

    • 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 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
    • 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
    • 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
    • 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 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
    • 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
    • .selector { property: value; }So we’re on the same page, here’s the terminology. This is a CSS class
    • .selector { property: value; }We use selectors to target HTML elements
    • .selector { property: value; }We use properties to apply styles. There are over 150 properties in CSS2
    • .selector { property: value; }A CSS class is a collection of property value pairs
    • 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
    • span  {    height:  100px; }This won’t work
    • span  {    display:  inline; ‹ from the browser’s stylesheet    height:  100px; }SPANS inherit a display value of inline from the browser’s stylesheet
    • span  {    display:  block;    height:  100px; }If you override that value, and make the SPAN a block, it will work
    • div  { from the browser’s stylesheet ›    position:  static;    top:  10px; }Likewise if you add a property of top, it won’t work
    • div  {    position:  relative;    top:  10px; }If you change the position of the DIV from static to relative, it will work
    • 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
    • body  {    font-­‐size:  12px; } div  {    font-­‐size:  2em; } <body>    <div>        <div></div>    </div> </body>So if we have this HTML & CSS
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • <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
    • <div>Top</div> <div  class="blue">Middle</div> <div>Bottom</div> Top Middle BottomI’ll make one blue
    • <div>Top</div> <div  class="blue">Middle</div> <div>Bottom</div> Top .blue  {    float:  left; } Middle BottomAnd I’ll float it
    • <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”
    • <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
    • <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
    • <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
    • <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
    • 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
    • <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
    • <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
    • <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
    • 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
    • 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
    • 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  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
    • 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
    • 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
    • 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 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
    • gem install sassYou need Ruby, you can install SASS with the command prompt or through terminal
    • .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
    • .box  {    .content  {        p  {            a  {} nest selectors        }    } }A CSS preprocessor will let you nest selectors, letting you group your CSS classes together
    • 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
    • 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
    • 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
    • $width:  1000px; .container  {      width:  $width;   } variables .column  {      width:  $width;   }You can use variables like any other programming language
    • $width:  1000px; .container  {      width:  $width;   } math .column  {      width:  $width  /  2;   }You can even use math
    • @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
    • @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
    • $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
    • .box  {      color:  #000;    width:  100px; } .big-­‐box  {   extend    @extend  .box;    font-­‐size:  14px; }You can extend classes to mimic inheritance in normal programming languages
    • $color:  blue; p  {      @if  $color  ==  blue  {        color:  blue;    } if statements    @else  {        color:  red;    } }You can use if & else statements to give your CSS logic
    • @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
    • @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
    • $  sass  -­‐i >>  1px  +  1px  +  1px 3px shell >>  #777  +  #888 #fffSASS has a shell like Ruby, so you can test your functions before using them
    • compass is a collection of mixins http://compass-style.orgCompass is a collection of SASS mixins that are already written for you
    • 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  {        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
    • 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
    • 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
    • .box  {      @include  border-­‐radius(10px); } border-radiusYou can then easily use mixins like border-radius
    • .box  {      @include  background-­‐image(linear-­‐gradient(red,  white,  blue)); } gradientsOr gradients
    • $blue  =  #0089B3; a  {      @include  link-­‐colors(          $blue,          darken($blue,  10%),   link-colors        invert($blue),          darken($blue,  30%)    ); }Or link colors
    • ul  {      @include  pretty-­‐bullets("bullet.png"); } pretty bulletsOr pretty bullets
    • <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
    • 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
    • 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, or a new browser enters the market, just update your gems, recompile, andyou’re done
    • Thanks!follow me on twitter @jefweg