Sass bemutató Online vCard létrehozása Sass & Compass segítségével

Ma folytatjuk a Sassról folytatott megbeszéléseket, és ez lesz a Sass sorozatunk utolsó része. Ezúttal az elméleti megközelítés helyett ez egy kicsit praktikusabb lesz. Egy online vCard-ot fogunk létrehozni a Sass segítségével a Compass-szal együtt.

Az ötlet az, hogy a vCard könnyen állítható legyen a szín és a méret érdekében. A folyamat során néhány Sass és Compass funkciót használunk Változók, keverékek, műveletek, választók öröksége, beágyazott szabályok és Iránytű segítők. Ha elfelejtette a korábbi üzeneteinket ebből a sorozatból, javasoljuk, hogy először nézze meg őket, mielőtt folytatná.

Tervezés és Wireframing

A Sass és a Compass használatakor, elengedhetetlen a tervezés. Általában nagy képet kell kapnunk arról, hogy mi lesz a végeredmény (például oldal vagy weboldal). Hasznos lesz böngészni néhány webhelyet, mint például a Behance vagy a Dribbble ötleteket. Ezután papíron elkészíthetjük az ötleteket, vagy drótvázba építhetjük, mint az alábbi példa.

Mint látható a fenti képen, a vCard tartalmaz elérhetőségei a „John” -ról - képprofilt, néhány információt Johnról, például nevét, e-mail címét, telefonszámát és egy rövid leírást arról, hogy ki ő vagy mit csinál. Ez lesz a "bio" részünk.

Az alábbiakban társadalmi identitásait társadalmi gombok formájában láthatjuk. Ez lesz a „társadalmi” részünk.

Eszközök előkészítése

Mielőtt elkezdenénk a kódolást, itt van néhány lényeges elõkészítés. Összegyűjtöttem, hogy most már a Sass és a Compass telepítése szükséges.

(Ha nem biztos benne, hogy telepítette őket, futtathatja ezt a parancsot sass -v vagy iránytű -v keresztül Parancssor vagy terminál vagy, mindig olyan alkalmazást használhat, mint a Scout App, ha inkább egy GUI-vel dolgozik.)

Szükségünk lesz néhány olyan eszközre is, mint a betűtípus-ikonok és a szociális média ikonok, amelyeket a ModernPictograms-ról kaphat.

Végül, mivel a bemutatóhoz Command Prompt / Terminal programot használunk, navigálnunk kell a könyvtárunkba és futtatnunk kell a Compass projektet e két parancs segítségével: iránytű init és iránytű.

HTML jelölés

Az alábbiakban látható a vCardunk HTML-jelölése, ez elég egyszerű. Minden szakasz logikai HTML5 tagba van csomagolva

      Thoriq Firdaus
 [email protected]
 (+62) 1.2345.678.9
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. A suspendisse dolor neque, a pellentesque quis, a convallis sit amet tellus. Etiam és auctor arcu.
 
 
 
   Facebook
  Twitter
 Google+
 Dribbble

Amint láthatod, a társadalmi identitások a „szociális”A szekció a listaelemek között van strukturálva, így könnyen megjeleníthetők egymás mellett. Mindegyikük egy osztálynevet kap az egyezmény után szociális facebook, társadalmi-twitter, társadalmi-google stb.

Iránytű beállítása

Be kell állítanunk egy kicsit a Compass-ot, ha néhány sort bejelölünk config.rb fájl:

 # Itt kiválaszthatja a kívánt kimeneti stílust (felülírható a parancssoron keresztül): output_style =: expanded # Az eszközök relatív útvonalainak engedélyezése kompass segítő funkciók segítségével. Kizárás: santykes_azonosító = true # A szelektorok eredeti helyét megjelenítő hibakeresési megjegyzések letiltása. Uncomment: line_comments = false

Ha nem találja config.rb fájl, valószínűleg nem futtatta ezt a parancsot iránytű init a projektkönyvtárban.

Fájlok importálása

Mivel a Compass-ot használjuk, be kell importálnunk;

 @import "iránytű";

Személyes preferencia az alapértelmezett stílusok visszaállítása a böngészőkből, hogy a kimenet következetesebb legyen. Ebben az esetben az iránytűnek Reset modulja van. Ez a modul Eric Meyer CSS alaphelyzetbe áll, és importálható;

 @import "iránytű / visszaállítás";

A Normalizálást azonban szerencsére használom Sass / Scss formátumban is elérhető. Töltse le a fájlt itt, mentse el sass munkakönyvtár és importálja azt a stíluslapunkba.

 @import "normalizálni";

Ajánlott olvasás: A CSS stílus prioritás szintjének áttekintése

változók

A stíluslapon biztosan néhány állandó érték lesz, így változóinkban tároljuk őket, és az alábbi két változó meghatározza a vCard alapszínét..

 $ base: #fff; $ sötét: sötétebb ($ base, 10%);

Amíg a $ szélessége az alábbi változó lesz az oldalunk szélessége; ez lesz az egyéb elemméretek meghatározásának alapja is.

 $ szélesség: 500px; $ space: $ width / 25; // = 20px

És a $ tér mint látható, a vCard alapértelmezett távolság vagy oszlopméret lesz, amely ebben a példában lenne 20px;

Az iránytű segítői is képesek a képméret felismerésére, és ezt a funkciót a következő képprofilunkon fogjuk használni:

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

Az extra Kiegészítés nak,-nek (($ space / 4) * 2) a fenti kódban a teljes képszélesség kiszámítása, beleértve a képet képező keretet is. A keretnek általában két oldala van; felső és alsó / bal és jobb, ezért szaporítjuk a osztási eredmény által 2.

Kiválasztó öröklés

A stíluslapunkon látszólag néhány szelektor van, amelyeknek ugyanazok a szabályok vonatkoznak. A kód ismétlésének elkerülése érdekében ezeket a stílusokat először meg kell adnunk, és örökölniük kell őket a kóddal @extend szükség esetén. Ez a módszer Sass-ban ismert Kiválasztó öröklés, nagyon hasznos funkció, amely hiányzik a LESS-ben.

 .float-left float: balra;  .box-méretezés @inclose box-size (határoló doboz) ”;

Stílusok

Amikor minden szükségesre lett beállítva, itt az ideje, hogy a vCard-ot stílusosan formázzuk, kezdve a háttérszíntől a HTML-dokumentumunkig;

 html magasság: 100%; háttérszín: $ base;

vCard

A következő stílusok határozzák meg a vCard csomagolást. Ha korábban dolgoztál a LESS-el, akkor ez a kód ismerős lesz és könnyen emészthető.

 .vcard szélesség: $ szélesség; margin: 50px auto; háttérszín: sötétebb ($ base, 5%); határ: 1px szilárd $ sötét; @ zárja be a határ sugarát (3px); ul padding: 0; margin: 0; li list-style: nincs;

A burkolat szélessége az értéket örökölte $ szélessége változó. A háttér színe sötétebb 5% az alapszíntől, míg a szegély színe sötétebb lesz 10%. Ez a színezés a Sass színfunkciókkal érhető el.

A vCard is rendelkezik 3px lekerekített sarkok sugara, amelyet a Compass CSS3 Mixins alkalmazásával érünk el; határ-sugár (3px).

Bio szakasz

Amint ezt a bemutatót már korábban is megjegyeztük, a vCard két részre osztható. Az alábbi beágyazott stílusok meghatározzák az első részt, amely néhány részletet (név, e-mail és telefon) tartalmazza a képprofilt..

 .bio border-bottom: 1px szilárd $ sötét; párnázás: $ space; @extend .box-méretezés; img @extend .float-left; kijelző: blokk; határ: ($ space / 4) szilárd #ffffff;  .detail @extend .float-left; @extend .box-méretezés; szín: sötétebb ($ base, 50%); margó: left: $ space; alsó: $ space / 2;  szélesség: $ szélesség - (($ space * 3) + $ img); li &: előtt szélesség: $ space; magasság: $ space; margin-right: $ space; font-family: "ModernPictogramsNormal";  & .name: tartalom: "f" előtt;  & .email: tartalom: "m előtt;  & .phone: tartalom: N "előtt;

A fenti kódból egy dolog van, amit úgy gondolunk, hogy észre kell vennünk. A szélesség a .Részlet Ezzel az egyenletgel a szelektor van megadva $ width - (($ space * 3) + $ img);.

Ezt az egyenletet a részletek dinamikus kiszámításához használjuk szélesség a képprofil szélességének és a terek (párnázás és margó) levonásával a vCard teljes szélességéből.

Szociális szakasz

Az alábbi stílusok a vCard második szakaszára vonatkoznak. Itt valójában nincs különbség az egyszerű CSS-vel, csak most vannak beágyazva, és néhány értéket változókkal definiálunk.

 .szociális háttérszín: $ sötét; szélesség: 100%; párnázás: $ space; @extend .box-méretezés; ul text-align: center; li display: inline-block; szélesség: 32px; magasság: 32x; a text-decoration: nincs; kijelző: inline-block; szélesség: 100%; magasság: 100%; szöveg-francia bekezdés: 100%; fehér tér: mostcsak; túlcsordulás: rejtett;

Ebben a részben bemutatjuk a szociális média ikonokat a kép sprite technikával, és a Compass funkciója gyorsabban teszi ezt a feladatot.

Először is el kell helyeznünk az ikonjainkat egy speciális mappába - nevezzük a mappát /társadalmi/, például. Vissza a stíluslapba, illessze össze ezeket az ikont az alábbiakkal @import szabály.

 @import "social / *. png";

A társadalmi/ a fenti hivatkozás a mappára vonatkozik, ahol az ikonok tárolásra kerülnek. Ezt a mappát be kell helyezni a képmappába. Most, ha megnézzük a képmappánkban, látnunk kell egy véletlenszerű karakterekkel létrehozott sprite képet, mint például társadalmi-sc805f18607.png. Ezen a ponton semmi sem történik meg az elülső oldalon, amíg a stílusokat a következő sorral nem alkalmazzuk.

 @ tartalmazza az all-social-sprites;

Végeredmény

Végül, a kemény munka után most láthatjuk az eredményt:

Abban az esetben, ha azt gondoljuk 500px túl széles, később csak az értéket kell megváltoztatnunk $ szélessége változó - például, 350px - a többi lesz “varázslatosan” módosítani kell. A színváltozóval is kísérletezhet.

Demó megtekintése
Letöltés forrása

Következtetés

Ebben a bemutatóban megmutattuk, hogyan készítsünk egy egyszerű online vCard-ot Sass és Compass segítségével; ez azonban csak egy példa. Sass és Compass valóban erősek, de néha nem szükséges. Például, amikor néhány oldalt tartalmazó webhelyen dolgozunk, és valószínűleg kevesebb stílussorra lesz szükségünk, a Sass és a Compass használata túlzottnak tekinthető.

Ez a hozzászólás bezárja a Sass sorozatunkat, és reméljük, hogy élvezted. Ha bármilyen kérdése van ezzel a témával kapcsolatban, ne habozzon hozzáadni az alábbi megjegyzések mezőbe.