Witaj Świe­cie po raz n-ty! Kilka mie­sięcy temu mia­łem wró­cić, a na blogu w dal­szym ciągu cisza. No cóż, od kilku mie­sięcy pra­cuję na rynku zagra­nicz­nym i czasu mam coraz mniej. Ostat­nio jed­nak wzią­łem się za porząd­ko­wa­nie wła­snej pracy i udaje mi się zna­leźć kilka wie­czo­rów na napi­sa­nie paru zdań.

Wróćmy jed­nak na chwilę do pracy. Porów­nu­jąc to co aktu­al­nie robię z tym czym zaj­mo­wa­łem się na eta­cie mogę śmiało powie­dzieć, że róż­nica pozio­mów jest feno­me­nalna. O ile w poprzed­niej pracy nauczy­łem się naprawdę dużo, to jako fre­elan­cer pochła­niam wie­dzę dużo szyb­ciej. W kolej­nych kilku arty­ku­łach chciał­bym napi­sać jak prze­biega mój stan­dar­dowy dzień oraz jakich uży­wam narzę­dzi oraz tech­nik aby uspraw­nić swoją pracę. Temat na dzi­siaj to kom­pi­la­tor CSS.

Czym jest kom­pi­la­tor CSS?

Kom­pi­la­tory CSS to pro­ste pro­gramy wpro­wa­dza­jące róż­nego rodzaju ulep­sze­nia do języka arku­szy sty­lów. Dodają one nowe ele­menty do CSS, które po pro­ce­sie kom­pi­la­cji są zamie­niane na zwy­kłe reguły rozu­miane przez prze­glą­darki internetowe.

Pro­sty przykład:

Naj­bar­dziej przy­dat­nym ele­men­tem wszyst­kich kom­pi­la­to­rów jest zagnież­dża­nie reguł. Dzięki temu wizu­al­nie widzimy, który ele­ment znaj­duje się wewnątrz innego.

#element{
    font-size: 16px;
    strong{ color: red; }
    em{ color: blue; }
}

W tym przy­padku posia­damy ele­ment o id #ele­ment który może posia­dać wewnątrz sie­bie ele­menty strong i em. Kod ten zosta­nie prze­kom­pi­lo­wany do postaci:

#element{
    font-size: 16px;
}
 
#element strong{
    color: red;
}
 
#element em{
    color: blue;
}

Dla­czego warto?

Przede wszyst­kim skraca się czas two­rze­nia strony, a w przy­padku jej przy­szłej mody­fi­ka­cji praca nad arku­szem jest dużo prost­sza. Pod­czas two­rze­nia małych stro­nek się tego nie odczuwa jed­nak przy więk­szych pro­jek­tach moim zda­niem kom­pi­la­tor CSS jest nie­zbędny. Aktu­al­nie two­rzę sza­blony do Word­Pressa i klienci czę­sto chcą aby dodać im jakąś funk­cjo­nal­ność albo zgła­szają pro­blemy kom­pa­ty­bil­no­ści sza­blonu z róż­nymi egzo­tycz­nymi wtyczkami(często poja­wiają się kon­flikty CSS). W przy­padku odpo­wied­niego kom­pi­la­tora zarzą­dza­nie tym wszyst­kim nawet po upły­wie mie­siąca jest dużo prost­sze. Co wię­cej, kom­pi­la­tory czę­sto zgła­szają błędy składni, nie­które wyma­gają ide­al­nego porządku(np. śred­nika na końcu każ­dej reguły), udo­stęp­niają kom­pre­so­wa­nie kodu i dużo, dużo więcej.

Dostępne roz­wią­za­nia

Kom­pi­la­to­rów CSS jest na prawdę sporo. Ja ogra­ni­czę się do czte­rech naj­bar­dziej popu­lar­nych. Prak­tycz­nie wszyst­kie spo­śród przed­sta­wio­nych przeze mnie apli­ka­cji udo­stęp­niają pod­sta­wowe funk­cje kom­pi­la­tora CSS np:

• Zagnież­dża­nie elementów
• Zmienne(w tym moż­li­wość uży­cia zmien­nych do nazw parametrów)
• Ope­ra­cje arytmetyczne
• Obsługa impor­to­wa­nia
• Mie­sza­nie reguł
• Wiele wbu­do­wa­nych funk­cji np. zaog­krą­gla­nie liczb, roz­ja­śnia­nie kolo­rów, czy zmiana koloru na szary odpowiednik

Oczy­wi­ście różne kom­pi­la­tory obsłu­gują wymie­nione opcje w róż­nym stop­niu. Pozo­sta­wiam to wam do dokład­niej­szego przetestowania.

Sass

Mój fawo­ryt. Lekki, napi­sany w Ruby kom­pi­la­tor dzia­ła­jący w cza­sie rzeczywistym.

Dodat­kowo obsłu­gi­wane opcje:

• Instruk­cje ste­ru­jące: @if, @while, @for oraz @each
• Tryb inte­rak­tywny
• Praca w cza­sie rzeczywistym
• Dwa rodzaje składni: kla­syczna, kom­pa­ty­bilna z CSS oraz oparta na wcięciach(podobna jak w pli­kach YAML, Pytho­nie lub Ruby)
• Wspar­cie dla Eclipse oraz NetBeans(poprzez nie­ofi­cjalne wtyczki)

Strona pro­jektu: http://sass-lang.com

Less

Bar­dzo potężny kom­pi­la­tor napi­sany w Java­Script. Jego ogrom­nym atu­tem jest dzia­ła­nie na dwóch płasz­czy­znach — po stro­nie klienta oraz po stro­nie ser­wera. Pierw­sze roz­wią­za­nie możemy zasto­so­wać pod­czas pracy nad stroną, dru­gie aby skom­pi­lo­wać osta­teczny plik i umie­ścić na serwerze.

Cie­kawe opcje:

• Podwójny tryb pracy: po stro­nie klienta oraz poprzez konsolę
• Prze­strze­nie nazw
• Bar­dzo fajna skład­nia CSS-podobna
• Moż­li­wość umiesz­cza­nia kodu Java­Script wewnątrz arku­sza stylów
• Bar­dzo fajna dokumentacja

Strona pro­jektu: http://lesscss.org

Cle­verCSS

Trzeci na mojej oso­bi­stej liście. Lekki, napi­sany w Pythonie(lub w Haskellu). Posiada pod­sta­wową funk­cjo­nal­ność i obsłu­guje tylko skład­nię opartą na wcięciach.

Przy­kład użycia:

#main p:
  font->
    family: Verdana, sans-serif
    size: 1.1em
    style: italic

#main p {
    font-family: Verdana, sans-serif;
    font-size: 1.1em;
    font-style: italic;
}

Cle­verCSS w Pyho­nie: http://sandbox.pocoo.org/clevercss/

Cle­verCSS w Haskellu: http://sandbox.pocoo.org/clevercss-hs/

Hss

Ostatni kom­pla­tor umiesz­czam ze względu na sen­ty­ment do niego(oraz refe­rer ale o tym za chwilę). Był on pierw­szym kom­pi­la­to­rem, któ­rego uży­wa­łem i ze względu na jego pro­stotę jest cie­ka­wym roz­wią­za­niem na począ­tek. Jest to fran­cu­ska pro­duk­cja na potrzeby firmy Motion-Twin(jeżeli ktoś zaj­muje się pro­gra­mo­wa­niem gier to zapewne ich zna) — firmy, która stwo­rzyła bar­dzo przy­jemną grę typu „Arka­noid“ — Alpha Bounce (Jeżeli chcesz się zare­je­stro­wać możesz podać mój nick jako refe­rer — „Hellson“).

Nie­stety HSS jest bar­dzo sztyw­nym kom­pi­la­to­rem. Jego jedy­nym plu­sem jest wspar­cie dla tzw. „CSS hacks“. Wpi­su­jąc np. opa­city: 0.6 kom­pi­la­tor sam doda odpo­wied­nie fil­try dla IE. Oczy­wi­ście nie zawsze jest to plus. Wiele osób(w tym ja) stara się two­rzyć czy­ste pliki css a wszel­kiego rodzaju sztuczki dla IE umiesz­czać w oddziel­nych plikach.

Strona pro­jektu: http://ncannasse.fr/projects/hss

W następ­nym arty­kule posta­ram się zapre­zen­to­wać kilka naj­waż­niej­szych ele­men­tów kom­pi­la­tora SASS. Jeżeli jed­nak to was nie interesuje(np. jeżeli woli­cie sami poczy­tać doku­men­ta­cję), to pro­szę pisz­cie. Zajmę się wtedy arty­ku­łem na temat kolej­nych cie­ka­wych ele­men­tów mojej codzien­nej pracy.