Here is a Sass example. Sass is a good productivity booster or just a passing folly.
We need a border. It's simple:
.edit_container {
border: 1px solid #a77;
}
.editable_div {
border: 1px solid black;
}
.gallery_preview {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.gallery_preview_big {
border-bottom: 1px solid #555;
}
It's just 4 simple class definition. Where is the DRY rule? Nowhere.
Remake it with Sass:
@mixin border($width: 1px, $style: solid, $color: black)
border: $width $style $color
.edit_container
@include border($color: #a77)
.editable_div
@include border()
.gallery_preview
@include border()
border-left: 0
border-right: 0
.gallery_preview_big
border-bottom: 1px solid #555
Yes... That's not very nice (.gallery_preview, .gallery_preview_big).
@mixin border( $width: 1px, $style: solid, $color: black, $top: true, $bottom: true, $left: true, $right: true )
@if $top
border-top: $width $style $color
@if $left
border-left: $width $style $color
@if $right
border-right: $width $style $color
@if $bottom
border-bottom: $width $style $color
}
.edit_container
@include border($color: #a77)
.editable_div
@include border()
.gallery_preview
@include border($left: false, $right: false)
.gallery_preview_big
@include border($left: false, $right: false, $top: false)
This is more beautiful but it's not follow the DRY rule. Use: @mixin, @if, @each and lists with nth().
@mixin _base_border($prefix, $width, $style, $color)
border-#{$prefix}: $width $style $color
@mixin border( $width: 1px, $style: solid, $color: black, $top: true, $bottom: true, $left: true, $right: true )
@each $edge in ($top, top), ($left, left), ($right, right), ($bottom, bottom)
@if nth($edge, 1)
@include _base_border( nth($edge, 2), $width, $style, $color)
.edit_container
@include border($color: #a77)
.editable_div
@include border()
.gallery_preview
@include border($left: false, $right: false)
.gallery_preview_big
@include border($left: false, $right: false, $top: false)
It's ok ^_^ We made it. What is the output?
.edit_container {
border-top: 1px solid #a77;
border-left: 1px solid #a77;
border-right: 1px solid #a77;
border-bottom: 1px solid #a77; }
.editable_div {
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000; }
.gallery_preview {
border-top: 1px solid #000;
border-bottom: 1px solid #000; }
.gallery_preview_big {
border-bottom: 1px solid #000; }
With command: sass --style compressed example.sass
.edit_container{border-top:1px solid #a77;border-left:1px solid #a77;border-right:1px solid #a77;border-bottom:1px solid #a77}.editable_div{border-top:1px solid #000;border-left:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000}.gallery_preview{border-top:1px solid #000;border-bottom:1px solid #000}.gallery_preview_big{border-bottom:1px solid #000}
If you don't like the syntax of Sass just use Scss:
@mixin _base_border($prefix, $width, $style, $color) {
border-#{$prefix}: $width $style $color;
}
@mixin border( $width: 1px, $style: solid, $color: black, $top: true, $bottom: true, $left: true, $right: true ) {
@each $edge in ($top, top), ($left, left), ($right, right), ($bottom, bottom) {
@if nth($edge, 1) {
@include _base_border( nth($edge, 2), $width, $style, $color);
}
}
}