Kod

Jak napisać prosty, elegancki CSS z kompasem i Sass

Wielu projektantów używa jakiegoś preprocesora CSS, niezależnie od tego Sass , MNIEJ lub Rysik . Jeśli używałeś któregokolwiek z nich, prawdopodobnie wiesz również, że Compass to framework zbudowany na Sassie i chociaż jego instalacja może być odstręczająca, po jego użyciu szybko odkryjesz, że jest to jedna z najlepszych umiejętności projektant stron internetowych może się uczyć.

Jeśli nigdy wcześniej nie używałeś Sassa, poleciłbym rzucić okiem na WDD wprowadzenie do Sassa.

Kompas działa jak framework dla twojego CSS. Kiedy pracujesz nad dużym projektem, łatwo jest wymknąć się spod kontroli i często znajdowanie rzeczy we własnym CSS jest wyzwaniem. Compass próbuje rozwiązać te problemy, a dodatkową zaletą jest praca z prefiksami dostawców.

Co to jest Compass?

Jak wspomniałem powyżej, Compass to framework dla twojego CSS, który rozwiązuje niektóre problemy z językiem. Zawiera również kilka narzędzi ułatwiających rozwój:

  • podobnie jak Sass, Compass obsługuje zmienne, mixiny i zagnieżdżanie;
  • zapewnia pełen zakres funkcji pomocniczych dla obrazów, kolorów, typografii i innych;
  • obsługuje obliczenia matematyczne;
  • pomaga zapewnić zgodność z różnymi przeglądarkami.

Podobnie jak Sass i LESS, Compass to narzędzie ułatwiające projektowanie stron internetowych.

Jak zainstalować Compass

Compass to klejnot Ruby, więc aby go zainstalować, musisz najpierw zainstalować Ruby na swoim komputerze. Na szczęście instalacja Ruby jest prosta, w systemie Windows wystarczy ją pobrać Ruby Installer dla systemu Windows , na Mac / Linux postępuj zgodnie z instrukcjami na Witryna Ruby.

Po zainstalowaniu Ruby zainstalowanie kompasu jest tak proste: 

gem install compass

Spowoduje to zainstalowanie zarówno Compass, jak i Sass.

Jeśli chcesz utworzyć projekt Compass, wpisz: 

compass create /path/to/projectcd /path/to/projectcompass watch

Te trzy linie kodu oznaczają, że za każdym razem, gdy zmienisz plik Sass, zostaną one automatycznie skompilowane do CSS.

Alternatywnie możesz użyć Codekit (Mac) lub Prepros (Windows), aby skompilować Sass po zapisaniu.

Pierwsze kroki z kompasem

Kompas jest podzielony na moduły i aby rozpocząć korzystanie z jego narzędzi, najpierw musimy zaimportować moduł, który chcemy, do naszego głównego pliku .scss. Na przykład, aby zaimportować moduł CSS3, użylibyśmy: 

@import "compass/css3";

Teraz możemy zacząć używać narzędzi i miksów, które oferuje Compass dla nowych właściwości, które pojawiły się w CSS3. Najlepszą rzeczą jest to, że nie musimy ciągle wpisywać prefiksów dostawców, co zawsze stanowiło problem w przypadku CSS3.

Oto przykład, jeśli chcieliśmy stworzyć prosty 3-kolumnowy układ z rynną 20px, w CSS musielibyśmy wpisać: 

div{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;}

Możesz zobaczyć, jak trudne do opanowania jest to, że szybko kodujemy. Z pomocą Compassa i Sassa potrzebujemy tylko: 

div{@include column-count(3);@include column-gap(20px);}

Jak widać, usunęliśmy przedrostki dostawców, a to, co zrobiliśmy, zajęło 6 linii CSS w zaledwie 2.

Innym przykładem CSS, który wymaga dużej ilości pisania, są gradienty. Oto jak napisać prosty gradient w kolorze białym do czarnego w CSS: 

.gradient{background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #000000));background-image: -webkit-linear-gradient(#ffffff, #000000);background-image: -moz-linear-gradient(#ffffff, #000000);background-image: -o-linear-gradient(#ffffff, #000000);background-image: linear-gradient(#ffffff, #000000);}

Tworzenie tego samego efektu w programie Compass jest tak proste, jak: 

.gradient{@include background-image(linear-gradient(#fff, #000));}

Nie tylko znacząco zmniejsza to ilość kodu, ale jeśli chcesz zmienić kolory, w wersji Compass wystarczy zmienić je tylko raz.

Jest pełna lista skrócone właściwości CSS3 tutaj.

Compass zawiera także kilka pomocników dla linków, z których jeden to oszczędność czasu. Po pierwsze, musimy uwzględnić model typograficzny jako początek naszego głównego pliku Sass: 

@import "compass/typography"

Moduł typografii ma świetny skrót do stylizacji kolorów, jak na przykład: 

a{// link colors (normal, hover, active, visited, focus)@include link-colors(red, blue, grey, red, blue);}

To najlepsza rzecz w kompasie; wykorzystuje kod, którego używamy codziennie, i daje nam skróconą wersję.

Wniosek

Ten artykuł był tylko szybkim wprowadzeniem do Compass, ale jeśli uznałbyś ten temat za tak ekscytujący, jak ja, to zdecydowanie zaleciłbym sprawdź ich stronę internetową i odkryć więcej dostępnych narzędzi.

Mam nadzieję, że teraz rozważysz użycie Compass i Sass w swoich projektach, ponieważ są one naprawdę niesamowitymi dodatkami do zestawu narzędzi projektanta stron internetowych.

Czy używasz Compass lub Sass? Czy wolisz inny preprocesor? Daj nam znać w komentarzach.

Wyróżniony obraz / miniatura, obraz kompasu przez Shutterstock.

sass kompas przetwarzanie css rozpoczęcie pracy z kompasem jak zainstalować kompas rubinowe klejnoty