sass_compass_unleashed/presentation/05_variables.slides

64 lines
1.3 KiB
Plaintext
Raw Normal View History

2012-03-13 15:49:37 +00:00
!SLIDE variable-layout
# Variables Definitions
!SLIDE bad-variables
``` scss
// There are 100 lines before this
.content_head {
@include clearfix;
.hr {
$height : 2px;
padding-top : (rhythm(1) / 2) - $height;
width : 100%;
border-bottom : $height solid $secondary-accent-color;
margin-bottom : 10px;
display : block;
@extend .float-right;
}
.release_identifiers {
@extend .float-right;
text-align : right;
font-family : $ancillary-font;
}
}
```
!SLIDE important
#Always define your variables at the top of each file!
!SLIDE big-list variable-why
* Easy to find
* Easy to update
* No suprises
!SLIDE
``` scss
/* Local Variaibles */
$release-content-width : 760px;
$release-content-border-size : 6px;
$release-content-top-margin : 9px;
$release-content-height : rhythm(2);
$section-side-width : column-width(4);
$section-side-height : 24;
$section-side-li-padding : 10px;
$control-border-height : 1px;
$control-box-height : 2;
$control-top-box-leader : 1;
$group-image-height : rhythm(6);
.contents .show {
h1 {
@include header(3);
@include trailer;
color : $primary-accent-color;
}
// ... goes on for 100+ lines
```