[HTML|JS|CSS] Compass : Animacje CSS3, Transformacje 2D

CSS3 umożliwia pisanie prostych animacji. Możemy na przykład animować zmianę szerokości kontrolki, zmianę koloru czy położenia. Problemem znowu jest zachowanie takiej animacji przy różnych silnikach przeglądarek. Kolejny raz z pomocą przychodzi Compass, udostępniając Mixiny pozwalające w łatwy sposób tworzyć efekty przejść. Mamy do dyspozycji cztery opcje:

1. transition-property - które property chcemy animować (domyślnie wszystkie).
2. transition-duration - czas trwania animacji (domyślnie 0s)
3. transition-timing-function - funkcja służąca do wyliczenia wartości w kolejnych chwilach czasu (odpowiednik easing function z WPF)
4. transition-delay - opóźnienie, po jakim wykona się efekt (domyślnie 0s)

Przykładowy sposób użycia, przy zdarzenie hover (najechanie myszą):

.inflated{
 @include transition-property(width);
 @include transition-duration(1s);
 @include transition-timing-function(ease-out);
 @include transition-delay(0.2s);
 width: 100px;
 &:hover{
  width : 200px;
 }
}

Dodatkowo za pomocą mixinów Compassa możemy tworzyć proste transformacje 2D, takie jak:

• Translacje

.translated{
 &:hover{
  @include translateX(10px);
  @include translateY(200px);
 }
}

• Rotacje

.rotated{
 &:hover{
  @include rotate(33deg);
 }
}

• Skalowanie

.scaled{
 @include transition-duration(1s);
 &:hover{
  @include scale(3);  
 }
}

Pełna lista możliwości dostępna jest tutaj.

[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;
}

[HTML|JS|CSS] Compass : Wprowadzenie

Compass to framework bardzo przydatny przy tworzeniu CSSów. Wykorzystuje Sass, będący rozszerzeniem CSS 3, dodając do niego sporo możliwości. Mamy więc dostęp do sporej ilości gotowych mixinów, czy reużywalnych wzorców pomocnych przy projektowaniu stron.

Aby móc skorzystać z compass'a należy zainstalować ruby oraz ruby gems. Oto przydatne linki:

1. Ruby
2. Ruby Gems

Następnie możemy skorzystać z ruby gems i zainstalować Compass następującą komendą z linii poleceń:

gem install compass

Po zainstalowaniu możemy stworzyć nowy projekt z compassem, poleceniem:

compass create mydirectory

W folderze utworzone zostaną subfoldery sass (pliki .scss) i stylesheets (wyniki transformacji).
Możemy też wpiąć compass do istniejącego już projektu poleceniem:

compass install compass

W wierszu poleceń otrzymujemy gotowy kod html z linkami do arkuszy styli.

To import your new stylesheets add the following lines of HTML (or equivalent) t
o your webpage:
<head>
  <link href="/stylesheets/screen.css" media="screen, projection" rel="styleshee
t" type="text/css" />
  <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/
css" />
  <!--[if IE]>
      <link href="/stylesheets/ie.css" media="screen, projection" rel="styleshee
t" type="text/css" />
  <![endif]-->
</head>

Aby Compass rozpoczął śledzenie zmian w plikach .scss i transformowanie ich w pliki .css przy każdym zapisie, wystarczy wpisać:

compass watch mydirectory

gdzie mydirectory zawiera foldery sass i stylesheets.


Aby korzystać z możliwości Compassa, należy go zaimportować w pliku .scss dyrektywą:

@import "compass";

[HTML|JS|CSS] Sass : Pętle

Sass oferuje kilka rodzajów pętli, które znamy z innych języków programowania.Poza instrukcją @each stosowaną w przypadku list, mamy do dyspozycji pętle @for oraz @while, podobne do tych, które każdy zna chociażby z języka C.

Składnia tych instrukcji przedstawia się następująca:

$i: 0;
@while $i < 5 {
  .indexed-class#{$i} { margin-right: 15 * $i; }
  $i: $i + 1;
}

@for $j from 5 through 8
{
 .indexed-class#{$j} { margin-right: 15 * $j; }
}

Po transformacji otrzymamy:

.indexed-class0 {
  margin-right: 0; }

.indexed-class1 {
  margin-right: 15; }

.indexed-class2 {
  margin-right: 30; }

.indexed-class3 {
  margin-right: 45; }

.indexed-class4 {
  margin-right: 60; }

.indexed-class5 {
  margin-right: 75; }

.indexed-class6 {
  margin-right: 90; }

.indexed-class7 {
  margin-right: 105; }

.indexed-class8 {
  margin-right: 120; }

[HTML|JS|CSS] Sass: Funkcje

Składania Sass umożliwia z jednej strony definiowanie funkcji przez programistę, a z drugiej korzystanie z wbudowanych funkcji. Własną funkcję można zdefiniować, a następnie wykorzystać w następujący sposób:

@function myFun($clr, $alpha)
{
 @if $alpha < 0.3
 {
  @return rgba($clr, $alpha + 0.1);
 }
 @else 
 {
  @return rgba($clr, $alpha + 0.3);
 } 
}

.black-class
{
 color: myFun(black,0.4);
}

Po transformacji:

.black-class {
  color: rgba(0, 0, 0, 0.7); }

Poza własnymi funkcjami możemy skorzystać z gotowych funkcji: Pełna lista możliwości znajduje się tutaj.

Przykładowe użycia funkcji Sass:

• Konwersje RGB i HSL

$mycolor : #ABCDEF;

.myred{
 background-color: red($mycolor);
}

.mygreen{
 background-color: green($mycolor);
}

.myblue{
 background-color: blue($mycolor);
}

.mygrey{
 background-color: grayscale($mycolor);
}

.mysaturate{
 background-color : saturate($mycolor);
}

.mytransparent{
 background-color: transparentize($mycolor, 0.4);
}

•  Wsparcie dla obliczeń

$totalwidth : 1050;
$innerwidth : 1442;

.computed-width
{
 width: round(percentage($totalwidth / $innerwidth));
} 

• Operacje na kolekcjach

$list : (11px,14px,54px,23px);

.aggregates{
 width: max(11px,14px,54px,23px);
 height : min(11px,14px,54px,23px);
 margin-bottom: length($list);
}

[HTML|JS|CSS] Sass : Nth function

Obok list, możemy definiować kolekcje dowolnych elementów, przypominające krotki. Budowanie selektorów w ten sposób, to kolejna okazja do zmniejszenia ilości kodu, jaki musi napisać programista. Funkcja nth wyciąga n-ty element z kolekcji.

Przykładowy sposób użycia funkcji nth

@each $item in (
 myclass1 red 100,
 myclass2 black 200,
 myclass3 blue 300
 )
{
 .#{nth($item,1)}
 {
  background: nth($item,2);
  min-width: nth($item,3);
 }
}

Należy pamiętać o tym, że przecinkiem oddziela się tylko elementy w kolekcji,  a do oddzielenia ich właściwości służy spacja,

Po transformacji:

.myclass1 {
  background: red;
  min-width: 100; }

.myclass2 {
  background: black;
  min-width: 200; }

.myclass3 {
  background: blue;
  min-width: 300; }

[HTML|JS|CSS] Sass : Listy

Sass umożliwia iterowanie po definiowanych przez nas kolekcjach. Możemy stworzyć listę napisów jako pewną zmienną, a następnie odwołać się do każdego z tych napisów. Znacznie ułatwia to pracę w momencie gdzie tworzymy kilka podobnych selektorów, a każdy z tych selektorów wykorzystuje jakiś napis w wielu miejscach. Kolekcję tworzymy podobnie jak zmienną, przy czym wartości podaje się w nawiasach oddzielone przecinkami. Do iterowania po takiej kolekcji wykorzystujemy polecenie @each. Polecenie to przypomina instrukcję foreach z języka C#. Odwołanie do elementu kolekcji następuje poprzez podanie #{item}.

Przykładowo, gdy chcemy stworzyć klasy, które zarówno w nazwie, jak i ścieżce do background-image ten sam ciąg znaków, możemy użyć list.

$icons:(icon1,icon2,icon3);
@each $icon in $icons
{
 .#{$icon}superclass 
 { 
  background-image: url('/images/#{$icon}.png')
 };
}

Po transformacji:

.icon1superclass {
  background-image: url("/images/icon1.png"); }

.icon2superclass {
  background-image: url("/images/icon2.png"); }

.icon3superclass {
  background-image: url("/images/icon3.png"); }