Share
Sass ar putea fi numit CSS 2.0; are câteva caracteristici foarte atractive care vă permit să vă scrieți codul în mai puțin timp și cu mai multă flexibilitate. În articolul de astăzi, vom lucra la elementele de bază!
Sass este pur și simplu o modalitate diferită de a lucra cu CSS. Acesta vă permite să vă păstrați codul CSS foarte simplu și vă ajută la creșterea lizibilității. E nevoie de ceva de genul:
Și o transformă în:
Puteți să verificați Sass la http://sass-lang.com/
Compasul face lucrul cu Sass chiar mai ușor. Autorul, Chris Eppstein, a inclus și unele cadre convertite, cum ar fi Blueprint, YUI și 960.gs. De asemenea, se integrează ușor cu proiectele bazate pe Ruby, dar este la fel de ușor de adăugat la orice alt proiect. Compasul este open-source și este foarte bine documentat. Verificați sursa și documentația.
Atât Sass (care face parte din Proiectul Haml) cât și Compass sunt instalate prin RubyGems. Dacă nu aveți nicio idee despre ce am vorbit, verificați "Pasul 1 - Instalarea Ruby on Rails" din articolul meu precedent Ruby on Rails for Designers și urmați pașii în jos până când apăsați secțiunea "Installing Rails".
Pentru a instala ambele aceste pietre, putem rula doar o singură comandă:
(sudo) bijuterie instalați chrisppstein-busola
Atâta timp cât se spune că a instalat cu succes ambele pietre, ești bine să pleci!
Dacă lucrați cu un proiect bazat pe Ruby, atunci verificați documentația, deoarece vă va explica cum să lucrați cu cadrul dvs. specific, dar presupun că lucrăm cu un proiect HTML simplu sau similar.
Comanda busolă are multe opțiuni și dacă rulați busola --help, este posibil să vedeți:
FYI: Următoarea linie de sus, care spune "Încărcare bijuterie margine." este pentru că folosesc cea mai recentă versiune, deci nu trebuie să vă faceți griji dacă dvs. spune ceva diferit.
Acum vom începe proiectul Compass. Pentru a crea rulați următoarea comandă (inclusiv perioada de urmărire, care spune busolei unde dorim să facem proiectul nostru!)
busola - sass-dir = sass .
Și ar trebui să vedeți:
În cazul inițializării, Compass ar fi implicit implicit să aibă Sass într-un nume de folder src, dar am vrut să schimb acest lucru, așa că am adăugat opțiunea. Dacă vă uitați la dosar, ar trebui să vedeți un fișier numit config.rb și alte două dosare.
Config.rb este configurația la care se concentrează Compass, dar de cele mai multe ori nu trebuie să te deranjezi cu asta. De asemenea, la fel ca ieșirea de la comanda de creare spune, avem trei moduri de actualizare a CSS-ului nostru de la Sass:
Accentsconagua
busolă - utilizând această opțiune, ar trebui să fiți în directorul corect, iar Compass va compila o dată pe dvs. Sass.compas -u path / to / project - acest lucru este cam la fel ca și comanda de mai sus, dar nu trebuie să vă aflați în directorul de proiect și mai degrabă să treceți în ea cu comanda.busola - vizionează [cale / spre / proiect] - această comandă este destul de minunată prin faptul că vă supraveghează orice modificare a fișierelor dvs. Sass și le va recompila automat ori de câte ori este detectată o modificare.Acum că știți cum să configurați un proiect, voi explica câteva dintre "regulile" de a lucra cu Sass
În mod normal, atunci când scrieți CSS, ați scrie ceva de genul:
#header width: 900px; fundal: # 111; #header a culoare: # 000; text-decoration: none;
Una dintre problemele cu care este vorba este că repetă același nume de mai multe ori. Să facem asta în Sass. Am de gând să lucrez în fișierul screen.sass, deci ștergeți totul și Sass dvs. ar dori:
#header: lățime 900px: fundal # 111 a: culoare # 000: text-decoration none
Personal, că este mult mai ușor să citiți și să scrieți în acest fel, fără bretele sau punct și virgulă. Felul în care înțelege Sass cuibul este prin indentare.
Primul selector nu este deloc aliniat, astfel încât ultimul CSS să înceapă cu asta. De asemenea, toate proprietățile (atât culoarea, lățimea înălțimii etc.) încep cu un colon. Deci, pentru proprietățile #header ele sunt indentate. Nu contează dacă utilizați file sau spații, dar trebuie să rămâneți consecvent, altfel veți vedea o eroare (pe care o voi arăta în doar un minut).
Deci acum că aveți proprietățile voastre, avem selectorul nostru următor. Deoarece aceasta este indentată la fel ca proprietățile, va fi ieșirea CSS #header a ...
Acum, că suntem atât de departe, încercați să compilați: (în directorul de proiect)
busolă
Și voila!
Să presupunem că nu ați făcut același lucru, Compass ar fi eronat:
Acum, odată ce știi CSS, Sass nu va fi foarte mult o curbă de învățare, deoarece diferența principală atunci când începeți este normele de formatare diferite. Apoi, vom lucra cu unele dintre cele mai avansate (dar mai răcoritoare) părți ale Sass.
O caracteristică minunată a Sass este abilitatea de a utiliza variabilele. Un exemplu:
!link_color = #fff #header: lățime 900px: fundal # 111 a: color =! link_color: text-decoration none
Compilarea acestui lucru vă va oferi:
S-ar putea să râdeți la acest titlu, dar adevăratul lui, puteți face matematică în Sass! Pentru această demonstrație, vom folosi modul interactiv al lui Sass, așa că rulați:
sass -i
Și o mică încurcătură vă va da:
Sau o abordare mai vizibilă:
# 111 - # 999 = # 000
# 111 + # 999 = #aaa
# 398191 + # 111 = # 4a92a2
# 398191 - # 111 = # 287080
În afară de adăugarea și scăderea, puteți de asemenea să vă multiplicați și să împărțiți:
# 398191/2 = # 1c4048
# 398191 * 2 = # 72ffff
Pentru a ieși din modul interactiv Sass, apăsați tasta Control-C, apoi tastați "end" și apăsați enter.
Dacă ați auzit vreodată că vă păstrați codul DRY, DRY înseamnă "nu vă repetați". Amestecurile vă permit să faceți exact acest lucru. De exemplu, odată cu popularitatea câștigătoare a colțurilor rotunjite, poate doriți să creați un amestec pentru a face acest lucru, deci undeva, (nu sub selector) pe care îl veți adăuga:
= rotunjit: raza de graniță 4px: -moz-border-radius 4px: -webkit-border-radius 4px
Și pentru a utiliza, ați face ceva de genul:
#header: lățime 900px: fundal # 111 + rotunjit
Și când este compilat:
Să spunem însă că poate doriți ca raza de graniță să fie variabilă - bine puteți avea un mixin care așteaptă să fie transmise câteva valori. Schimbând mixinul nostru, ar arata ca:
= rotunjite (! radius = 4px): border-radius =! radius: -moz-border-radius =! radius: -webkit-border-radius =!
Apoi, pentru a utiliza puteți folosi ceea ce am făcut înainte și apoi valoarea ar fi implicit la 4px, altfel:
#header: lățime 900px: fundal # 111 + rotunjit (8px)
Sass are, de asemenea, posibilitatea de a importa alte fișiere Sass, deci vă permite să spuneți că doriți să importați un fișier (în același fișier cu acest fișier), ați adăuga:
@import reset.sass
Această caracteristică este foarte plăcută în a vă oferi capacitatea de a păstra stiluri străine în afara fișierului principal. De exemplu, puteți păstra, de asemenea, un fișier mixin sass pe care l-ați copiat în jurul proiectelor și apoi un simplu import ar adăuga acest cod - nu copiați și lipiți.
Sper că înțelegeți elementele de bază ale utilizării Sass și Compass și vă veți putea folosi în viitorul dvs. proiect! Acum, dacă sunteți ca și când l-am găsit pe Sass și am spus: "Nu am nevoie de asta!", Încercați. Am trecut la asta pentru toate proiectele mele recente și îmi place să lucrez cu el.
Iată câteva linkuri care vă pot ajuta pe parcurs:
