Foaie de stil sinaptice minunate Folosind busola în Sass
În ultimul nostru post, am menționat o dată despre Compass. Potrivit site-ului oficial, este descris ca un cadru CSS de creație open source.
Pe scurt, Compass este o extensie Sass și, la fel ca și LESS Element of LESS, are o grămadă de mix-uri CSS3 Mixins, cu excepția faptului că a adăugat și alte câteva lucruri care îl fac să fie un instrument de companie mai puternic pentru Sass. Hai să verificăm.
Instalarea Compass
Compass, ca și Sass, trebuie să fie instalat în sistemul nostru. Dar, dacă utilizați o aplicație ca Scout App sau Compass.app, acest lucru nu va fi necesar.
Fără ei, trebuie să o faceți “manual” prin Terminal / comandă. Pentru a face acest lucru, tastați următoarea linie de comandă;
Pe terminalul Mac / Linux
sudo gem instala busola
În Windows Command Prompt
gem busola de instalare
Dacă instalarea reușește, ar trebui să primiți o notificare, după cum se arată mai jos;
Apoi, executați următoarea linie de comandă în directorul de lucru pentru a adăuga Fișierele proiectului Compass.
bus init
Citirea în continuare: Documentație pentru linia de comandă Compass
Compass Configuration
Dacă ați executat această comandă bus init, ar trebui să aveți acum un fișier numit config.rb în directorul de lucru. Acest fișier este folosit pentru a configura ieșirea proiectului. De exemplu, putem modifica numele de director preferat.
http_path = "/" css_dir = "css" sass_dir = "scss" imagini_dir = "img" javascripts_dir = "js"
Renunțați la linia de comentarii generată de Compass; noi am stabilit Adevărat dacă avem nevoie de comentarii pentru a fi imprimate sau fals dacă nu trebuie.
line_comments = false
De asemenea, putem decide ieșirea CSS. Există patru opțiuni pe care le putem selecta : extins, :compact, : comprimatși :cuibărit. Pentru moment, avem nevoie să fie extinsă, deoarece suntem încă în stadiul de dezvoltare.
output_style =: expanded
Cred că aceste configurații vor fi suficiente pentru majoritatea proiectelor, în general, dar puteți să vă referiți întotdeauna la această documentație, Compass Configuration Reference dacă aveți nevoie de mai multe preferințe.
În cele din urmă, trebuie să ceas fiecare fișier din directorul cu această linie de comandă;
ceas de compas
Această linie de comandă, ca și în Sass, va urmări fiecare schimbare de fișier și va crea sau actualiza fișierele CSS corespunzătoare. Dar rețineți că rulați această linie după ce ați făcut configurarea proiectului config.rb, sau altfel va ignora modificările din fișier.
CSS3 Mixins
Înainte de a merge prin CSS3, în primul nostru .SCSS fișier, trebuie să importem compasul cu următoarea linie @import "busola";, aceasta va importa toate extensiile din Compass. Dar, dacă avem nevoie doar de CSS3, o putem face și mai specific cu această linie @import "compass / css3".
Citirea în continuare: Compass CSS3.
Acum, să începem să creăm ceva cu Saas și Compass. În documentul HTML, presupunând că ați creat și unul, vom pune următoarea marcare simplă:
Ideea este de asemenea simplă; vom crea o cutie rotita cu colturi rotunjite, si mai jos sunt stilurile noastre Sass imbricate pentru starter;
corp fundal-culoare: # f3f3f3; secțiunea width: 500px; margine: 50 pixeli automat 0; div width: 250px; înălțime: 250px; fundal-culoare: #ccc; marja: 0 auto;
Și, pentru a obține dreptunghiul nostru colțurile rotunjite, putem include Compass CSS3 Mixins după cum urmează;
corp fundal-culoare: # f3f3f3; secțiunea width: 500px; margine: 50 pixeli automat 0; div width: 250px; înălțime: 250px; fundal-culoare: #ccc; marja: 0 auto; @ include raza de graniță;
Acest border-radius Mixins va genera toate prefixele de browser și, în mod implicit, raza de colț va fi 5px. Dar, putem, de asemenea, să specificăm raza nevoii noastre în acest fel @ include raza de graniță (10px); .
secțiune div width: 250px; înălțime: 250px; fundal-culoare: #ccc; marja: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; raza de graniță: 10 pixeli;
Apoi, ca planul vom roti, de asemenea, caseta. Este foarte ușor să o faci cu Compass, tot ce trebuie să facem este să numim metoda de transformare, așa cum este;
corp fundal-culoare: # f3f3f3; secțiunea width: 500px; margine: 50 pixeli automat 0; div width: 250px; înălțime: 250px; fundal-culoare: #ccc; marja: 0 auto; @ include raza de graniță (10px); @ include rotate;
Acest Mixins va genera, de asemenea, acele prefixe obișnuite ale furnizorilor, iar rotația va avea în mod implicit 45 de grade. Vedeți CSS generat mai jos.
secțiune div width: 250px; înălțime: 250px; fundal-culoare: #ccc; marja: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; raza de graniță: 10 pixeli; -webkit-transform: rotiți (45deg); -moz-transform: rotiți (45deg); -ms-transform: rotire (45deg); -o-transform: roti (45deg); transforma: roti (45deg);
Compass Helpers
Una dintre cele mai puternice caracteristici din Compass este Helpers. Potrivit site-ului oficial, Ajutoarele busolei sunt funcții care sporesc funcțiile oferite de Sass. Bine, să aruncăm o privire la următoarele exemple pentru a obține o imagine clară.
Adăugarea de fișiere @ Font-face
În acest exemplu, vom adăuga familia de fonturi personalizate cu @ Font-face regulă. În codul simplu CSS3, codul poate arăta cam așa, mai jos, format din patru tipuri de fonturi diferite și este, de asemenea, greu de reținut pentru unii oameni.
@ font-face font-family: "MyFont"; Formatul formatului url ('/ fonts / font.wf') format url ('/ fonts / font.ttf'), format url ('/ fonts / font.otf' ('woff'), formatul url ('/ fonts / font.eot' ') (' embedded-opentype '); Cu Compass putem face la fel cu mai ușor cu font-fișiere () Helpers;
@ include font-face ("MyFont", fonturi-fișiere ("font.ttf", "font.otf", "font.woff", "font.eot")); Codul de mai sus va genera un rezultat care este exact același cu primul fragment de cod, va detecta automat tipul de font și îl va adăuga la format() sintaxă.
Cu toate acestea, dacă aruncăm o privire la codul îndeaproape, veți vedea că nu am adăugat calea fontului (/ fonturi /). Deci, cum a știut Compass unde sunt localizate fonturile? Ei bine, nu vă confundați, de fapt, această cale este derivată din config.rb cu fonts_path proprietate;
fonts_dir = "fonts"
Deci, să spunem că o schimbăm fonts_dir = "myfonts", atunci codul generat va fi URL-ul ( '/ fonturile_mele / font.ttf'). În mod implicit, când nu specificăm calea, Compass o va direcționa fonturi / foi de stil.
Adăugarea imaginii
Să formăm un alt exemplu, de data aceasta vom adăuga o imagine. Adăugarea de imagini prin CSS este un lucru obișnuit. În general, facem acest lucru folosind imagine de fundal proprietate, ca atare;
div imagine-imagine: url ('/ img / the-image.png'); În Compass, mai degrabă decât folosind URL-ul () funcția, îl putem înlocui Imagine URL() Ajutor și similare cu adăugarea @ Font-face de mai sus, putem ignora complet calea și putem lăsa Compass să se ocupe de restul.
Acest cod va genera exact aceeași declarație CSS ca și în primul fragment.
div imagine-fundal: imagine-url (the-image.png);
În plus, Compass are și Image Dimension Helpers, detectează în primul rând lățimea și înălțimea imaginii, astfel încât, în cazul în care avem nevoie de ambele pentru a fi specificate în CSS, putem adăuga încă două linii, după cum urmează;
div imagine-imagine: imagine-url ("imagini.png"); lățime: lățimea imaginii ("images.png"); înălțime: înălțimea imaginii ("images.png"); Rezultatul va deveni astfel;
div imagine-imagine: url ('/ img / images.png? 1344774650'); lățime: 80px; înălțime: 80px; Citirea în continuare: Funcțiile Helper Compass
Gândirea finală
Bine, am discutat destul de mult despre Compass astăzi și după cum puteți vedea că este într-adevăr un instrument puternic și permiteți-ne să scriem CSS într-un mod mai elegant.
Și, după cum știai deja, Sass nu este singurul Preprocesor CSS; există și mai puține lucruri pe care le-am discutat mai demult. În următorul post, vom încerca să comparăm, cap-la-cap, care unul dintre cei doi face mai bine postul în preprocesarea CSS.
- Descărcați sursa
