CSS, SASS & Compass at WDCNZ

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 ﬁrst 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ﬀect other values The browser computes a lot of stuﬀThe 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 ﬂoat 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 ﬂowFloat 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 ﬂow, 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 ﬂoat 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 ﬂoating elements

<div>Top</div> <div class="blue">Middle</div> <div>Bottom</div> Top .blue { float: left; } BottomNote that ﬂoating 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 ﬂoating, 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ﬀects browser calculation 5. browsers miscalculate It’s the browser calculation that makes CSS painfulWhen you use ﬂoat 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 ﬂoated 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 speciﬁcally 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 ﬁle, 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 ﬁles

$ 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 ﬁles for changesRun this command to have Compass automagically detect when your ﬁles 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ﬀ 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

http://www.jwegesin.com	357
http://twitter.com	15
http://lanyrd.com	11
http://feeds2.feedburner.com	4
https://twitter.com	3
http://us-w1.rockmelt.com	2
http://paper.li	2
http://webcache.googleusercontent.com	1

CSS, SASS & Compass at WDCNZ

by jefweg on Jul 13, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 395

Statistics

CSS, SASS & Compass at WDCNZ — Presentation Transcript