[HTML|JS|CSS] CSS3: calc

Calc to funkcja, która umożliwia przeliczanie różnych jednostek długości w stylach CSS. Wsparcie dla calc dostarcza coraz więcej przeglądarek, niektóre wymagają jeszcze użycia tzw. vendor prefixes.

Przykład użycia calc w Sassie:

@mixin calc($property, $expression) { 
  #{$property}: -moz-calc(#{$expression}); 
  #{$property}: -o-calc(#{$expression}); 
  #{$property}: -webkit-calc(#{$expression}); 
  #{$property}: calc(#{$expression}); 
} 

.outer{
 width: 100%;
 background-color: red;
 height: 100px;
}

.inner{
 @include calc("width","100% - 200px");
 background-color: blue;
 height: 100px;
}

Szerokość wewnętrznego diva będzie przeliczana przy każdej zmianie rozmiaru okna.

.outer {
  width: 100%;
  background-color: red;
  height: 100px; }

.inner {
  width: -moz-calc(100% - 200px);
  width: -o-calc(100% - 200px);
  width: -webkit-calc(100% - 200px);
  width: calc(100% - 200px);
  background-color: blue;
  height: 100px; }

Pozostaje pytanie, co w przypadku, gdy przeglądarka nie obsługuje calc. Do tego, by wykryć, czy przeglądarka wspiera calc wystarczy znana biblioteka Modernizr od wersji 2.6. Samo przeliczenie wystarczy wykonać w JS np. odejmując od szerokości parenta zadaną powyżej szerokość 200px. .

[HTML|JS|CSS] Compass : Sprites

Projektując strony internetowe mamy często do czynienia ze sporą ilością małych obrazków, będących np. zawartością kontrolek, służących do nawigacji itd. Aby nie ładować przy każdym odświeżeniu strony wszystkich obrazków, możemy skorzystać z tzw. sprite'ów. Wszystkie obrazki danego typu zostaną połączone w jeden, zatem potrzebne będzie jedna operacja pobierania, a dodatkowo utworzone zostaną style z background image dla każdego z obrazków.

Na przykład, mając w folderze arrows obrazki arr1.png, arr2.png, arr3.png, arr4.png możemy utworzyć dla nich sprite'y.

W pliku scss.

@import "arrows/*.png";
@include all-arrows-sprites;

Resztą zajmie się Compass. Po transformacji:

.arrows-sprite, .arrows-arr1, .arrows-arr2, .arrows-arr3, .arrows-arr4 {
  background: url('/images/arrows-sfa8d0f7a28.png') no-repeat;
}

/* line 60, C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.arrows-arr1 {
  background-position: 0 -64px;
}

/* line 60, C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.arrows-arr2 {
  background-position: 0 0;
}

/* line 60, C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.arrows-arr3 {
  background-position: 0 -128px;
}

/* line 60, C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.arrows-arr4 {
  background-position: 0 -192px;
}

Uwaga. Folder arrows powinien znajdować się w folderze z obrazkami (w tym przypadku images). Ścieżka do tego folderu ustawiana jest w pliku Config.rb.

To nie koniec możliwości, możemy ustawić kilka opcji dotyczących składania obrazków w jeden. Opcje te ustawiamy, tworząc odpowiednie zmienne przed instrukcją importowania. Aby ustawić odstępy między obrazkami należy podać:

$arrows-spacing : 30px;

Gdzie arrows to nazwa folderu z obrazkami.
Możemy także wybrać layout obrazków ustawiając zmienną $arows-layout. Obrazki możemy ustawić m.in. pionowo lub diagonalnie. Jest też do dyspozycji layout typu smart, gdzie rozmieszczenie jest dobierane tak, aby zminimalizować ilość miejsca.
Kolejną interesującą opcją jest możliwość podmiany obrazka w momencie najechania myszą. Cała transformacja odbywa się poprzez konwencję. Aby np. dla obrazka o nazwie img1.png dodać jego zamiennik w momencie najechania myszą, wystarczy do tego samego folderu dodać obrazek o nazwie img1_hover.png. Resztą zajmie się Compass.

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

[HTML|JS|CSS] Sass : Importowanie styli

Bardzo dobrą praktyką przy pisaniu CSSów jest rozbicie selektorów na wiele plików tak, aby w przyszłości móc szybko dokonać potrzebnych zmian. Sass umożliwia importowanie styli zdefiniowanych w wielu plikach .scss a następnie transformację w jeden plik css. Odpowiada za to instrukcja @import. Pliki, które chcemy importować, powinny przez konwencję zaczynać się od podkreślenia, np. _external.scss. W momencie importu do pliku wyjściowego zostaną przekopiowane wszystkie selektory. Dodatkowo mamy dostęp do mixinów i zmiennych zdefiniowanych w zewnętrznych plikach.

Przykładowo, następujący plik o nazwie _external.scss

.external-style{
 border-radius : 3px;
}

@mixin external-mixin{
 font-size: 13px;
}

$myvar : 10px;

#element{
 margin-left: $myvar;
}

możemy wykorzystać w innym pliku w następujący sposób:

@import 'external';

.imported{
 @include external-mixin;
 padding-top: $myvar;
}

Po transformacji otrzymamy:

.external-style {
  border-radius: 3px; }

#element {
  margin-left: 10px; }

.imported {
  font-size: 13px;
  padding-top: 10px; }

[HTML|JS|CSS] Sass : Dziedziczenie selektorów

Podczas stylowania kontrolek w CSS, często dodajemy nowe style tylko po to, aby rozszerzyć istniejący styl o jakąś cechę. Twórcy Sass wprowadzili mechanizm dziedziczenia styli, dzięki któremu pisanie hierarchii styli staje się przyjemne i znacznie zmniejsza ilość kodu. Aby dziedziczyć z jednego selektora, w drugim, wystarczy dodać instrukcję @extends i podać nazwę stylu. W przypadku definiowania dwóch tych samych właściwości istnieje zasada podobna jak w przypadku mixinów : zastosowana zostanie ostatnia zdefiniowana wartość.

Czytelny kod Sass:

.btn-base
{
 padding: 10px 10px 10px 10px;
 &:hover{
  background-color : #FFFFFF;
 };
}

.yellow-btn
{
 @extend .btn-base;
 padding-top: 20px;
 background-color : #FFFF00;
}

...zostanie przetłumaczona do CSS w następujący sposób:

.btn-base, .yellow-btn {
  padding: 10px 10px 10px 10px; }
  .btn-base:hover, .yellow-btn:hover {
    background-color: #FFFFFF; }

.yellow-btn {
  padding-top: 20px;
  background-color: #FFFF00; }

Zwiększenie czytelności i utrzymymwalności kodu nie podlega wątpliwości.

[HTML|JS|CSS] Sass : Mixiny

Mixiny są czymś, co pozwala znacznie zredukować ilość kodu w pliku .scss. Są to bloki kodu, które możemy wstawiać do selektorów za pomocą instrukcji @include. Każdy mixin może zależeć od parametrów, które podawane są w nawiasie. Podczas deklaracji możemy sobie ustalić domyślną wartość paramtru. Wtedy nie musimy za każdym razem podawać tej samej wartości. Zawartość mixina w momencie tłumaczenia instruckji @include zostanie wstawiona w jej miejscu, nie naruszając pozostałych wartości w selektorze. Należy pamiętać, że jeżeli mixin definiuje właściwość zdefiniowaną również w selektorze poza mixinem, to zostanie zastosowana ostatnia wartość.

Przykład:

@mixin red-bordered($wdth : 5px)
{
 border-width : $wdth;
 border-color : red;
}

@mixin margined-slightly
{
 margin: 2px, 2px, 2px, 2px;
}

.bordered-button
{
 @include red-bordered;
 @include margined-slightly;
}

.bordered-div
{
 font-size: 15px;
 @include red-bordered(10px);
}

Po transformacji:

.bordered-button {
  border-width: 5px;
  border-color: red;
  margin: 2px, 2px, 2px, 2px; }

.bordered-div {
  font-size: 15px;
  border-width: 10px;
  border-color: red; }

[HTML|JS|CSS] Sass : Nesting

W CSS 3, jeżeli chcemy nadać pewien styl tylko elementom zagnieżdżonym w innych elementach, musimy podawać dla każdej kontrolki wewnętrznej selektor rodzica oraz jej selektor. Kod taki można uprościć dzięki zastosowaniu zagnieżdżania w Sass. Wystarczy napisać styl dla elementu zewnętrznego, a w nim umieszczać style dla elementów wewnętrznych. Przykładowo, jeśli chcemy, aby wszystkie divy w elementach zawierających klasę .padded-div, miały określony padding, możemy napisać:

.padded-div
{
 font-family: Arial, "MS Trebuchet", sans-serif;
 /*inne wlasciwosci klasy padded-div */
 div
 {
  padding: 20px 0px 40px 0px;
 }
}

Po transformacji:

.padded-div {
  font-family: Arial, "MS Trebuchet", sans-serif;
  /*inne wlasciwosci klasy padded-div */ }
  .padded-div div {
    padding: 20px 0px 40px 0px; }

Warto zauważyć, że Sass po transformacji nadaje wcięcie, co poprawia czytelność arkusza styli.

Zagnieżdżanie możemy się odbywać na kolejnych poziomach, wszystko zależy od potrzeb programisty.

[HTML|JS|CSS] Sass : Zmienne

Bardzo przydatną funkcjonalnością Sass jest możliwość korzystania ze zmiennych w plikach .scss. Dzięki nim, nie musimy  kopiować wartości występujących w wielu miejsach. Wystarczy wprowadzić zmienną, przypisać jej wartość i w każdym miejscu odwoływać się do zmiennej. Przy używaniu jednego koloru w wielu miejscach, znacznie łatwiej będzie w przyszłości zmienić jego wartość. Wartości możemy wyliczać "w locie" poprzez dodawanie, odejmowanie, mnożenie czy dzielenie zmiennych przez stałe, bądź inne zmienne.

Przykładowy kod Sass:

$mybluecolor : #7B68EE;
$colorshift : #010101;

.first-class{
 background-color: $mybluecolor;
}

$mybluecolor : $mybluecolor - $colorshift;

.second-class{
 background-color: $mybluecolor;
}

.third-class{
 background-color: $mybluecolor + #010203;
}

Zostanie przetłumaczony do CSS w następujący sposób:

.first-class {
  background-color: mediumslateblue; }

.second-class {
  background-color: #7a67ed; }

.third-class {
  background-color: #7b69f0; }

[HTML|JS|CSS] Sass : Wprowadzenie

Sass (Syntactically Awesome StyleSheets) jest rozszerzeniem CSS 3 umożliwiającym tworzenie arkuszy styli w sposób przyjemniejszy dla programisty i łatwiejszy do zarządzania.

Pliki Sass mają rozszerzenie .scss (Sassy CSS) i są transformowane do plików .css za pomocą narzędzi uruchamianych z command line. Jako, że Sass rozszerza CSS 3, to w plikach .scss możliwe jest zapisywanie każdej konstrukcji składniowej zwykłego CSS 3.

Strona główna Sass

Instalacja:

Aby uruchomić Sass pod windows musimy zainstalować ruby gems, a także ruby. Pomocne linki:

1. Ruby
2. Ruby Gems

Następnie w Command Line wpisujemy:

gem install sass 

Teraz możemy utworzyć dwa pliki w folderze z projektem : style.css oraz style.scss.

Aby uruchomić tryb śledzenia zmian, należy wpisać w command line :

sass --watch style.scss:style.css

Każde zapisanie pliku style.scss spowoduje transformację jego treści do style.css. Jeżeli nie popełniliśmy błędu składniowego, otrzymamy na konsoli komunikat:

 Change detected to: E:/Projects/$HTML-JS-CSS/Sass/style.scss

Gdy popełniony zostanie z naszej strony jakiś błąd, informację o nim dostaniemy na konsoli, a także w pliku wyjściowym css, przykładowo:

Syntax error: Invalid CSS after "...ound-color: red": expected ";", was ""
        on line 3 of style.scss