[HTML|JS|CSS] Compass : Mixiny CSS3

Problemem CSS3 jest to, że nie każda jego funkcjonalność jest wspierana we wszystkich przeglądarkach. Wprowadzono zatem tzw. "vendor specific properties", lub "prefix properties", czyli właściwości, które należy ustawić kilkukrotnie, osobno dla silnika przeglądarek (Gecko, Webkit, Presto, Trident). Lista takich właściwości znajduje się tutaj. Przykładowo, aby ustawić zaokrąglenie dla rogów elementu w czterech silnikach, należy napisać:

.round {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

Pisanie styli w ten sposób staje się oczywiście męczące, ewentualne zmiany muszą być dokonywane w wielu miejscach, a i o błąd nietrudno. Tu z pomocą przychodzi Compass i jego gotowe Mixiny. Zamiast pisać powyższego kodu mamy możliwość skorzystania z Mixina @include border-radius(5px);

Compass wspiera 19 właściwości, pełna lista dostępna jest tutaj,

Przykładowo możemy chcieć zaokrąglić rogi, ustawić nieprzezroczystość oraz cień dla tekstu.

.round{
 @include border-radius(5px);
 background-color: red;
}

.round-left{
 @include border-left-radius(5px);
}

.half-transparent{
 @include opacity(0.4);
}

.shadowed{
 @include single-text-shadow;
}

Po transformacji otrzymamy:

.round {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background-color: red;
}

/* line 10, ../sass/style.scss */
.round-left {
  -moz-border-radius-topleft: 5px;
  -webkit-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

/* line 14, ../sass/style.scss */
.half-transparent {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4;
}

/* line 18, ../sass/style.scss */
.shadowed {
  text-shadow: 0px 0px 1px #aaaaaa;
}