sobota, 8 września 2012

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

Brak komentarzy:

Prześlij komentarz