[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 : 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