Lecture 3

git fetch

git checkout lecture2

// Here are examples of constant definitions.

$clrAlertBorder: #b0dce5;

$clrAlertBackground: #d9edf7;

// Here is how to define a div with rounder corners; 

// see http://compass-style.org/examples/compass/css3/border_radius/

div.rounded {

    @include border-radius(8px);

}

// If you want to have a div have a background image with gradients, you can do like this. 

// See http://compass-style.org/examples/compass/css3/gradient/ for more examples. 

.has_gradient_background {

    @include background-image(linear-gradient(lighten($clrAlertBackground, 5%), $clrAlertBackground));

}

// If you want things to change color on hover, this is how to do it.

div.mycolor {

    color: $clrAlerts;

    // The '&' below is a way to refer to the current match and extend it.

    // The current tag is div.mycolor, that is, a div of class mycolor. 

    // So &:hover means: when you hover over an element div of class mycolor.

    &:hover {

      color: darken($clrAlerts, 10%);

    }

    // These two "mixins" specify shadows for text, and for the entire div.

    @include text-shadow (rgba(white, 0.75) 0 1px 1px);

    @include box-shadow(rgba(black, 0.05), 0 1px 2px, rgba(white, 0.2) 0 1px 0 0 inset);

}