Syntactically Awesome stilu, izmantojot kompasu Sass

Mūsu pēdējā ziņojumā mēs vienreiz esam minējuši par kompasu. Saskaņā ar oficiālo vietni tā ir aprakstīta kā atvērtā koda CSS autorēšanas sistēma.

Īsāk sakot, Compass ir Sass paplašinājums, un, tāpat kā LESS Elements of LESS, tam ir virkne gatavu lietošanai CSS3 Mixins, izņemot to, ka tā ir pievienojusi arī vairākus citus sīkumus, kas padara to par spēcīgāku pavadoņu rīku Sass. Pārbaudīsim to.

Kompasa instalēšana

Kompass, tāpat kā Sass, ir jāinstalē mūsu sistēmā. Bet, ja izmantojat programmu, piemēram, Scout App vai Compass.app, tas nebūs nepieciešams.

Bez tiem jums tas jādara “manuāli” caur Termināls / komandu uzvedne. Lai to izdarītu, ierakstiet šādu komandrindu;

Mac / Linux terminālā

 sudo gem instalēt kompass 

Windows komandu uzvednē

 gem instalēt kompass 

Ja instalācija ir veiksmīga, jums jāsaņem paziņojums, kā parādīts zemāk;

Pēc tam savā darba direktorijā pievienojiet šādu komandrindu Kompasa projektu faili.

 kompasa init 

Turpmāka lasīšana: Kompasa komandrindas dokumentācija

Kompasa konfigurācija

Ja esat palaidis šo komandu kompasa init, jums tagad ir jābūt nosaukumam config.rb jūsu darba direktorijā. Šo failu izmanto, lai konfigurētu projekta rezultātu. Piemēram, mēs varam mainīt vēlamos direktoriju nosaukumus.

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

Noņemiet komentāru rindu, ko rada kompass; mēs uzstādījām taisnība ja mums vajadzīgi izdrukājamie komentāri vai nepatiesa ja tas nav nepieciešams.

 line_comments = false 

Mēs varam izlemt arī CSS produkciju. Mēs varam izvēlēties četras iespējas : paplašināts, : kompakts, : saspiestsun : ligzdots. Šobrīd mums tā tikai jāpaplašina, jo mēs vēl esam attīstības stadijā.

 output_style =: paplašināts 

Es domāju, ka šīs konfigurācijas būs pietiekamas lielākai daļai projektu kopumā, bet vienmēr varat atsaukties uz šo dokumentāciju, kompasa konfigurācijas atsauces, ja jums ir nepieciešamas papildu preferences.

Visbeidzot, mums ir nepieciešams skatīties katru failu direktorijā ar šo komandrindu;

 kompasa skatīties 

Šī komandrinda, tāpat kā Sass, skatīs visas failu izmaiņas un izveidos vai atjauninās atbilstošos CSS failus. Bet atcerieties, palaidiet šo līniju pēc tam, kad esat veicis projekta konfigurēšanu config.rb, vai arī tas vienkārši ignorēs izmaiņas failā.

CSS3 Mixins

Pirms ieiet CSS3, mūsu primārajā .scss failu, mums ir jāieved kompass ar šādu rindu @import "kompass";, tas importēs visus paplašinājumus kompasā. Bet, ja mums ir nepieciešama tikai CSS3, mēs varam to izdarīt arī ar šo līniju @import "kompass / css3".

Turpmāka lasīšana: Kompass CSS3.

Tagad, sāksim kaut ko radīt ar Saasu un Kompasu. HTML dokumentā, pieņemot, ka arī esat izveidojis to, mēs ievietosim šādu vienkāršu atzīmi:

Ideja ir arī vienkārša; mēs izveidosim rotētu lodziņu ar noapaļotiem stūriem, un zemāk ir mūsu Sass ligzdotie stili starterim;

 ķermenis fona krāsa: # f3f3f3;  sadaļa platums: 500px; starpība: 50px auto 0; div platums: 250px; augstums: 250 pikseļi; fona krāsa: #ccc; starpība: 0 auto;  

Un, lai iegūtu mūsu taisnstūri, noapaļotie stūri, mēs varam iekļaut Kompass CSS3 Mixins šādi;

 ķermenis fona krāsa: # f3f3f3;  sadaļa platums: 500px; starpība: 50px auto 0; div platums: 250px; augstums: 250 pikseļi; fona krāsa: #ccc; starpība: 0 auto; @ ietver robežu rādiusu;  

Tas robežu rādiuss Mixins radīs visus pārlūkprogrammas prefiksus un pēc noklusējuma stūra rādiuss būs 5px. Bet mēs varam arī noteikt mūsu vajadzību rādiusu šādā veidā @ ietver robežu rādiusu (10px); .

 nodaļa div platums: 250px; augstums: 250 pikseļi; fona krāsa: #ccc; starpība: 0 auto; -webkit-robežu rādiuss: 10px; -moz-border-rādiuss: 10px; -ms-robežu rādiuss: 10px; -o-robežu rādiuss: 10px; robežu rādiuss: 10px;  

Tālāk, kā plāns, mēs arī rotēsim lodziņu. Tas ir patiešām viegli izdarāms ar kompasu, viss, kas mums jādara, ir tikai izsaukt transformācijas metodi;

 ķermenis fona krāsa: # f3f3f3;  sadaļa platums: 500px; starpība: 50px auto 0; div platums: 250px; augstums: 250 pikseļi; fona krāsa: #ccc; starpība: 0 auto; @ ietver robežu rādiusu (10px); @ ietveriet rotāciju;  

Šis Mixins arī radīs šos garlaicīgos pārdevēja prefiksus, un rotācija pēc noklusējuma aizņems 45 grādus. Skatiet ģenerēto CSS.

 nodaļa div platums: 250px; augstums: 250 pikseļi; fona krāsa: #ccc; starpība: 0 auto; -webkit-robežu rādiuss: 10px; -moz-border-rādiuss: 10px; -ms-robežu rādiuss: 10px; -o-robežu rādiuss: 10px; robežu rādiuss: 10px; -webkit-transform: rotēt (45deg); -moz-transform: pagriezt (45deg); -ms-transform: pagriezt (45deg); -o-transformēt: pagriezt (45deg); transformēt: pagriezt (45deg);  

Kompasa palīgi

Viena no spēcīgākajām kompasa funkcijām ir palīgi. Saskaņā ar oficiālo vietni, Kompasa palīgi ir funkcijas, kas palielina Sass sniegtās funkcijas. Labi, apskatīsim šādus piemērus, lai iegūtu skaidru priekšstatu.

@ Fonta veidņu failu pievienošana

Šajā piemērā mēs pievienosim pielāgotu fontu grupu ar @ font-face noteikums. Vienkāršā CSS3 kodā zemāk redzams kods, kas sastāv no četriem dažādiem fonta veidiem, un dažiem cilvēkiem ir grūti atcerēties..

 @ font-face font-family: "MyFont"; src: url ('/ fonts / font.ttf') formāts ('truetype'), url ('/ fonts / font.otf') formāts ('opentype'), url ('/ fonts / font.woff') formāts (“woff”), url ('/ fonts / font.eot') formāts (“iegultais-opentype”);  

Ar kompasu mēs varam darīt to pašu vieglāk ar font-files () Palīgi;

 @ ietver fontu seju ("MyFont", fonta failus ("font.ttf", "font.otf", "font.woff", "font.eot")); 

Iepriekš minētais kods radīs rezultātu, kas ir tieši tāds pats kā pirmā koda fragmenta, tas automātiski noteiks fontu tipu un pievienos to formāts () sintakse.

Tomēr, ja mēs cieši apskatīsim kodu, jūs redzēsiet, ka mēs neesam pievienojuši fontu ceļu (/ fonti /). Tātad, kā kompass zināja, kur atrodas fonti? Nu, nesaņem neskaidrības, šis ceļš ir faktiski iegūts config.rb ar fonts_path īpašums;

 fonts_dir = "fonti" 

Tātad, pieņemsim, ka mēs to mainām fonts_dir = "myfonts", tad ģenerētais kods būs URL ('/ myfonts / font.ttf'). Pēc noklusējuma, kad mēs nenorādām ceļu, Compass to vadīs stilu lapas / fonti.

Attēla pievienošana

Izveidosim vēl vienu piemēru, šoreiz mēs pievienosim attēlu. Attēlu pievienošana, izmantojot CSS, ir izplatīta lieta. Mēs to parasti darām, izmantojot fona attēls īpašums, piemēram,;

 div fona attēls: url ('/ img / the-image.png');  

Kompasā, nevis izmantojot URL () funkciju, mēs varam to aizstāt ar image-url () Palīgi un līdzīgi kā pievienošana @ font-face iepriekš, mēs varam pilnībā ignorēt ceļu un ļaut Kompass rīkoties ar pārējo.

Šis kods radīs arī tādu pašu CSS deklarāciju kā pirmajā fragmentā.

 div fona attēls: image-url (the-image.png);  

Turklāt kompasam ir arī Image Dimension Helpers, tas galvenokārt nosaka attēla platumu un augstumu, tādēļ, ja mums tie abi ir jānorāda mūsu CSS, mēs varam pievienot vēl divas rindas šādi;

 div fona attēls: image-url ("images.png"); platums: attēla platums ("images.png"); augstums: attēla augstums ("images.png");  

Rezultāts kļūs līdzīgs šim;

 div fona attēls: url ('/ img / images.png? 1344774650'); platums: 80px; augstums: 80px;  

Turpmāka lasīšana: Kompasa palīgfunkcijas

Galīgā doma

Labi, šodien mēs esam daudz diskutējuši par kompasu Compass, un, kā redzat, tas ir patiešām spēcīgs instruments un ļauj mums rakstīt CSS elegantākā veidā.

Un, kā jūs jau zinājāt, Sass nav vienīgais CSS priekšprocesors; tur ir arī LESS, ko mēs iepriekš rūpīgi apspriedām. Nākamajā postenī mēs centīsimies salīdzināt, kas ir viens no galvenajiem, un viens no šiem diviem veic darbu priekšapstrādē CSS.

• Lejupielādēt avotu