Syntaktisesti Awesome-tyylitaulukot, jotka käyttävät kompassia Sassissa

Viimeisessä viestissämme olemme maininneet kerran Compassista. Virallisen sivuston mukaan sitä kuvataan avoimen lähdekoodin CSS-tekijänoikeuskehys.

Lyhyesti sanottuna Compass on Sass-laajennus, ja sillä on LESS Element of LESS: n tavoin joukko valmiita käyttökelpoisia CSS3-sekoittimia, paitsi että se on lisännyt useita muita asioita, jotka tekevät siitä tehokkaamman seuralaisen työkalun Sassille. Tarkistetaan se.

Kompassin asentaminen

Kompassi, kuten Sass, on asennettava järjestelmään. Mutta jos käytät sellaista sovellusta kuin Scout App tai Compass.app, tämä ei ole tarpeen.

Ilman niitä sinun täytyy tehdä se “käsin” kautta Terminaali / komentokehote. Voit tehdä tämän kirjoittamalla seuraavan komentorivin;

Mac / Linux-päätelaitteessa

 sudo gem asenna kompassi 

Windowsin komentokehotteessa

 gem asentaa kompassi 

Jos asennus onnistuu, saat ilmoituksen alla olevan kuvan mukaisesti.

Suorita sitten seuraava komentorivi työhakemistossasi lisätäksesi Compass-projektitiedostot.

 kompassi init 

Lue lisää: Kompassin komentorivin dokumentaatio

Kompassin määritys

Jos olet suorittanut tämän komennon kompassi init, sinulla pitäisi olla nyt tiedosto nimeltä config.rb työhakemistossa. Tätä tiedostoa käytetään projektin lähdön määrittämiseen. Voimme esimerkiksi muuttaa haluttuja hakemistonimiä.

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

Poista kompassin tuottama kommenttirivi; asetamme totta jos tarvitsemme tulostettavat kommentit tai väärä jos se ei tarvitse.

 line_comments = false 

Voimme myös päättää CSS-lähdöstä. Valittavana on neljä vaihtoehtoa : laajennettu, :kompakti, : pakattuja : sisäkkäisiä. Nyt meidän tarvitsee vain laajentaa sitä, koska olemme vielä kehitysvaiheessa.

 output_style =: laajennettu 

Mielestäni nämä kokoonpanot riittävät useimpiin projekteihin yleensä, mutta voit aina viitata tähän dokumentaatioon, Kompassin määritysohjeeseen, jos tarvitset lisää asetuksia.

Lopuksi meidän täytyy katsella jokainen hakemistossa oleva tiedosto tällä komentorivillä;

 kompassikello 

Tämä komentorivi, kuten Sassissa, seuraa kaikkia tiedostojen muutoksia ja luo tai päivittää vastaavat CSS-tiedostot. Muista kuitenkin, että suorita tämä rivi sen jälkeen, kun olet määrittänyt projektin config.rb, tai muuten se vain ohittaa tiedoston muutokset.

CSS3-sekoittimet

Ennen kuin kävelet CSS3: n kautta, meidän ensisijainen .SCSS tiedosto, meidän on tuotava kompassi seuraavalla rivillä @import "kompassi";, tämä tuo kaikki kompassin laajennukset. Mutta jos tarvitsemme vain CSS3: ta, voimme tehdä sen myös tällä rivillä @import "kompassi / css3".

Lue lisää: Kompassi CSS3.

Nyt aletaan luoda jotain Saasin ja Kompassin kanssa. HTML-asiakirjassa, olettaen, että olet myös luonut sellaisen, asetamme seuraavan yksinkertaisen merkinnän:

Ajatus on myös yksinkertainen; luomme pyöristetyn laatikon, jossa on pyöristetyt kulmat, ja alla on Sassin sisäkkäiset tyylit starterille;

 runko taustaväri: # f3f3f3;  osa leveys: 500px; marginaali: 50px auto 0; div leveys: 250px; korkeus: 250px; taustaväri: #ccc; marginaali: 0 auto;  

Ja jotta saisimme suorakulmion pyöristetyt kulmat, voimme sisällyttää Compass CSS3 Mixins seuraavasti:

 runko taustaväri: # f3f3f3;  osa leveys: 500px; marginaali: 50px auto 0; div leveys: 250px; korkeus: 250px; taustaväri: #ccc; marginaali: 0 auto; @ sis. raja-säteen;  

Tämä border-säde Mixins luo kaikki selaimen etuliitteet ja oletusarvoisesti kulmasäde on 5px. Mutta voimme myös määrittää tarvitsemamme säteen tällä tavalla @ sis. raja-säteen (10px); .

 osio div leveys: 250px; korkeus: 250px; taustaväri: #ccc; marginaali: 0 auto; -webkit-border-radius: 10px; -moz-border-säde: 10px; -ms-border-säde: 10px; -o-rajan säde: 10px; raja-säde: 10px;  

Seuraavaksi suunnitelmana myös pyöritämme laatikkoa. Se on todella helppoa tehdä Compassilla, vain meidän täytyy kutsua muutosmenetelmää, kuten näin;

 runko taustaväri: # f3f3f3;  osa leveys: 500px; marginaali: 50px auto 0; div leveys: 250px; korkeus: 250px; taustaväri: #ccc; marginaali: 0 auto; @ sis. raja-säteen (10px); @ include kiertää;  

Tämä sekoitus tuottaa myös tylsiä myyjän etuliitteitä, ja kierto vie oletuksena 45 astetta. Katso alla oleva generoitu CSS.

 osio div leveys: 250px; korkeus: 250px; taustaväri: #ccc; marginaali: 0 auto; -webkit-border-radius: 10px; -moz-border-säde: 10px; -ms-border-säde: 10px; -o-rajan säde: 10px; raja-säde: 10px; -webkit-transform: kiertää (45deg); -moz-transform: kiertää (45deg); -ms-transform: kiertää (45deg); -o-transform: kiertää (45deg); muunnos: kiertää (45deg);  

Compass-avustajat

Compassin yksi tehokkaimmista ominaisuuksista on avustajat. Virallisen sivuston mukaan, Kompassiavustajat ovat toimintoja, jotka lisäävät Sassin tarjoamia toimintoja. Hyvä on, katsokaamme seuraavia esimerkkejä saadaksesi selkeän kuvan.

@ Fontti-face-tiedostojen lisääminen

Tässä esimerkissä aiomme lisätä mukautetun kirjasinperheen @ Font-face sääntö. Tavallisessa CSS3: ssa koodi saattaa näyttää alla olevalta alla olevalta, joka koostuu neljästä eri kirjasintyypistä ja joidenkin ihmisten on myös vaikea muistaa.

 @ font-face font-family: "MyFont"; src: url ('/ fonts / font.ttf') -muoto ('truetype'), url ('/ fonts / font.otf') -muoto ('opentype'), url ('/ fonts / font.woff') -muoto ('woff'), url ('/ fonts / font.eot') -muoto ('upotettu opentype');  

Kompassi voimme tehdä saman helpommin font-tiedostot () auttajilles

 @ sisällyttää fontti-kasvot ("MyFont", font-tiedostot ("font.ttf", "font.otf", "font.woff", "font.eot")); 

Yllä oleva koodi tuottaa tuloksen, joka on täsmälleen sama kuin ensimmäisen koodinpätkä, se tunnistaa myös kirjasintyypin ja lisää sen muoto() syntaksi.

Jos kuitenkin tarkastelemme koodia tarkasti, näet, että emme lisänneet kirjasimen polkua (/ Fontit /). Miten Compass tiesi, missä fontit sijaitsevat? No, älä sekoita, tämä polku on todella peräisin config.rb kanssa fonts_path omaisuutta;

 fonts_dir = "fontit" 

Sanotaan siis, että muutamme sen fonts_dir = "myfonts", sitten generoitu koodi on url ( '/ myfonts / font.ttf'). Oletuksena, kun emme määritä polkua, Compass ohjaa sen tyylitaulukkoja / kirjasimet.

Kuvan lisääminen

Luomme toisen esimerkin, tällä kertaa lisäämme kuvan. Kuvien lisääminen CSS: n kautta on yleinen asia. Teemme tämän yleensä käyttämällä taustakuva omaisuutta, kuten näin;

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

Kompassissa ei käytetä url () toiminto, voimme korvata sen kuva-url () Avustajat ja samanlainen kuin lisääminen @ Font-face edellä, voimme täysin sivuuttaa polun ja antaa kompassin käsitellä loput.

Tämä koodi tuottaa myös saman CSS-ilmoituksen kuin ensimmäisessä katkelmassa.

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

Lisäksi Compassilla on myös Image Dimension Helpers -ohjelma, joka havaitsee ensisijaisesti kuvan leveyden ja korkeuden, joten jos tarvitsemme niitä molemmille, jotka voidaan määritellä CSS: ssä, voimme lisätä vielä kaksi riviä seuraavasti;

 div taustakuva: image-url ("images.png"); leveys: kuvan leveys ("images.png"); korkeus: kuvan korkeus ("images.png");  

Tuloksesta tulee jotain tällaista;

 div background-image: url ('/ img / images.png? 1344774650'); leveys: 80px; korkeus: 80px;  

Lue lisää: Kompassitukitoiminnot

Lopullinen ajatus

Okei, olemme keskustelleet melko paljon Compassista tänään, ja kuten näet, se on todella tehokas työkalu ja anna meille kirjoittaa CSS: ää tyylikkäämmällä tavalla.

Ja kuten jo tiesit, Sass ei ole ainoa CSS Preprocessor; on myös LESS, jota olemme keskustelleet perusteellisesti aiemmin. Seuraavassa postissa yritämme verrata, päähän, joka näistä kahdesta tekee työn paremmin esikäsittelyssä CSS.

• Lataa lähde