Szintaktikusan félelmetes stíluslapok a Sass-ban található iránytű használatával

Utolsó üzenetünkben egyszer említettük a Compass-t. A hivatalos webhely szerint úgy írják le nyílt forráskódú CSS szerzői keretrendszer.

Röviden, a Compass egy Sass kiterjesztés, és a LESS elemhez hasonlóan, egy csomó kész felhasználásra kész CSS3 Mixins, kivéve, hogy számos más dolgot is hozzáadott, ami erősebb társszerszámot jelent Sass számára. Nézzük meg.

Az iránytű telepítése

Iránytű, mint Sass, telepíteni kell a rendszerünkbe. Ha azonban olyan alkalmazást használ, mint a Scout App vagy a Compass.app, ez nem szükséges.

Nélkülük meg kell tennie “manuálisan” keresztül Terminál / Parancssor. Ehhez írja be a következő parancssort;

Mac / Linux terminálon

 sudo gem install iránytű 

A Windows parancssorában

 gem install kompass 

Ha a telepítés sikerül, értesítést kell kapnia az alábbiak szerint;

Ezután futtassa a következő parancssort a munkakönyvtárban a hozzáadáshoz Compass projektfájlok.

 iránytű init 

További irodalom: Iránytű parancssori dokumentáció

Iránytű beállítása

Ha futtatta ezt a parancsot iránytű init, most meg kell adnod egy nevet config.rb a munkakönyvtárban. Ez a fájl a projekt kimenetének konfigurálására szolgál. Például megváltoztathatjuk a preferált könyvtárneveket.

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

Szüntesse meg a Compass által generált megjegyzési sort; beállítottuk igaz ha szükségünk van a nyomtatandó megjegyzésekre vagy hamis ha nem kell.

 line_comments = false 

Eldönthetjük a CSS kimenetet is. Négy lehetőség közül választhatunk :kiterjesztett, :kompakt, : sűrítettés beágyazott. Most már csak azt kell kibővíteni, hogy még mindig a fejlesztési szakaszban vagyunk.

 output_style =: kibővült 

Úgy gondolom, hogy ezek a konfigurációk általában elegendőek a legtöbb projektre, de mindig hivatkozhat erre a dokumentációra, az iránytű konfigurációs hivatkozására, ha több beállításra van szüksége.

Végül, meg kell néz a könyvtárban lévő minden fájl ezzel a parancssorral;

 iránytű 

Ez a parancssor, mint a Sass-ban, minden fájlváltást figyel, és létrehozza vagy frissíti a megfelelő CSS-fájlokat. De ne feledje, futtassa ezt a sort, miután elvégezte a projekt konfigurálását config.rb, vagy egyébként csak figyelmen kívül hagyja a fájlban bekövetkezett változásokat.

CSS3 Mixins

Mielőtt a CSS3-on keresztül járnánk, az elsődleges .SCSS fájlt kell importálnunk a következő sorral @import "iránytű";, ez importálja az összes kiterjesztést a Compass-ban. De ha csak CSS3-ra van szükségünk, akkor ezt a vonalat is megtehetjük @import "iránytű / css3".

További irodalom: Compass CSS3.

Most kezdjünk valamit létrehozni Saas és Compass segítségével. A HTML-dokumentumban, feltéve, hogy Ön is létrehozott egyet, a következő egyszerű jelölést helyezzük el:

Az ötlet is egyszerű; meg fogunk hozni egy lekerekített sarkot lekerekített sarkokkal, és alul a Sass beágyazott stílusa az indítónak;

 test háttérszín: # f3f3f3;  szekció szélesség: 500px; margin: 50px auto 0; div szélesség: 250px; magasság: 250px; háttérszín: #ccc; margin: 0 auto;  

Ahhoz, hogy a téglalapot a lekerekített sarkokhoz hozzuk, a Compass CSS3 Mixins-et az alábbiak szerint lehet felvenni:

 test háttérszín: # f3f3f3;  szekció szélesség: 500px; margin: 50px auto 0; div szélesség: 250px; magasság: 250px; háttérszín: #ccc; margin: 0 auto; @ zárja be a határ sugarát;  

Ez border-radius A Mixins minden böngésző előtagot generál, és alapértelmezés szerint a sarok sugara lesz 5px. De így is meg tudjuk határozni a szükségletünk sugárát @tartománysugár (10px); .

 div szakasz: szélesség: 250px; magasság: 250px; háttérszín: #ccc; margin: 0 auto; -webkit-border-radius: 10px; -moz-border-sugár: 10px; -ms-border-sugár: 10px; -o-határ-sugár: 10px; határ-sugár: 10px;  

Ezután, ahogy a tervet is elforgatjuk a dobozt. Ez nagyon egyszerű a Compass-szal, csak annyit kell tennünk, hogy hívjuk az átalakítási módszert, mint például;

 test háttérszín: # f3f3f3;  szekció szélesség: 500px; margin: 50px auto 0; div szélesség: 250px; magasság: 250px; háttérszín: #ccc; margin: 0 auto; @tartománysugár (10px); @include rotate;  

Ez a Mixins is generálja ezeket az unalmas szállító előtagokat, és a forgatás alapértelmezés szerint 45 fokot vesz igénybe. Lásd a generált CSS-t.

 div szakasz: szélesség: 250px; magasság: 250px; háttérszín: #ccc; margin: 0 auto; -webkit-border-radius: 10px; -moz-border-sugár: 10px; -ms-border-sugár: 10px; -o-határ-sugár: 10px; határ-sugár: 10px; -webkit-transform: forgatás (45deg); -moz-transform: forgatás (45deg); -ms-transform: forgatás (45deg); -o-transzformáció: forgatás (45deg); transzformálás: forgatás (45deg);  

Iránytű segítők

A Compass egyik legerősebb funkciója a Segítők. A hivatalos oldal szerint, Az iránytű segítők olyan funkciók, amelyek növelik a Sass által biztosított funkciókat. Rendben, nézzük meg az alábbi példákat, hogy világos képet kapjunk.

@ Betűtípus-arcfájlok hozzáadása

Ebben a példában egyéni betűkészletcsaládot adunk hozzá @ Font-face szabály. Egyszerű CSS3-ban a kód úgy néz ki, mint az alábbiakban, amely négy különböző betűtípust tartalmaz, és néhány ember számára is nehéz emlékezni..

 @ font-face font-family: "MyFont"; src: url ('/ fonts / font.ttf') formátum ('truetype'), url ('/ fonts / font.otf') formátum ('opentype'), url ('/ fonts / font.woff') formátum ('woff'), url ('/ fonts / font.eot') formátum ("beágyazott opentype");  

Iránytűvel könnyebben meg tudjuk csinálni font-fájl () Segítők;

 @befejezzen betűtípust ("MyFont", font-fájlok ("font.ttf", "font.otf", "font.woff", "font.eot")); 

A fenti kód olyan eredményt hoz létre, amely pontosan megegyezik az első kódrészletével, automatikusan felismeri a betűtípust és hozzáadja azt a formátum() szintaxis.

Ha azonban megnézzük a kódot, akkor látni fogja, hogy nem adtuk hozzá a betűtípus elérési útját (/ Fonts /). Szóval, hogyan tudta, hogy a Compass hol található a betűtípus? Nos, ne keveredj össze, ez az út valójában származik config.rb val vel fonts_path ingatlan;

 fonts_dir = "betűtípusok" 

Tehát mondjuk, hogy megváltoztatjuk fonts_dir = "myfonts", akkor a generált kód lesz url ( '/ myfonts / font.ttf). Alapértelmezés szerint, ha nem adjuk meg az utat, a Compass irányítja stíluslapok / fonts.

Kép hozzáadása

Hozzunk létre egy másik példát, ezúttal egy képet adunk hozzá. A képek hozzáadása a CSS-en keresztül egy általános dolog. Ezt általában a háttérkép vagyon;

 div háttérkép: url ('/ img / the-image.png');  

A Compass-ban nem a url () funkcióval helyettesíthetjük image-url () Segítők és a hozzáadáshoz hasonlóak @ Font-face fent, teljesen figyelmen kívül hagyhatjuk az utat, és hagyjuk, hogy a Compass kezelje a többit.

Ez a kód ugyanazt a CSS-nyilatkozatot is generálja, mint az első részletben.

 div háttérkép: image-url (the-image.png);  

Ezen túlmenően, a Compass rendelkezik Image Dimension Helpers programmal is, elsősorban a kép szélességét és magasságát érzékeli, így ha mindkettőt CSS-ben meg kell adnunk, két sorral egészíthetjük ki az alábbiakat;

 div háttérkép: image-url ("images.png"); szélesség: képszélesség ("images.png"); magasság: képmagasság ("images.png");  

A kimenet ilyesmi lesz;

 div háttérkép: url ('/ img / images.png? 1344774650'); szélesség: 80px; magasság: 80px;  

További irodalom: Compass Helper funkciók

Végső gondolat

Rendben, ma nagyon sokat beszéltünk a Compassról, és láthatjuk, hogy ez valóban hatékony eszköz, és hagyjuk, hogy elegánsabb módon írjunk CSS-t.

És ahogy már tudtad, Sass nem az egyetlen CSS előfeldolgozó; van még LESS is, amit már alaposan megvitattunk. A következő üzenetben megpróbáljuk összehasonlítani a fejét a fejtől, amelyik közül kettő jobban teljesíti a CSS előfeldolgozását.

• Letöltés forrása