Syntaktycznie niesamowite arkusze stylów za pomocą kompasu w Sassie
W naszym ostatnim poście wspomnieliśmy kiedyś o Compassie. Zgodnie z oficjalną stroną, jest on opisany jako open-source CSS Authoring Framework.
W skrócie, Compass jest rozszerzeniem Sass i, podobnie jak LESS Element of LESS, ma kilka gotowych do użycia CSS3 Mixinów, z wyjątkiem tego, że dodał także kilka innych rzeczy, które czynią go bardziej wydajnym narzędziem towarzyszącym dla Sassa. Sprawdźmy to.
Instalowanie kompasu
Kompas, jak Sass, musi być zainstalowany w naszym systemie. Ale jeśli używasz aplikacji takiej jak Scout App lub Compass.app, nie będzie to konieczne.
Bez nich musisz to zrobić “ręcznie” przez Terminal / Wiersz polecenia. Aby to zrobić, wpisz następujący wiersz polecenia;
Na terminalu Mac / Linux
sudo gem install kompas
W wierszu polecenia systemu Windows
kompas instalacji klejnotów
Jeśli instalacja się powiedzie, powinieneś otrzymać powiadomienie, jak pokazano poniżej;
Następnie uruchom następujący wiersz polecenia w katalogu roboczym, aby dodać Kompasuj pliki projektu.
kompas init
Dalsze czytanie: Dokumentacja linii poleceń kompasu
Konfiguracja kompasu
Jeśli uruchomiłeś to polecenie kompas init, powinieneś mieć teraz plik o nazwie config.rb w twoim katalogu roboczym. Ten plik służy do konfigurowania danych wyjściowych projektu. Na przykład możemy zmienić nasze preferowane nazwy katalogów.
http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js"
Usuń linię komentarza wygenerowaną przez Compass; ustawiamy prawdziwe jeśli potrzebujemy wydrukować komentarze lub fałszywy jeśli nie musi.
line_comments = false
Możemy również zdecydować o wyjściu CSS. Dostępne są cztery opcje :rozszerzony, :kompaktowy, :sprężonyi : zagnieżdżone. Na razie potrzebujemy tylko rozszerzenia, ponieważ wciąż jesteśmy na etapie rozwoju.
output_style =: rozwinięty
Myślę, że te konfiguracje będą wystarczające dla większości projektów, ale zawsze możesz odwołać się do tej dokumentacji, jeśli potrzebujesz więcej preferencji..
Wreszcie musimy zegarek każdy plik w katalogu za pomocą tego wiersza polecenia;
zegarek kompasowy
Ta linia poleceń, podobnie jak w Sassie, będzie obserwować każdą zmianę pliku i tworzyć lub aktualizować odpowiednie pliki CSS. Ale pamiętaj, uruchom tę linię po skonfigurowaniu projektu w config.rb, w przeciwnym razie zignoruje zmiany w pliku.
CSS3 Mixins
Przed przejściem przez CSS3, w naszym podstawowym .scss pliku, musimy zaimportować kompas w następującej linii @import „kompas”;, Spowoduje to zaimportowanie wszystkich rozszerzeń w Compass. Ale jeśli potrzebujemy tylko CSS3, możemy również zrobić to bardziej konkretnie za pomocą tej linii @import „kompas / css3”.
Dalsze czytanie: Kompas CSS3.
Zacznijmy teraz tworzyć coś z Saas i Compass. W dokumencie HTML, zakładając, że również go utworzyłeś, umieścimy następujący prosty znacznik:
Pomysł jest również prosty; stworzymy obrócone pudełko z zaokrąglonymi narożnikami, a poniżej znajdują się nasze zagnieżdżone style Sass dla startera;
body background-color: # f3f3f3; sekcja szerokość: 500px; margin: 50px auto 0; div width: 250px; wysokość: 250px; background-color: #ccc; margin: 0 auto;
Aby uzyskać nasz prostokąt w zaokrąglonych narożnikach, możemy dołączyć Compass CSS3 Mixins w następujący sposób;
body background-color: # f3f3f3; sekcja szerokość: 500px; margin: 50px auto 0; div width: 250px; wysokość: 250px; background-color: #ccc; margin: 0 auto; @włącz promień granicy;
To promień graniczny Miksy generują wszystkie prefiksy przeglądarki, a domyślnie promień narożnika będzie 5px. Ale w ten sposób możemy również określić promień dla naszych potrzeb @include border-radius (10px); .
sekcja div szerokość: 250px; wysokość: 250px; background-color: #ccc; margin: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;
Następnie jako plan obrócimy również pole. Jest to naprawdę łatwe do zrobienia za pomocą Compassa, wszystko, co musimy zrobić, to po prostu wywołać metodę transformacji, tak jak to;
body background-color: # f3f3f3; sekcja szerokość: 500px; margin: 50px auto 0; div width: 250px; wysokość: 250px; background-color: #ccc; margin: 0 auto; @include border-radius (10px); @include rotate;
Ta mieszanka wygeneruje również żmudne przedrostki dostawcy, a obrót domyślnie zajmie 45 stopni. Zobacz wygenerowany CSS poniżej.
sekcja div szerokość: 250px; wysokość: 250px; background-color: #ccc; margin: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); -ms-transform: rotate (45deg); -o-transform: rotate (45deg); transform: rotate (45deg);
Pomocnicy kompasu
Jedną z najpotężniejszych funkcji Compassu są Pomocnicy. Zgodnie z oficjalną stroną, Pomocnicy kompasu to funkcje, które zwiększają funkcje dostarczane przez Sass. W porządku, spójrzmy na poniższe przykłady, aby uzyskać wyraźny obraz.
Dodawanie plików z czcionkami @
W tym przykładzie dodamy niestandardową rodzinę czcionek za pomocą @ font-face reguła. W zwykłym CSS3 kod może wyglądać mniej więcej tak, jak poniżej, składający się z czterech różnych typów czcionek i jest trudny do zapamiętania dla niektórych osób.
@ font-face font-family: "MyFont"; src: format url ('/ fonts / font.ttf') ('truetype'), format url ('/ fonts / font.otf') ('opentype'), format url ('/ fonts / font.woff') (format „woff”), url („/ fonts / font.eot”) („osadzony-opentype”); Z kompasem możemy zrobić to samo łatwiej z font-files () Pomocnicy;
@include font-face („MyFont”, font-files („font.ttf”, „font.otf”, „font.woff”, „font.eot”));
Powyższy kod wygeneruje wynik, który jest dokładnie taki sam jak pierwszy fragment kodu, automatycznie wykryje także typ czcionki i doda ją do format() składnia.
Jeśli jednak przyjrzymy się dokładnie kodowi, zobaczymy, że nie dodaliśmy ścieżki do czcionki (/ czcionki /). Skąd Compass wiedział, gdzie znajdują się czcionki? Cóż, nie daj się zwieść, ta ścieżka faktycznie pochodzi config.rb z fonts_path własność;
fonts_dir = "czcionki"
Powiedzmy, że zmienimy to na fonts_dir = "myfonts", wtedy wygenerowany kod będzie url ('/ myfonts / font.ttf'). Domyślnie, gdy nie określamy ścieżki, Compass skieruje ją na arkusze stylów / czcionki.
Dodawanie obrazu
Stwórzmy kolejny przykład, tym razem dodamy obraz. Dodawanie obrazów za pomocą CSS to częsta sprawa. Zazwyczaj robimy to za pomocą zdjęcie w tle własność, tak;
div background-image: url ('/ img / the-image.png'); W kompasie zamiast używania url () funkcja, możemy ją zastąpić image-url () Pomocnicy i podobni do dodawania @ font-face powyżej, możemy całkowicie zignorować ścieżkę i pozwolić Compassowi poradzić sobie z resztą.
Ten kod wygeneruje również dokładnie taką samą deklarację CSS, jak w pierwszym fragmencie.
div background-image: image-url (the-image.png);
Ponadto Compass ma również pomocników wymiaru obrazu, wykrywa przede wszystkim szerokość i wysokość obrazu, więc w przypadku, gdy potrzebujemy ich obu w CSS, możemy dodać dwie kolejne linie w następujący sposób;
div background-image: image-url ("images.png"); width: image-width ("images.png"); height: image-height ("images.png"); Wyjście stanie się coś takiego;
div background-image: url ('/ img / images.png? 1344774650'); szerokość: 80px; wysokość: 80px; Dalsze czytanie: Funkcje pomocnika kompasu
Końcowa myśl
Dobrze, dzisiaj dużo rozmawialiśmy o Compassie i jak widać, to naprawdę potężne narzędzie i pozwól nam pisać CSS w bardziej elegancki sposób.
I, jak już wiesz, Sass nie jest jedynym Preprocesor CSS; jest też MNIEJSZE, o czym dokładnie mówiliśmy wcześniej. W następnym poście postaramy się porównać, jeden po drugim, który z tych dwóch zadań lepiej wykonuje wstępne przetwarzanie CSS.
- Pobierz źródło
