Syntaktiškai awesome stilių lentelės naudojant kompasas Sass

Paskutiniame pranešime mes paminėjome vieną kartą apie kompasą. Pasak oficialios svetainės, ji aprašyta kaip atviro kodo CSS autorizavimo sistema.

Trumpai tariant, kompasas yra „Sass“ plėtinys ir, kaip LESS elementas „LESS“, jis turi daugybę paruoštų naudoti CSS3 „Mixins“, išskyrus tai, kad jis taip pat pridėjo keletą kitų dalykų, dėl kurių jis yra galingesnis kompanijos „Sass“ įrankis. Pažvelkime tai.

Kompaso įdiegimas

Kompasas, kaip Sass, reikia įdiegti mūsų sistemoje. Tačiau, jei naudojate programą, pvz., „Scout App“ ar „Compass.app“, tai nebus būtina.

Be jų turite tai padaryti “rankiniu būdu” per Terminalas / komandų eilutė. Norėdami tai padaryti, įveskite šią komandų eilutę;

„Mac“ / „Linux“ terminaluose

 sudo gem install kompasas 

„Windows“ komandų eilutėje

 perlas įdiegti kompasą 

Jei diegimas pavyksta, turėtumėte gauti pranešimą, kaip parodyta toliau;

Tada savo darbo kataloge paleiskite šią komandų eilutę Kompaso projekto failai.

 kompaso inicijavimas 

Papildoma literatūra: Kompaso komandų eilutės dokumentacija

Kompaso konfigūracija

Jei vykdėte šią komandą kompaso inicijavimas, dabar turėtumėte turėti pavadinimą config.rb jūsų darbo kataloge. Šis failas naudojamas projekto išvestims konfigūruoti. Pavyzdžiui, galime pakeisti pageidaujamus katalogų pavadinimus.

 http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js" 

Ištrinkite komentarų eilutę, kurią generuoja kompasas; mes nustatėme tiesa jei mums reikia komentarų, kuriuos norite išspausdinti arba klaidinga jei jis neturi.

 line_comments = false 

Taip pat galime nuspręsti dėl CSS produkcijos. Galime pasirinkti keturis variantus : išplėsta, :kompaktiškas, : suspaustasir : įdėta. Šiuo metu mes tiesiog turime ją išplėsti, nes mes vis dar vystome.

 output_style =: išplėsta 

Manau, kad šios konfigūracijos bus pakankamos daugumai projektų apskritai, bet visada galite remtis šia dokumentacija, Kompaso konfigūracijos nuoroda, jei jums reikia daugiau nuostatų.

Galiausiai, turime žiūrėti kiekvienas failas kataloge, kuriame yra ši komandų eilutė;

 kompaso laikrodis 

Ši komandų eilutė, kaip ir Sass, stebės kiekvieną failo pakeitimą ir sukurs arba atnaujins atitinkamus CSS failus. Tačiau nepamirškite, paleiskite šią eilutę po to, kai atliksite projekto konfigūravimą config.rb, arba kitaip jis tiesiog ignoruos failo pakeitimus.

CSS3 mišiniai

Prieš eidami per CSS3, mūsų pagrindiniame .scss failą, mums reikia importuoti kompasą su šia eilute @import "kompasas";, tai importuos visus kompaso plėtinius. Tačiau, jei mums reikia tik CSS3, tai taip pat galime padaryti konkrečiau @import "kompasas / css3".

Papildoma literatūra: Kompasas CSS3.

Dabar pradėkime kurti su Saas ir kompasu. HTML dokumente, darant prielaidą, kad jūs taip pat sukūrėte vieną, atliksime šį paprastą žymėjimą:

Idėja taip pat yra paprasta; mes sukursime sukamą langelį su apvaliais kampais, o žemiau yra mūsų Sass įdėtos stiliaus starteris;

 kūnas fono spalva: # f3f3f3;  sekcija plotis: 500px; paraštė: 50px auto 0; div plotis: 250px; aukštis: 250 pikselių; fono spalva: #ccc; paraštė: 0 auto;  

Ir, norėdami gauti mūsų stačiakampį suapvalintais kampais, mes galime įtraukti kompasą CSS3 Mixins taip:

 kūnas fono spalva: # f3f3f3;  sekcija plotis: 500px; paraštė: 50px auto 0; div plotis: 250px; aukštis: 250 pikselių; fono spalva: #ccc; paraštė: 0 auto; @ įtraukti sienos spindulį;  

Tai pasienio spindulys „Mixins“ generuos visus naršyklės prefiksus ir pagal nutylėjimą bus kampinis spindulys 5px. Tačiau taip taip pat galime nurodyti mūsų poreikio spindulį @ įtraukti sienos spindulį (10px); .

 sekcija div plotis: 250px; aukštis: 250 pikselių; fono spalva: #ccc; paraštė: 0 auto; -webkit-border-radius: 10px; -moz-border-spindulys: 10px; -ms-border-spindulys: 10px; -o-pasienio spindulys: 10px; pasienio spindulys: 10px;  

Toliau, kaip planas, mes taip pat pasuksime langelį. Tai labai lengva tai padaryti su kompasu, viskas, ką mums reikia padaryti, tai tiesiog vadinti transformacijos metodu;

 kūnas fono spalva: # f3f3f3;  sekcija plotis: 500px; paraštė: 50px auto 0; div plotis: 250px; aukštis: 250 pikselių; fono spalva: #ccc; paraštė: 0 auto; @ įtraukti sienos spindulį (10px); @ įtraukti: pasukti;  

Šis „Mixins“ taip pat sukurs tuos varginančius pardavėjo prefiksus ir rotacija pagal nutylėjimą bus 45 laipsniai. Žiūrėkite žemiau sukurtą CSS.

 sekcija div plotis: 250px; aukštis: 250 pikselių; fono spalva: #ccc; paraštė: 0 auto; -webkit-border-radius: 10px; -moz-border-spindulys: 10px; -ms-border-spindulys: 10px; -o-pasienio spindulys: 10px; pasienio spindulys: 10px; -webkit-transformacija: pasukti (45deg); -moz-transform: pasukti (45deg); -ms-transform: pasukti (45deg); -o-transformuoti: pasukti (45deg); transformuoti: pasukti (45deg);  

Kompaso pagalbininkai

Viena iš galingiausių „Compass“ funkcijų yra pagalbininkai. Pasak oficialios svetainės, Kompaso pagalbininkai yra funkcijos, kurios padidina Sass teikiamas funkcijas. Gerai, pažvelkime į šiuos pavyzdžius, kad gautume aiškų vaizdą.

Įrašomi @ Šrifto veidų failai

Šiame pavyzdyje pridėsime pasirinktinį šriftų šeimą @ šrifto veidas taisyklė. Paprastame CSS3 kode toliau gali atrodyti kažkas panašaus, kurį sudaro keturi skirtingi šrifto tipai ir kai kuriems žmonėms sunku prisiminti.

 @ šrifto-veido font-family: "MyFont"; src: url ('/ fonts / font.ttf') formatas („truetype“), URL („/ ​​fonts / font.otf“) formatas („opentype“), URL („/ ​​fonts / font.woff“) formatas („woff“), url ('/ fonts / font.eot') formatas („įterptas-opentype“);  

Su kompasu mes galime padaryti tą patį lengviau šrifto failai () Pagalbininkai;

 Įtraukti šrifto veidą („MyFont“, šrifto failus („font.ttf“, „font.otf“, „font.woff“, „font.eot“)); 

Aukščiau nurodytas kodas sukurs rezultatą, kuris yra lygus pirmajam kodo fragmentui, taip pat automatiškai aptiks šrifto tipą ir prideda jį prie formatas () sintaksė.

Tačiau, jei atidžiai pažvelgsime į kodą, pamatysite, kad nepridėjome šriftų kelio (/ šriftai /). Taigi, kaip kompasas žino, kur yra šriftai? Na, nesupainiokite, šis kelias iš tikrųjų yra kilęs config.rb su fonts_path nuosavybė;

 fonts_dir = "šriftai" 

Taigi, tarkime, kad mes jį pakeisime fonts_dir = "myfonts", tada generuojamas kodas bus URL ('/ myfonts / font.ttf'). Pagal nutylėjimą, kai nenurodome kelio, kompasas nukreips jį į stilių lentelės / šriftai.

Pridėti nuotrauką

Kurkime kitą pavyzdį, šį kartą pridėsime vaizdą. Vaizdų pridėjimas per CSS yra paplitęs dalykas. Mes paprastai tai darome naudodami fono vaizdas nuosavybė, pavyzdžiui;

 div background-image: url ('/ img / the-image.png');  

Kompasas, o ne naudojant URL () funkcija, galime ją pakeisti image-url () Pagalbininkai ir panašūs į pridėjimą @ šrifto veidas aukščiau, mes galime visiškai ignoruoti kelią ir leisti kompasui valdyti likusią dalį.

Šis kodas taip pat generuos tą pačią CSS deklaraciją kaip ir pirmame fragmente.

 div background-image: image-url (the-image.png);  

Be to, kompasas taip pat turi „Image Dimension Helpers“, jis pirmiausia aptinka vaizdo plotį ir aukštį, taigi, jei mums reikia, kad juos būtų galima nurodyti mūsų CSS, galime pridėti dar dvi eilutes:

 div background-image: image-url ("images.png"); plotis: vaizdo plotis ("images.png"); aukštis: vaizdo aukštis ("images.png");  

Išėjimas taps panašiu;

 div background-image: url ('/ img / images.png? 1344774650'); plotis: 80px; aukštis: 80 pikselių;  

Papildoma literatūra: Kompaso pagalbininkų funkcijos

Galutinė mintis

Gerai, šiandien mes daug diskutavome apie kompasą ir, kaip matote, tai tikrai galingas įrankis ir leiskite mums parašyti CSS elegantiškesniu būdu.

Ir, kaip jau žinote, Sass nėra vienintelis CSS išankstinis apdorojimas; taip pat yra LESS, kurias mes išsamiai aptarėme anksčiau. Kitame pranešime mes stengsimės palyginti, galvos į viršų, kurį vieną iš šių dviejų daro geriau apdorojant CSS.

• Atsisiųsti šaltinį