Sāciet tīmekļa projektus ātrāk, izmantojot Sassaparilla

Saturs

• Uzstādīšana
• Piecelšanās un skriešana
• Apskatiet config.rb
• CSS iestatīšana
• Mape libs
• Labāks ritms un vadīšana
• 1. posms
• 2. posms
• Atstarpes bloki un citi elementi
• Viens pēdējais triks
• Pēdējais vārds
• Patika tas? Izlasiet šos!

Ja jūs esat kaut kas līdzīgs mums, jūs piekritīsit, ka jaunas priekšējās daļas veidošanas sākšana bieži ir atkārtots uzdevums. Starp HTML, JavaScript un CSS iestatīšanu (kā arī pievienojot pārbaudītus noklusējumus iestatījumam), iespējams, jūs pavadīsit lielāko daļu šo agrīno stundu, veicot simtreiz iepriekš paveiktās darbības. Mēs izveidojām Sassaparilla, lai glābtu mūs (un, cerams, arī jūs), ka tas nav jādara.

Protams, tur ir daudz rīku, kas arī to dara. Prātā nāk brīnišķīgā HTML5 katlu plāksne vai Zurb's Foundation. Tomēr mēs bieži pavadījām tikpat daudz laika, kā noņemt elementus no šīm katlām, kā tad, kad pievienojām elementus katram jaunam projektam.

Atrisinājums? Apvienojiet tikai projekta uzsākšanai nepieciešamos elementus un padariet tos pēc iespējas elastīgākus. Izmantojot izmēģinājumus un kļūdas, kā arī daudz uzlabojumu, mēs nolēmām par šādiem Sassaparilla mērķiem:

1. Padariet pieejamu un mērogojamu kodu pēc iespējas vieglāk un ātrāk ierakstāmu
2. Koncentrējieties uz tipogrāfiju un vertikālo ritmu, un padariet to viegli īstenojamu
3. Sagatavojiet sistēmu, kas var viegli pielāgoties izmaiņām, strādājot pie projekta
4. Iekļaujiet tikai to, kas mums nepieciešams, un izmantojiet pēc iespējas mazāk elementu

Un tā dzima Sasaparilla. Tas nav katls, tas drīzāk ir sākumpunkts jūsu projektiem.

• Lejupielādējiet šīs apmācības avota failus

Uzstādīšana

Kā norāda nosaukums, Sassaparilla paļaujas uz priekšapstrādātāju Sass un tā labāko draugu Compass, lai viss būtu elastīgs. Lai projektos izmantotu Sassaparilla, jums būs jāinstalē Compass.

Tas ir diezgan vienkārši, ja izmantojat Mac:

1. Vienkārši atveriet termināli
2. Ierakstiet gem update --system, lai atjauninātu jūsu Ruby vidi
3. Ierakstiet gem install compass, lai instalētu jaunāko Compass versiju

Pilna instalēšanas informācija ir atrodama Compass vietnē.

Piecelšanās un skriešana

Sassaparilla iedarbināšana ir ļoti vienkārša. Varat izmantot tādu GUI kā Codekit, taču mēs šai apmācībai pieņemsim, ka izmantojat Mac datoru, izmantosiet termināli un vietnē Sassaparilla esat lejupielādējis Sassaparilla, nevis no DitHub.

1. Izveidojiet jaunu mapi ar nosaukumu Demo
2. Kopējiet failus no Sassaparilla mapē Demo
3. Atveriet jaunu logu terminālā
4. Ierakstiet cd un pēc tam velciet mapi Demo termināla logā un nospiediet Return. Jūs tagad esat nomainījis direktoriju šajā mapē
5. Tagad ierakstiet kompasa pulksteni un nospiediet Return
6. Jums vajadzētu redzēt ziņojumu “Kompass aptaujā izmaiņas”. Tas nozīmē, ka katru reizi, kad saglabājat SCSS failu, tas atjauninās jūsu CSS
7. Tieši tā

Apskatiet config.rb

Konfigurācijas failā ir jūsu aktīvu ceļi. Sassaparilla gadījumā mēs saglabājam konfigurācijas failu projekta saknē un pēc tam visus CSS, JavaScript, attēlus utt. Saglabājam aktīvu mapē, katram elementam ir apakšmape. Tādējādi viss ir glīts un glīts.

Tomēr konfigurācijas failā varat mainīt ceļu uz saviem līdzekļiem, ja vēlaties strādāt ar citu iestatījumu. Lai redzētu izmaiņas, iespējams, būs jāpārtrauc un jāpalaiž kompasa skatīšanās komanda.

Sassaparilla seko noteiktai CSS kaskādei un izmanto vairākus SCSS failus, no kuriem katram ir atšķirīgs mērķis. Tas ļauj iekļaut (vai neiekļaut) atsevišķas daļas atkarībā no tā, kas jums nepieciešams.

CSS iestatīšana

Visi demonstrācijas vietnes SCSS faili dzīvo mapē aktīvi / CSS. Šeit apkopo arī visas CSS. Mūsu gadījumā uz vienu CSS failu ar nosaukumu screen.css.

Šis fails satur lielāko daļu jūsu stilu, kā arī apvieno pārējās daļējās stila lapas vienā CSS failā. Kopumā šajā stillapā lielāko daļu darba darīsit, kad būsiet uzrakstījis globālos iestatījumus.

Kā noklusējums tas ietver dažus galvenes elementa, saišu un multivides vaicājumu noklusējuma stilus. Tie galvenokārt ir atstāti kā piemērs tam, kā izmantot daļu no sintakses, kuru mēs aplūkosim vēlāk. Ja vēlaties, varat tos noņemt.

Mape libs

Jūs pamanīsit arī apakšmapi ar nosaukumu libs. Šeit dzīvo šie pieci SCSS faili. Jūs pamanāt, ka tie visi sākas ar pasvītrojumu. Tas vienkārši nozīmē, ka tad, kad Compass liekam sastādīt mūsu projektu, šie faili netiks apkopoti viņu pašu CSS failā. Tāpēc failos, kuru prefikss ir pasvītrots, ir:

• _reset.scss Šis fails satur vienkāršu HTML elementu atiestatīšanu. Tiek pieņemts, ka jūsu tīmekļa lapai būs veidlapas, tāpēc atiestatiet arī tās. Ja jūsu vietnē netiek izmantotas veidlapas, varat noņemt šos atiestatījumus.
• settings.scss Šajā failā ir visi vietnes mainīgie. Šeit dzīvo tādas lietas kā krāsas un fontu lielums. Šis fails ir paredzēts, lai noteiktu jūsu galveno iestatījumu, un tajā tiek izmantoti Compass pamata un fonta lieluma mērījumi. Vairāk par to vēlāk.
• mixins.scss Mixins ir jebkurš lietotāja veidots mixins projektam (Compass jau ir daudz iepriekš definētu, kurus ir vērts pārbaudīt). Kā noklusējums, lai sāktu darbu, esam iekļāvuši dažus vienkāršus. Pēc vajadzības pievienojiet vairāk.
• tipogrāfija.scss Šis fails satur vietnes galveno salikumu. Tas ir atkarīgs no mainīgo iestatīšanas failā settings.scss, kuru mēs aplūkosim tālāk. Arī šajā failā pēc noklusējuma ir daži sintakses piemēri, lai sāktu darbu.
• formas.scss Šis fails satur noklusējuma veidlapas elementus un standarta stilu. Ja neizmantojat veidlapas vai vēlaties tās stilizēt pats, varat droši atstāt šo failu.

Labāks ritms un vadīšana

Sasaparilla mēģina pēc iespējas vieglāk veikt ievadīšanu un atstarpes, rakstot pieejamu kodu. Mēs neesam ieinteresēti viltīgā matemātikā, bet mums patīk strādāt ems. Par laimi, Compass to var paveikt, izmantojot dažus gudrus noklusējumus un trikus, kā arī dažas komandas.

Lūk, kā mēs to darām:

1. posms

Iestatījumos.scss iestatiet savu bāzes fonta lielumu: pēc noklusējuma tas ir iestatīts uz 16 pikseļiem, un tas parasti darbojas labi jūsu aprēķinos, tāpēc jums tas nav jāmaina (ja vēlaties, varat to izdarīt).

Iestatiet bāzes līnijas augstumu: lai novērstu savādi izvietotus priekšējos un lielos atstarpes starp līnijām, mēs vēlētos izmantot mazāku izmēru, kā jūs varētu darīt drukas dizainā. Kaut kas līdzīgs 6 pikseļiem darbojas labi. Ir vērts spēlēt ar šo vērtību atkarībā no izmantotajiem fontiem. Vēlāk jūs izmantosiet šīs bāzes līnijas reizinājumus, lai izveidotu vadību un atstarpi.

2. posms

Vietnē typography.scss iestatiet noklusējuma tipogrāfiju. Tas, kā jūs lietojat savus stilus, ir atkarīgs no jums, taču šajā piemērā mēs izmantojam globālos iestatījumus (H1, P, UL utt.).

Lai saglabātu jauku vertikālu ritmu, vienmēr, kad iestatāt fonta lielumu, izmantosiet komandu Adjust-font-size-to. Tas vienkārši liek elementam kļūt par šo izmēru pikseļos un pēc tam pārveidot par ems, salīdzinot ar bāzes fonta lielumu, ko mēs iestatījām pirmajā posmā. Šī vērtība (piem., 26 pikseļi) kļūst arī par jūsu pamata vienību, lai noskaidrotu, cik daudz atstarpju jums vajag virs un zem elementa.

Piemēram:

@ iekļauj koriģēt fonta lielumu (26 pikseļi);

Pielāgojiet fonta lielumu līdz 26 pikseļiem un atgrieziet em ekvivalentu.

piemale: 0 0 ritms (2, 26px) 0;

Pievienojiet divas mūsu bāzes līnijas augstuma (6x2 = 12 pikseļi) līnijas zem elementa, balstiet šīs divas līnijas uz mūsu fonta lielumu un slēpto, lai tas būtu ekvivalents.

Tādēļ:

@ iekļauj pielāgot fonta lielumu (26 pikseļi); piemale: 0 0 ritms (2, 26px) 0;

Dod mums:

fonta lielums: 1.625em; līnijas augstums: 1,15385em; starpība: 0 0 0.46154em 0;

Atstarpes bloki un citi elementi

Lai saglabātu vienmērīgu vertikālu ritmu, jums arī vertikāli jānovieto citi lapas elementi (sadaļas utt.). Par laimi, kompasa vadītājs un piekabes funkcijas ir veidotas tieši šim gadījumam.

Jūs tos izmantojat šādi:

@ iekļaut polsterējumu vadītāju (x);

Pievieno x polsterējuma līnijas, pamatojoties uz bāzes līnijas augstumu virs elementa.

@ iekļaut polsterēšanas piekabi (x);

Pievieno x polsterējuma līnijas, pamatojoties uz bāzes līnijas augstumu zem elementa.

@ iekļaut līderi (x);

Pievieno x piemales līnijas, pamatojoties uz bāzes līnijas augstumu virs elementa.

@ iekļaut piekabi (x);

Pievieno x piemales līnijas, pamatojoties uz bāzes līnijas augstumu zem elementa.

Viens pēdējais triks

Pieņemsim, ka, piemēram, vēlaties multivides vaicājumam pievienot pikseļu vērtību, bet vēlaties, lai šī vērtība tiktu pārvērsta par attiecīgo em vērtību bāzes līnijas augstumam vai bāzes fonta lielumam. Tas var nozīmēt dažus aprēķinus. Sassaparilla ietver divas funkcijas, lai to palīdzētu.

Tie ir noderīgi, piemēram, atstarpes starp burtiem, kā arī mediju vaicājumu pārtraukumpunktu noteikšana, nevis pikseļi. Varat izmantot šādu sintaksi:

em-font (#px)

Vērtību (#) pārvērš pikseļos, pamatojoties uz bāzes fonta lielumu.

em-base (#px)

Vērtību (#) pārvērš pikseļos, pamatojoties uz bāzes līnijas augstumu.

Pēdējais vārds

Tātad jums tas ir. Mēs ceram, ka Sassaparilla jums noderēs savos projektos, un mēs labprāt dzirdētu no jums vai ja jums būtu kādi jautājumi. Visbeidzot, ja jūs jūtaties kā ieguldījums, mēs priecājamies no jums uzklausīt.

Vārdi: Pīters Koless un Adams Robertsons

Patika tas? Izlasiet šos!

• Izmantojot šos profesionālos padomus, izveidojiet perfekta noskaņojuma dēli
• Izcila WordPress apmācības izvēle
• Izvēlieties labāko vietņu veidotāju

Kādi jautājumi? Jautājiet prom komentāros!