Sass Tutorial Budowanie vCard online za pomocą Sass & Compass
Dzisiaj będziemy kontynuować naszą dyskusję na temat Sassa i będzie to ostatnia część naszej serii Sass. Tym razem, zamiast podejścia teoretycznego, będzie to trochę bardziej praktyczne. Stworzymy vCard online za pomocą Sass wraz z Compass.
Chodzi o to, że vCard powinien być łatwo regulowany, pod względem koloru i rozmiaru. W tym procesie będziemy korzystać z kilku funkcji Sass i Compass, takich jak Zmienne, miksy, operacje, dziedziczenie selektorów, zagnieżdżone reguły i Pomocnicy kompasu. Jeśli przegapiłeś nasze poprzednie posty z tej serii, zalecamy, aby najpierw je obejrzeć.
Planowanie i wireframing
Podczas pracy z Sass i Compass, planowanie jest niezbędne. Zazwyczaj musimy mieć duży obraz tego, jak będzie wyglądał nasz końcowy wynik (np. Strona lub strona internetowa). Pomocne będzie przeglądanie pomysłów w takich witrynach jak Behance lub Dribbble. Następnie możemy opracować pomysły na papierze lub skonstruować je w modelu szkieletowym, jak w poniższym przykładzie.
Jak widać na powyższym obrazku, nasza vCard zawiera informacje kontaktowe o „John” - profil obrazu, niektóre informacje o Johnie, takie jak jego imię i nazwisko, adres e-mail, numer telefonu i krótki opis tego, kim jest lub co robi. To będzie nasza sekcja „bio”.
Poniżej znajdują się jego tożsamości społeczne w postaci przycisków społecznościowych. To będzie nasza sekcja „społeczna”.
Przygotowywanie aktywów
Zanim zaczniemy kodowanie, oto kilka zasadniczych rzeczy, które należy przygotować. Rozumiem, że do tej pory powinieneś mieć zainstalowany Sass i Compass w swoim komputerze.
(Jeśli nie jesteś pewien, czy je zainstalowałeś, możesz uruchomić to polecenie sass -v lub kompas -v przez Wiersz polecenia lub Terminal lub zawsze możesz używać aplikacji, takich jak Scout App, jeśli wolisz pracować z GUI.)
Potrzebujemy również kilku zasobów, takich jak ikony czcionek i ikony mediów społecznościowych, które można uzyskać z takich miejsc jak ModernPictograms.
Wreszcie, ponieważ używamy wiersza poleceń / Terminal dla tego samouczka, musimy przejść do naszego katalogu i uruchomić projekt Compass z tymi dwoma poleceniami: kompas init i zegarek kompasowy.
HTML Markup
Poniżej znajduje się znacznik HTML naszej wizytówki vCard, jest to dość proste. Wszystkie sekcje są opakowane w logiczny tag HTML5 .
- Thoriq Firdaus
- [email protected]
- (+62) 1.2345.678,9
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor neque, eleifend at pellentesque quis, convallis sit amet tellus. Etiam et auctor arcu.
Jak widać powyżej, tożsamości społeczne zawarte w „społecznym”sekcja jest zorganizowana w elementy listy, dzięki czemu możemy łatwo wyświetlać je obok siebie. Każda z nich otrzymuje nazwę klasy zgodnie z tą konwencją społeczny facebook, Twitter społecznościowy, społeczno-google i tak dalej.
Konfiguracja kompasu
Musimy nieco skonfigurować Compass, odkomentując kilka wierszy config.rb plik w następujący sposób:
# Możesz tutaj wybrać preferowany styl wyjściowy (można go zastąpić za pomocą wiersza poleceń): output_style =: expanded # Aby włączyć względne ścieżki do zasobów za pomocą funkcji pomocnika kompasu. Uncomment: relative_assets = true # Aby wyłączyć debugowanie komentarzy wyświetlających oryginalną lokalizację selektorów. Uncomment: line_comments = false
Jeśli nie możesz znaleźć config.rb plik, prawdopodobnie nie uruchomiłeś tego polecenia kompas init w katalogu projektu.
Importowanie plików
Ponieważ będziemy używać Compassa, musimy go zaimportować za pomocą;
@import „kompas”;
Osobiście preferuję zresetowanie domyślnych stylów z przeglądarek, tak aby dane wyjściowe były bardziej spójne. Kompas, w tym przypadku, ma moduł Reset. Ten moduł jest oparty na resecie CSS Erica Meyera i można go importować za pomocą;
@import „kompas / reset”;
Wolę jednak korzystać z Normalize na szczęście jest również w formacie Sass / Scss. Pobierz plik tutaj, zapisz go sass katalog roboczy i zaimportuj go do naszego arkusza stylów.
@import „normalizuj”;
Rekomendowane lektury: Przeglądanie poziomu priorytetu stylu CSS
Zmienne
Z pewnością będziemy mieć kilka stałych wartości w arkuszu stylów, dlatego będziemy przechowywać je w zmiennych, a te dwie zmienne poniżej zdefiniują podstawowy kolor naszej wizytówki vCard.
$ base: #fff; $ dark: darken ($ base, 10%);
Podczas, gdy $ szerokość zmienna poniżej będzie szerokością naszej strony; będzie również podstawą do zdefiniowania innych rozmiarów elementów.
$ szerokość: 500px; $ space: $ width / 25; // = 20px
I $ space zmienna, jak widzisz, będzie domyślnym odstępem lub rozmiarem kolumny w naszej vCard, która w tym przykładzie byłaby 20px;
Compass ma także pomocników do wykrywania rozmiaru obrazu, a my skorzystamy z tej funkcji na naszym profilu obrazu w następujący sposób;
$ img: image-width ("me.jpg") + (($ spacja / 4) * 2); Statysta Dodanie z (($ space / 4) * 2) w powyższym kodzie jest obliczenie całkowitej szerokości obrazu, w tym obramowania, które będzie ramkować obraz. Rama ogólnie ma dwie strony; góra i dół / lewo i prawo, dlatego mnożymy wynik podziału przez 2.
Dziedziczenie selektora
W naszym arkuszu stylów widocznie jest kilka selektorów, które będą miały te same zasady stylizacji. Aby uniknąć powtórzeń w naszym kodzie, musimy najpierw określić te style i odziedziczyć je za pomocą @poszerzać w razie potrzeby. Ta metoda w Sassie jest znana jako Dziedziczenie selektora, bardzo przydatna funkcja, której brakuje w LESS.
.float-left float: left; .box-sizing @include box-sizing (border-box);
Style
Kiedy wszystko, co jest konieczne, zostało skonfigurowane, nadszedł czas na stylowanie naszej wizytówki vCard, począwszy od koloru tła do naszego dokumentu HTML;
html wysokość: 100%; background-color: $ base;
vCard
Następujące style definiują opakowanie vCard. Jeśli wcześniej pracowałeś z LESS, ten kod będzie Ci znany i łatwy do strawienia.
.vcard width: $ width; margin: 50px auto; background-color: darken ($ base, 5%); border: 1px solid $ dark; @include border-radius (3px); ul padding: 0; margines: 0; li list-style: none;
Szerokość opakowania dziedziczy wartość z $ szerokość zmienna. Kolor tła jest ciemniejszy o 5% od koloru podstawowego, podczas gdy kolor obramowania będzie ciemniejszy o 10%. Ta kolorystyka jest uzyskiwana za pomocą funkcji kolorów Sass.
VCard również będzie miała 3px promień zaokrąglonych rogów uzyskiwany przy użyciu Compass CSS3 Mixins; border-radius (3px).
Sekcja Bio
Jak zauważyliśmy na początku tego samouczka, vCard można podzielić na dwie sekcje. Poniższe zagnieżdżone style zdefiniują pierwszą sekcję zawierającą profil obrazu z kilkoma szczegółami (nazwa, adres e-mail i telefon).
.bio border-bottom: 1px solid $ dark; padding: $ space; @extend .box-sizing; img @extend .float-left; Blok wyświetlacza; border: ($ space / 4) stałe #ffffff; .detail @extend .float-left; @extend .box-sizing; kolor: ciemniejszy ($ baza, 50%); margin: left: $ space; dół: $ space / 2; width: $ width - (($ spacja * 3) + $ img); li &: before width: $ space; wysokość: $ spacja; margin-right: $ space; font-family: „ModernPictogramsNormal”; & .name: before content: "f"; & .email: before content: "m"; & .phone: before content: "N";
Jest jedna rzecz z powyższego kodu, którą uważamy za konieczną do wzięcia pod uwagę. Szerokość w .Szczegół selektor jest określony za pomocą tego równania $ width - (($ spacja * 3) + $ img);.
To równanie służy do dynamicznego obliczania szczegółów szerokość odejmując szerokość profilu obrazu i przestrzenie (wypełnienie i margines) od całkowitej szerokości vCard.
Sekcja Społeczna
Poniższe style dotyczą drugiej sekcji vCard. W rzeczywistości nie ma tu różnicy w stosunku do zwykłego CSS, tylko teraz są one zagnieżdżone, a kilka wartości jest definiowanych za pomocą zmiennych.
.social kolor tła: $ ciemny; szerokość: 100%; padding: $ space; @extend .box-sizing; ul text-align: center; li display: inline-block; szerokość: 32px; wysokość: 32px; a dekoracja tekstowa: brak; wyświetlacz: blok śródliniowy; szerokość: 100%; wysokość: 100%; wcięcie tekstu: 100%; white-space: nowrap; przepełnienie: ukryte;
W tej sekcji wyświetlimy ikony mediów społecznościowych za pomocą techniki obrazków, a Compass ma funkcję umożliwiającą szybszą pracę.
Przede wszystkim musimy umieścić nasze ikony w specjalnym folderze - nazwijmy folder /społeczny/, na przykład. Wracając do arkusza stylów, połącz te ikony z następującymi @import reguła.
@import "social / *. png";
The społeczny/ powyżej odnoszą się do folderu, w którym przechowujemy ikony. Ten folder powinien być zagnieżdżony w folderze obrazu. Teraz, jeśli spojrzymy na nasz folder obrazów, powinniśmy zobaczyć obraz sprite wygenerowany losowymi postaciami, takimi jak social-sc805f18607.png. W tym momencie nic nie dzieje się na froncie, dopóki nie zastosujemy stylów w następującej linii.
@zawiesz wszystkie duchy społeczne;
Ostateczny wynik
Wreszcie, po całej ciężkiej pracy, możemy teraz zobaczyć taki wynik:
W przypadku, gdy tak myślimy 500px jest zbyt szeroki później, musimy tylko zmienić wartość w $ szerokość zmienna - na przykład, 350px - reszta będzie “magicznie” być regulowanym. Możesz także eksperymentować ze zmienną koloru.
- Wyświetl demo
- Pobierz źródło
Wniosek
W tym samouczku pokazaliśmy, jak zbudować prostą wizytówkę online w Sass i Compass; jest to jednak tylko przykład. Sass i Compass są rzeczywiście potężne, ale czasami nie jest to konieczne. Na przykład, kiedy pracujemy na stronie internetowej z kilkoma stronami i prawdopodobnie również będziemy potrzebować tylko mniejszej liczby linii stylów, użycie Sass i Compass jest uważane za nadmierne.
Ten post zamyka naszą serię Sass i mamy nadzieję, że Ci się podobało. Jeśli masz jakiekolwiek pytania dotyczące tego tematu, nie wahaj się dodać go w polu komentarza poniżej.
