!!! Listings aus dem Artikekl "Formensprache"
!!! von Stefan Mintert
!!! in iX 6/2913, S, 48

!!! Listing 1: Variablen in SASS und LESS

/* SASS */

$highlightColor: #00f;

h1 {
  font-size: 200%;
  color: $highlightColor;
}

div {
  border-color: $highlightColor;
}

/* SASS in kompakter Form */

$highlightColor: #00f

h1
   font-size: 200%
   color: $highlightColor

div
    border-color: $highlightColor



/* LESS */

@highlightColor: #00f;

h1 {
   font-size: 200%;
   color: @highlightColor;
}

div {
    border-color: @highlightColor;
}


!!! Listing 2: Sass: blockbezogene Variable

$color: black;
.scoped {
  $bg: blue;
  $color: white;
  color: $color;
  background-color: $bg;
}
.unscoped {
  color: $color;
  // Would be an error
  // background: $bg;
}

!!! Listing 3: Less: blockbezogene Variable

@color: black;
.scoped {
  @bg: blue;
  @color: white;
  color: @color;
  background-color: @bg;
}
.unscoped {
  color: @color;
  // Would be an error
  // background: @bg;
}

!!! Listing 4: Ausgabe der Variablen

Sass                         Less 

.scoped {                    .scoped {
  color: white;                color: white;
  background-color: blue;      background-color: blue;
}                            }
.unscoped { color: white; }  .unscoped { color: black; }

!!! Listing 5: Less inklusive mathematischer Operationen 

@highlightColor: #00f;
@boxWidth: 300px;
@boxPadding: 20px;

h1 {
  font-size: 200%;
  color: @highlightColor;
}

div {
  width: @boxWidth - ( @boxPadding * 2 );
  padding: @boxPadding;
  border-color: darken(@highlightColor, 5%);
}

!!! Listing 6: CSS-Ergebnis von Listing 5

h1 {
  font-size: 200%;
  color: #0000ff;
}
div {
  width: 260px;
  padding: 20px;
  border-color: #0000e6;
}

!!! Listing 7: Less-Mixins

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

/* Quelle: Wikipedias Less-Seite */

!!! Listing 8: Sass-Mixins

@mixin rounded-corners($radius: 5px) {
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}

#header {
  @include rounded-corners;
}
#footer {
  @include rounded-corners(10px);
}

!!! Listing 9: Vererbung (Sass)

.error {
  border-width: 1px;
  background: #fdd;
  border-color: #f00;
  border-style: solid;
}

.badError {
  @extend .error;
  border-width: 3px;
}


!!! Listing 10: CSS aus der Sass-Vererbung

.error, .badError {
  border-width: 1px;
  background: #fdd;
  border-color: #f00;
  border-style: solid; }

.badError {
  border-width: 3px; }


!!! Listing 11: Vererbung (Less)

.error {
  border-width: 1px;
  background: #fdd;
  border-color: #f00;
  border-style: solid;
}

.badError:extend(.error) {
  border-width: 3px;
}

/* Ab Version 1.4! */

!! Listing 12: Kontrollstrukturen

/* Sass */

@if lightness($color) > 30% {
  background-color: black;
}
@else {
  background-color: white;
}

/* Less */

.mixin (@color) when (lightness(@color) > 30%) {
  background-color: black;
}
.mixin (@color) when (lightness(@color) =< 30%) {
  background-color: white;
}