published on in HowTo
tags: css scss

A simple Sass example

Here is a Sass/SCSS 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) } 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 this 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}