Share
În acest tutorial vom descrie ce se poate face cu stilurile flexibile Sass incluse în cadrul Fundației. Multe dintre ele oferă un set de caracteristici mai personalizabile decât cel al versiunii CSS, plus există comenzi rapide care pot fi utilizate pentru a personaliza elemente precum bara superioară rapid și ușor.
Urmați instrucțiunile găsite în Setarea fundației cu Sass și Compass sau documentația Zurb dacă aveți nevoie de ajutor pentru setarea fundației cu Sass. Aveți posibilitatea să utilizați linia de comandă pentru a face lucrurile să funcționeze cu Compass și Bourbon sau, alternativ, să apucați fișierele Sass independente de la GitHub, să le plasați în proiect și să importați oricare biți aveți nevoie.
Să începem cu grila, deoarece aceasta este baza Fundației. Este, de asemenea, o componentă excelentă pentru a vă arăta cât de flexibilă poate fi scss / sass.
De exemplu, atunci când folosiți mixurile disponibile pentru rețea (amestecurile, apropo, sunt ca și comenzile rapide la codul pre-scris), puteți crea propriile clase sau chiar propria dvs. rețea folosind câteva variabile simple. Să ne uităm la primul exemplu pe care Fundația vă oferă:
/ * Mixin opțiuni de creare a rândurilor * / @ include grilă-rând ($ comportament); / * Valoarea implicită este falsă, ceea ce va aduce stilurile rândului implicit * / $ comportament: false / * Dacă elementul pe care îl creați ca rând este imbricat într-un alt element * / / * care este, de asemenea, un rând, aveți nevoie pentru a adăuga stilurile potrivite de încadrare * / $ comportament: cuib / * Puteți utiliza această opțiune pentru a restrânge marginile rândului de containere * / / * Acest lucru vine la îndemână când lucrați cu formularele din interiorul grilei * / $ comportament: restrângere / * aveți un rând imbricat și doriți să se prăbușească, trebuie să adăugați această opțiune * / $ comportament: nest-colaps
Puteți vedea aici că avem un mixin (acestea sunt menționate de prefixul semnului '@') care are paranteze care conțin o variabilă. Începem cu mixinul @ includeți grilă-rând, specificând opțiunile sale în paranteze.
Când creați un mixin puteți specifica anumite părți ale codului pre-scris pentru a se schimba de fiecare dată când utilizați mixul respectiv. Un exemplu simplu ar fi crearea unui mixin care adaugă un font împreună cu dimensiunea, greutatea, culoarea etc., dar poate doriți să puteți modifica culoarea fontului de fiecare dată când utilizați mixinul. Aceasta ar fi ceea ce plasați în paranteze.
În acest caz, folosim o variabilă în cod, variabilele pot fi folosite pentru a stoca orice valoare în Sass și a începe cu un semn '$'. De exemplu:
/ * aici creăm fontul mixin * / @mixin ($ color) font-family: 'Arial'; font-size: 14px; greutatea fontului: 500; culoare: $ color; / * aici definim o variabilă de utilizat în cadrul acesteia * / $ blue = # 0099cc; / * si aici folosim de fapt fontul mixin * / @include ($ blue);
Deci, în acest cod am creat un mixin cu opțiunea personalizabilă de culoare, sub care am definit o culoare folosind o variabilă $ albastru după care vom folosi de fapt amestecul, referindu-ne în paranteze variabila noastră $ albastru, care echivalează cu codul hex # 0099cc.
Dacă ne referim înapoi la primul exemplu de cod veți vedea comportamentul $ utilizat de mai multe ori. Acest lucru poate părea un pic ciudat și o interpretare comună este "Așteaptă! Nu este aceasta doar suprascrierea variabilei de fiecare dată?". În esență, furnizați o valoare pentru fiecare opțiune dintr-un tip de listă, cunoscută și ca o matrice. De fiecare dată când utilizați comportamentul $ ieșirea va corespunde opțiunii în ordinea în care sunt declarate.
De asemenea, puteți să vedeți mai multe variabile în includeți:
@ include grilă-coloană ($ coloane, $ last-column); / * Opțiunea cea mai frecvent utilizată cu o coloană * / / * Aceasta stabilește proprietățile lățimii pentru coloană, utilizați un număr pentru a reprezenta coloanele * / $ coloane: # / * Utilizați această opțiune dacă coloanele dvs. nu adaugă până la 12. * / / * Facem ultima coloană implicită să plutească: dreapta pentru a păstra lucrurile aliniate * / / * Dacă nu doriți acest lucru, setați $ last-column to true * / $ last-column: false
Pentru a pune acest lucru într-o perspectivă, vom trece prin crearea unei rețele utilizând doar cod HTML foarte simplu, deoarece clasele nu sunt aproape de loc, deoarece este necesar ca toate comenzile rapide de stil să fie stabilite în codul Sass. Iată un exemplu simplu pentru a construi un antet.
$ lățimea rândului: em-calc (600); $ coloană-jgheab: em-calc (30); $ total-coloane: 12! implicit; header @ include grilă-rând; @ include panoul; @ include grilă-coloană (3); Secțiunea @ include grilă-coloană (9); articolul @ include grilă-rând; header @ include grilă-coloană (2); Div @ include grilă-coloană (10);
Puteți vedea aici că html este minim și că sass calculează perfect cuibul, am stabilit și câteva valori globale pentru lățimea maximă, spațiul dintre coloane și numărul de coloane. Din punct de vedere HTML, acest lucru economisește un timp destul de mare, dar aceste procese de gândire din spatele layout-ului pot fi puțin confuzive pentru început. Să aruncăm o privire acum la butoane și cum le puteți manipula folosind Sass.
Unul dintre lucrurile drăguțe despre Sass este cât de repede puteți să vă stilizați paginile și cât timp economisiți în a nu trebui să copiați codul.
Aveți posibilitatea să comutați rapid la stilul butonului cu ușurință folosind ceva simplu, cum ar fi:
.numele dvs. de clasă @include butonul;
Adăugați câteva opțiuni și într-o singură linie de cod ați replicat un stil care ar lua șase sau șapte linii de CSS, ce economizor de timp!
De asemenea, veți observa că pentru butoane există o multitudine de opțiuni care nu există în versiunea CSS și acest lucru este valabil pentru toate elementele Sass. Acest lucru va adăuga într-adevăr un strat suplimentar de libertate peste versiunea CSS cu care ați lucrat anterior. Mai jos este un exemplu de buton construit folosind variabile, apoi aceleași, dar folosind valori directe, astfel încât să puteți obține o idee foarte bună despre modul în care acestea funcționează.
.numele dvs. de clasă @include butonul ($ padding, $ bg, $ radius, $ full-width, $ disabled, $ is-input); @ include inset-shadow ($ activ); numele dvs. de clasă @ include butonul (1em, # ca2727, 2px, false, false, false); @ include inset-shadow (true);
Acesta este doar un exemplu simplu, dar este un exemplu pe care probabil că îl veți folosi frecvent. Când codul este compilat, veți termina cu acest CSS (și cum vă puteți imagina că codul de ieșire va dura mult mai mult timp pentru a scrie decât cel al lui Sass):
.link stil de frontieră: solid; lățimea graniței: 1px; cursor: pointer; font-family: inherit; font-weight: bold; linia-înălțime: normală; marja: 0 0 1,25; poziție: relativă; text-decoration: nici unul; text-align: centru; afișare: inline-block; pad-top: 1em; umplutură-dreapta: 2em; pad-bottom: 1.0625cm; padding-left: 2em; font-size: 1.25; fundal-culoare: # ca2727; culoare frontală: # 9f1f1f; culoare albă; -webkit-border-radius: 2px; raza de graniță: 2px; -webkit-box-shadow: 0 1px 0 rgba (255, 255, 255, 0.5) inset; box-shadow: 0 1px 0 rgba (255, 255, 255, 0.5) inset;
Deși mulți dintre voi îl veți vedea pe Sass ca o limbă străină, este de fapt foarte rapid să ridicați o dată ce ați scris câteva linii. Structura este ușor îmbunătățită comparativ cu CSS și, dacă rămâneți blocată, puteți cădea înapoi pe CSS utilizând SCSS atunci când aveți absolut nevoie să.
În cele din urmă, una dintre cele mai puțin scrise despre caracteristicile Sass este abilitatea de a adăuga funcții în foile de stil. Acestea nu sunt funcții dinamice pe pagină (se execută atunci când compilați codul Sass), dar acestea oferă oportunități interesante pentru a economisi încă un timp.
De exemplu, în Fundație există o funcție de conversie a pixelilor în em. Acest lucru este fantastic pentru site-urile receptive; setați pur și simplu valoarea de bază em prin:
$ em-bază: 16px!
Apoi ori de câte ori doriți să utilizați o valoare em, pentru care ar trebui în mod normal să calculați pixelul la em, pur și simplu utilizați:
înălțime: em-calculat (46);
"46" fiind numărul de pixeli și em-Calc fiind funcția. Puteți folosi acest lucru oriunde în codul dvs. Sass unde veți avea nevoie de o valoare pixel.
În ultimul post am menționat compilații Sass și avantajele imense pe care le au asupra compilării manuale. De data aceasta vă voi îndruma către un instrument pe care l-am găsit util pentru aproape fiecare proiect pe care am lucrat vreodată.
Mai întâi, când vorbești despre Fundație, vei lucra cu Sass, CSS, HTML și JavaScript, dar să nu uităm că o mare parte din designul web se învârte în jurul imaginilor, în special png și jpg. Este absolut necesar să aveți imagini optimizate pe web, prin urmare, utilizând fie imageOptim (OS X), fie Optimizer de fișiere (Windows).
Aceste instrumente vor comprima imaginile fără a pierde nici o calitate. Este de fapt foarte eficientă, iar ratele de compresie pot fi minunate, cu unele reduceri de până la 70%. Gandeste-te la asta; dacă încărcați un png la 100kb ar putea fi uita la un fișier de 30kb după conversie. Acest lucru poate fi și mai eficient dacă utilizați imagini sprite.
Am analizat elementele de bază ale Sass, cum ar trebui să fie configurate, ce puteți face cu ea și cum poate accelera fluxul de lucru. În următoarea piesă vom trece în ceva destul de interesant; Fundația pentru șine. Acest lucru va permite unele funcții dinamice reci, care pot sta alături de HTML, CSS și JavaScript.
Accentsconagua