Sass Tutorial Budování Online vCard s Sass & Compass

Dnes budeme pokračovat v diskusi o Sassu a to bude poslední část naší série Sass. Tentokrát, spíše než teoretický přístup, to bude trochu praktičtější. Vytvoříme online vCard pomocí Sassu spolu s Compassem.

Myšlenka je, že vCard by měla být snadno nastavitelná, pro barvu a velikost. V tomto procesu budeme používat několik funkcí Sass a Compass jako Proměnné, Mixiny, Operace, Dědičnost selektorů, Vnořená pravidla a Compass Helpers. Pokud jste vynechali naše předchozí příspěvky z této série, doporučujeme, abyste se na ně nejprve podívali, než budete pokračovat.

Plánování a Wireframing

Při práci s programem Sass a Compass, plánování. Obvykle musíme mít velký obraz o tom, jak bude náš konečný výsledek (např. Stránka nebo webová stránka). Bude užitečné procházet některé stránky, jako je Behance nebo Dribbble pro nápady. Můžeme pak navrhnout nápady na papír nebo ho postavit v drátovém modelu, jako je tento příklad.

Jak můžete vidět na obrázku výše, naše vCard obsahuje kontaktní informace o 'John' - obrazový profil, nějaké informace o Johnovi, jako je jeho jméno, e-mailová adresa, telefonní číslo a stručný popis toho, kdo je nebo co dělá. To bude naše „bio“ sekce.

Níže jsou jeho sociální identity ve formě sociálních tlačítek. Bude to naše „sociální“ sekce.

Příprava aktiv

Než začneme kódování, zde je několik základních předpokladů, jak se připravit. Zjišťuji, že byste měli mít ve svém počítači nainstalovaný Sass a Compass.

(Pokud si nejste jisti, zda jste je nainstalovali, můžete tento příkaz spustit sass -v nebo kompas -v přes Příkazový řádek nebo terminál nebo, můžete vždy použít aplikaci, jako je Scout App, pokud dáváte přednost práci s GUI.)

Budeme také potřebovat několik aktiv, jako jsou ikony fontů a ikony sociálních médií, které můžete získat z míst jako ModernPictograms.

Konečně, protože používáme příkazový řádek / Terminál pro tento tutoriál, musíme se dostat do našeho adresáře a spustit projekt Compass s těmito dvěma příkazy: kompas init a hodinky kompasu.

Značky HTML

Níže je HTML značení naší vCard, je to docela jednoduché. Všechny sekce jsou zabaleny do logického tagu 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.
 
 
 
   Facebook
  Cvrlikání
 Google+
 Dribbling

Jak vidíte výše, sociální identity zahrnuté do „sociálního“sekce je strukturována v seznamu prvků, takže je můžeme snadno zobrazit vedle sebe. Každý z nich má podle této konvence název třídy social-facebook, social-twitter, sociální-google a tak dále.

Konfigurace kompasu

Potřebujeme nakonfigurovat Compass trochu tím, že odkomentujeme několik řádků config.rb souboru:

 # Zde můžete vybrat preferovaný styl výstupu (lze ho přepsat přes příkazový řádek): output_style =: expand # Povolit relativní cesty k aktivům pomocí pomocných funkcí kompasu. Uncomment: relative_assets = true # Chcete-li zakázat komentáře ladění, které zobrazují původní umístění selektorů. Nesouhlas: line_comments = false

Pokud nemůžete najít config.rb pravděpodobně tento příkaz nespustíte kompas init v adresáři projektu.

Import souborů

Protože budeme používat kompas, musíme jej importovat pomocí;

 @import "kompas";

A je to moje osobní preference obnovit výchozí styly z prohlížečů tak, že výstup bude vykreslen důsledněji. Kompas má v tomto případě modul Reset. Tento modul je založen na resetu Eric Meyer a může být importován pomocí;

 @import "kompas / reset";

Nicméně raději používám Normalize, která naštěstí také přichází ve formátu Sass / Scss. Stáhněte soubor zde, uložte jej do sass pracovní adresář a importujte jej do naší šablony stylů.

 @import "normalize";

Doporučené čtení: Kontrola úrovně priority stylu CSS

Proměnné

Určitě budeme mít v tabulce stylů několik konstantních hodnot, takže je uložíme do proměnných a tyto dvě proměnné níže definují základní barvu naší vCard.

 $ base: #fff; $ dark: darken ($ base, 10%);

Zatímco $ width proměnná níže bude šířka naší stránky; bude také základem pro definování dalších velikostí prvků.

 $ width: 500px; $ space: $ width / 25; // = 20px

A $ space Proměnná, jak vidíte, bude výchozí rozteč nebo velikost sloupce v naší vCard, která by v tomto příkladu byla 20px;

Kompas má také Helpers pro detekci velikosti obrázku a tuto funkci využijeme na našem obrazovém profilu následujícím způsobem;

 $ img: image-width ("me.jpg") + (($ space / 4) * 2);

Navíc Přidání z (($ space / 4) * 2) ve výše uvedeném kódu je vypočítat celkovou šířku obrazu včetně ohraničení, které bude rámečkem obrazu. Rám obecně má dvě strany; horní a dolní / levý a pravý, proto násobíme výsledek divize podle 2.

Výběr dědičnosti

V našem stylovém listu je zřejmě několik selektorů, které budou mít stejná pravidla pro styling. Abychom se vyhnuli opakování v našem kódu, budeme muset nejprve určit tyto styly a zdědit je pomocí @rozšířit směrnice. Tato metoda, v Sass, je znám jako Výběr dědičnosti, velmi užitečná funkce, která chybí v LESS.

 .float-left float: vlevo;  .box-sizing @include box-sizing (rámeček);

Styly

Když bylo vše, co je nutné, nastaveno, pak je načase vytvořit styl vCard, počínaje barvou pozadí do našeho HTML dokumentu;

 html výška: 100%; barva pozadí: $ base;

vCard

Následující styly definují obálku vCard. Pokud jste dříve pracovali s firmou LESS, bude vám tento kód známý a snadno strávitelný.

 .vcard width: $ width; okraj: 50px auto; barva pozadí: tmavší ($ základ, 5%); ohraničení: 1px pevné $ tmavé; @ zahrnout hraniční poloměr (3px); ul padding: 0; marže: 0; li seznam-styl: žádný;

Šířka obálky zdědí hodnotu od $ width proměnná. Barva pozadí je tmavší 5% od základní barvy, zatímco barva ohraničení bude tmavší 10%. Toto zbarvení se dosahuje pomocí barevných funkcí Sass.

VCard bude mít také 3px poloměr zaoblených rohů, který je dosažen pomocí Compass CSS3 Mixins; poloměr ohraničení (3px).

Bio Section

Jak jsme již v tomto tutoriálu zaznamenali, vCard lze rozdělit do dvou částí. Níže uvedené vnořené styly definují první sekci obsahující profil obrázku s několika detaily (jméno, e-mail a telefon).

 .bio border-bottom: 1px pevné $ tmavé; polstrování: $ space; @extend .box-sizing; img @extend .float-left; zobrazení: blok; border: ($ space / 4) pevné #ffffff;  .detail @extend .float-left; @extend .box-sizing; barva: tmavší ($ base, 50%); margin: left: $ space; dole: $ space / 2;  width: $ width - (($ space * 3) + $ img); li &: before width: $ space; height: $ space; margin-right: $ space; font-family: "ModernPictogramsNormal";  & .name: before content: "f";  & .email: before content: "m";  & .phone: before content: "N";

Z výše uvedeného kódu je jedna věc, o které si myslíme, že si musíte vzít oznámení. Šířka v .detail s touto rovnicí $ width - (($ space * 3) + $ img);.

Tato rovnice se používá k dynamickému výpočtu detailu šířka odečtením šířky profilu obrázku a mezer (výplň a okraj) od celkové šířky vCard.

Sociální sekce

Níže uvedené styly jsou pro druhou část vCard. Ve skutečnosti zde není žádný rozdíl s prostým CSS, pouze nyní jsou vnořeny a několik hodnot je definováno s proměnnými.

 .sociální background-color: $ dark; šířka: 100%; polstrování: $ space; @extend .box-sizing; ul text-align: center; li display: inline-block; šířka: 32px; výška: 32px; a text-decoration: none; displej: inline-block; šířka: 100%; výška: 100%; odrážka textu: 100%; white-space: nowrap; přetečení: skryté;

V této sekci zobrazíme ikony sociálních médií pomocí techniky sprite obrazu a aplikace Compass má tuto funkci rychlejší.

Nejdříve musíme umístit naše ikony do speciální složky - pojmenujme složku /sociální/, například. Zpátky ve stylu, zřetězte tyto ikony s následující @import pravidlo.

 @import "social / *. png";

sociální/ výše odkazujeme na složku, do které ukládáme ikony. Tato složka by měla být vnořena do složky s obrázky. Pokud se podíváme do naší složky obrázků, měli bychom vidět sprite obraz vygenerovaný náhodnými znaky social-sc805f18607.png. V tomto okamžiku se na front-endu nic neděje, dokud styly nepoužijeme s následujícím řádkem.

 @ zahrnout all-social-sprites;

Konečný výsledek

Konečně, po té tvrdé práci můžeme nyní vidět výsledek takto:

V případě, že si to myslíme 500px později je příliš široká, musíme pouze změnit hodnotu v $ width proměnná - například, 350px - zbytek bude “magicky” být upraven. Můžete také experimentovat s barevnou proměnnou.

Zobrazit ukázku
Stáhněte si zdroj

Závěr

V tomto tutoriálu jsme vám ukázali, jak vytvořit jednoduchou online vizitku se Sass a Compass; je to však jen příklad. Sass a Compass jsou opravdu mocné, ale někdy to není nutné. Například, když pracujeme na webových stránkách s několika stránkami a pravděpodobně budeme potřebovat pouze méně řádků stylů, použití služby Sass a Compass je považováno za nadměrné.

Tento post zavírá naši sasku a doufáme, že se vám to líbilo. Máte-li jakékoli otázky týkající se tohoto tématu, neváhejte jej přidat do pole pro komentář níže.