git fetch
git checkout lecture2
Here are examples of things you can do using compass.
// 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);
}