12. OR IN SCSS
TRADITIONAL FORMAT + MAGIC
@import "css3_helpers";
@import "colors";
#header {
color: $header_background;
background-color: $header_text;
@include rounded(15px);
@include box_shadow(0 5px 10px $header_shadow);
}
13. OR IN SCSS
TRADITIONAL FORMAT + MAGIC
@import "css3_helpers";
@import "colors";
#header {
color: $header_background;
background-color: $header_text;
@include rounded(15px);
@include box_shadow(0 5px 10px $header_shadow);
}
14. OR IN SCSS
TRADITIONAL FORMAT + MAGIC
@import "css3_helpers";
@import "colors";
#header {
color: $header_background;
background-color: $header_text;
@include rounded(15px);
@include box_shadow(0 5px 10px $header_shadow);
}
15. OR IN SCSS
TRADITIONAL FORMAT + MAGIC
@import "css3_helpers";
@import "colors";
#header {
color: $header_background;
background-color: $header_text;
@include rounded(15px);
@include box_shadow(0 5px 10px $header_shadow);
}
16. RUBY
• All of these examples use Ruby libraries. It’s not scary, and it’s easy to work with.
• None of the examples require Ruby to actually run. The output is pure CSS.
• You don’t care what language Word is written in do you?
27. #navbar {
MATH
ith
$navbar-width: 800px;
tW
$items: 5;
ea s! $navbar-color: #ce4dd6;
Gr ent
es rc
o e width: $navbar-width;
G P border-bottom: 2px solid $navbar-color;
li {
float: left;
width: $navbar-width/$items - 10px;
background-color:
lighten($navbar-color, 20%);
&:hover {
background-color:
lighten($navbar-color, 10%);
}
}
}
28. #navbar {
MATH
ith
$navbar-width: 800px;
tW
$items: 5;
ea s! $navbar-color: #ce4dd6;
Gr ent
es rc
o e width: $navbar-width;
G P border-bottom: 2px solid $navbar-color;
li { Au
float: left; to-
width: $navbar-width/$items - 10px; CM adj
S t ust
em yo
background-color: pla ur
lighten($navbar-color, 20%); tes
&:hover {
background-color:
lighten($navbar-color, 10%);
}
}
}