Share
Nu voi face nici un secret: Îmi place Sass. În acest articol voi împărtăși recomandările mele pentru a lucra cu Sass zilnic și pe proiecte reale.
Iată un plugin minunat care vă va economisi mult timp. Deschideți controlul pachetului în Text sublim, căutați Hayaku și faceți o instalare rapidă. Acum puteți să vă scrieți CSS mai rapid și cu comenzi rapide. Aici sunt cateva exemple:
// Scrie acest lucru și apăsați tabul mt10 // Rezultat margin-top: 10px; // Sau acest df // Afișare rezultate: flex;
În special pentru fluxul de lucru Sass există un dosar pe care ar trebui să îl ignorăm atunci când căutăm în Text Sublim. Dosarul în cauză este .Sass-cache, deoarece acest lucru este necesar doar pentru procesul de compilare. În plus, nu trebuie să editați nimic în acest dosar, pentru a vă face viața mai ușoară și pentru ao ascunde!
presa CMD-, pentru a obține userconfig al editorului dvs. și introduceți următoarele rânduri:
"folder_exclude_patterns": [".sass-cache"]
Având o structură solidă a proiectului este foarte importantă, mai ales dacă lucrați într-o echipă.
Folosesc trei secțiuni diferite (o abordare din partea SMACSS de Jonathan Snook): _baza, _layouts și _modules. O configurație globală este ideală pentru plasarea în _baza pliant. Pentru fiecare tip de structură, creați un fișier unic și plasați-l în dosar _layouts. Gândiți-vă, de exemplu, la un aspect de bază, grila sau poate un fișier pentru aspectul de imprimare.
Este posibil să împărțiți un site web în diferite tipuri de module, cum ar fi tab-uri, butoane, acordeoane etc. Nici un modul nu ar trebui să fie "conștient" de aspectul din jurul acestuia. Acestea aparțin apoi _modules pliant.
În mod normal, structura proiectului meu arată astfel:
scss / | - _base / | | --Config.scss | | - _presets.scss | | --Participare | | - | | | | | | | | | | | | - _l-base.scss | | --Modeluri | | - _m-butoane.scss | | - _m-tabs.scss | - aplicații.scss foi de stil / | - application.css
Dacă nu utilizați Sass 3.3 sau Node-Sass, probabil că veți avea nevoie de următoarea funcție pentru a simula Sass Maps. Hărțile Sass vă permit să definiți seturi de chei cu valori asociate. În acest caz, puteți utiliza funcția, introduceți cheia și apoi veți obține valoarea potrivită. Iată un exemplu rapid:
// Funcția: Simulați matricele asociative // Authour: Hugo Giraudel // Sursa: http://hugogiraudel.com/2013/08/12/sass-functions/#mapping @funcția funcțională ($ haystack, $ needle) @ fiecare $ element în $ haystack $ index: index ($ articol, $ ac); @if $ index $ return: dacă ($ index == 1, 2, $ index); @return nth (element $, revenire $); @return false; // Folosire listă $: a b, c d, e f; Valoare $: potrivire (listă $, e); // returnează f
Iată câteva mixuri pe care probabil că veți avea nevoie în fiecare proiect. Să începem cu niște lucruri mai simple cum ar fi construirea unei coloane cu sass
O rețea este absolut indispensabilă în proiectul dvs. Cu acest ajutor (un amestec pe care l-am numit col) Este mai ușor să creați lățimea unei coloane. Se așteaptă două valori: numărul coloanei ($ col) Și coloanele maxime ($ Max-cols) în grilă, fișierul implicit 12.
// Calculați lățimea unei coloane // Valoarea implicită a coloanelor maxime este 12 @ mixin col ($ col, $ max-cols: 12) lățime: (100% / $ max-cols) * $ col; // Utilizarea elementului @ include col (3); // Rezultat .element width: 25%;
Timpul a trecut mult timp că avem nevoie doar de valorile pixelilor. Când este posibil, în aceste zile încerc să folosesc em sau rem. Acestea sunt ambele unități relative de măsurare, diferența dintre acestea fiind aceea em se bazează pe valoarea lui părinte container și rem se bazează pe dimensiunea fontului rădăcină ( html element).
// Mixin @mixin dimensiunea fontului ($ sizeValue: 1.6) font-size: ($ sizeValue * 10) + px; font-size: $ sizeValue + rem; // Utilizarea elementului @include dimensiunea fontului (1.8); // Rezultatul .element font-size: 18px; font-size: 1.8;
Implicarea manuală a fonturilor prin CSS3 nu este ușoară, deoarece există atât de multe formate pentru diferite tipuri de browsere. Un mixin este soluția perfectă pentru acest lucru. Acest amestec este numit font-faceși se așteaptă la două valori. Primul este numele familiei de fonturi, iar al doilea este calea către diferitele formate de fișier ale fontului. Citiți mai multe despre aceste formate diferite în Mozilla Developer Network.
Accentsconagua
// Mixin @mixin font-face ($ nume, $ url) @ font-face font-family: # $ name; src: adresa URL ('# $ url .eot'); src: url ('# $ url .eot # iefix') format (embedded-opentype), url ('# $ url .ttf' url .svg ## $ name ') format (' svg '), url (' # $ url .woff ') format (' woff '); @conţinut; // Utilizare @ include font-face ('icons', '... / fonts / icons / iconfont'); // Rezultat @ font-face font-family: icoane; src: url ("... /fonts/icons/iconfont.eot"); src: url ("... /fonts/icons/iconfont.eot#iefix") format ("embedded-opentype"), url ("... /fonts/icons/iconfont.ttf" "... /fonts/icons/iconfont.svg#icons") format ("svg"), formatul url ("... /fonts/icons/iconfont.woff") ("woff"); Jayden Seric a făcut o treabă minunată cu mixinul său pentru includerea icoanelor. Aici avem un amestec numit icoanăcu doi parametri: poziţia $ pentru pseudoelemente, apoi pentru boolean $ icon care este setat la Adevărat sau fals. Creați o variabilă numită $ icoane, definiți numele pictogramei (cheie) și valoareapentru asta:
// Autor: Jayden Seric // Sursa: http://jaydenseric.com/blog/fun-with-sass-and-font-icons @mixin icon ($ position: 'înainte', $ icon: false) &: # $ position @if $ icon conținut: potrivire (pictograme $, pictogramă $); @content; // Utilizare // Creați o variabilă cu toate pictogramele dvs. // Pictograme nume, valoare-valoare $: ('bifați' a ',' minus 'b', 'plus' c '); @include pictograma ("înainte", "marcaj"); // elementul rezultat: înainte de content: "a";Sunt foarte recunoscător pentru acest amestec de către Snugug: este o modalitate excelentă de a vă configura întreruperile globale și cea mai bună parte este aceea de a da fiecărui punct de întrerupere propriul nume. Diferențierea lucrurilor cu nume este mult mai bună decât cu pixelii. Acest lucru vă oferă, de asemenea, o imagine de ansamblu a tuturor lățimilor utilizate și un loc central pentru schimbarea comportamentului.
// Utilizați mixin de Snugug // URL: https://gist.github.com/Snugug/2493551 // Definiți punctele de întrerupere și dați fiecăruia un nume $ breakpoints: ('mic' 481px, 'mediu' 600px, 'mare '769px); // Element de utilizare fundal: roșu; @ include răspuns-la ("mediu") fundal: albastru; // Rezultatul elementului background: red; ecranul @media și (min-width: 600px) .element fundal: albastru; Manipularea variabilelor într-un front-front scalabil este o întrebare filosofică. În cazul meu, am un flux de lucru pentru că mi se potrivește bine. Mai întâi vom crea o paletă de culori cu toate culorile disponibile și le vom da nume normale de identificare.
$ gri-light: # f2f2f2; $ gri: #ccc; $ gri-întuneric: # 7a7a7a; $ roșu: # d83a3a; $ green: # 40b846;
După ce avem o paletă bună, cu toate culorile disponibile, trebuie să arătăm culorile corporale sau principale ale proiectului. Cu acest pas este posibil să creați o temă nouă pentru proiect fără a pierde timpul adaptând culorile în întregul fișier.
$ corp-color: $ roșu! $ corp-color-întuneric: întunecat ($ corp-color, 10%)! implicit; $ corp-color-secundă: $ green! default; $ corp-color-al doilea-întuneric: întunecat ($ corp-color-secundă, 10%)! implicit;
Configurați unele configurații de bază, cum ar fi dimensiunea globală a fontului, familia font-urilor sau culoarea de bază a unui fișier de configurare - de exemplu într-un fișier numit _config.scss, care se află în dosarul dvs. _de bază.
// Fonturi $ bază-font-size: 1.7! Implicit; $ base-font-family: Helvetica, Arial, sans-serif! $ base-font-color: $ gri! implicit; // caseta / granița $ base-border-radius: 3px! Default; $ border-radius-rounded: 50% implicit; $ base-border-color: $ gri!
Există multe sisteme de grilă în lume, dar grila de către PureCSS este, în ochii mei, una dintre cele mai bune. Am preluat ideea din spatele ei, am făcut ceva magie cu Sass, să-mi permit să creez rapid clase de coloane și să construiesc o grilă pentru ferestrele de vizualizare mici, medii și mari.
Este foarte ușor să schimbați comportamentul receptiv al unui element. Definiți comportamentul o singură dată pentru modul, dar dacă aveți un alt comportament la un moment dat, decât să creați un modificator cum ar fi .m-text-cu-activ - mare
// Definiți coloanele maxime și spațiul dintre fiecare coloană $ max-cols: 2; $ lățimea gutterului: 25px;
// Nume: Default-Grid @ pentru sumă $ de la 1 la $ max-cols @ pentru $ i de la 1 la $ suma .lu - # $ i - # $ sum @include col ($ i, sumă $); // Nume: Mica grilă @ pentru sumă $ de la 1 la $ max-cols @ pentru $ i de la 1 la $ suma .lu - mică - # $ i - # $ sum @ includeți răspunsul la ('mic') @include col ($ i, suma $); // Nume: Mediu-Grid @ pentru sumă $ de la 1 la $ max-cols @ pentru $ i de la 1 la $ suma .lu - mediu - # $ i - # $ sum @ includ răspunsul la ('mediu') @include col ($ i, suma $); // Nume: Marele Grid @ pentru suma $ de la 1 la $ max-cols @ pentru $ i de la 1 la $ suma .lu - mare - # $ i - # $ sum @ include răspunsul la ('mare') @ include col ($ i, $ sum); // Utilizare Lorem ipsum dolor stai în ordine, consecventă, dar nu mai e nevoie de timp invitând la muncă și să-ți dai seama, că diam voluptua.
La telefonul mobil veți obține o coloană cu o lățime totală, dincolo de o fereastră de vizualizare de 480 px, o jumătate de coloană și o coloană de peste 768 de pixeli.
Cele mai multe site-uri (declarație de măturători) au un container centrat. Acest lucru nu este întotdeauna cazul însă, din acest motiv este util să creați un ajutor:
// Nume: Container limitat .l-constrained margin-left: auto; margin-dreapta: auto; padding-left: $ prevent-spacing; padding-right: $ prevenire-spacing; maximă-lățime: $ max-wrapper-width;
Dacă nu utilizați flexboxul ca motor de configurare de alegere, atunci veți folosi flotoare. Este imperativ să ștergeți flotoarele, deoarece altfel întreaga structură poate fi distrusă.
.l-grup: după conținut: "; clar: ambele; afișare: tabel;
În cazul în care văd distanțe coerente într-un design layout, folosesc clase de ajutor pentru menținerea corecte a măsurătorilor.
// Nume: Distance-Small // Descriere: Ajutor pentru a crea distanță-top .l-distance-small margin-top: 20px; // Nume: Distance-Medium // Descriere: Ajutor pentru a crea distanță-top .l-distanță-mediu margin-top: 40px;
Preferați un generator de fonturi online sau folosiți o interfață de linie de comandă pentru generarea de fonturi? Prefer o soluție online, instrumentul ales de mine fiind fontastic.me. Există o imagine de ansamblu asupra tuturor fonturilor dvs., puteți alege modul în care ar trebui să fie reprezentată caracterele de clasă sau de caractere.
Acum, să începem să creăm clase pentru icoanele tale. Nu vă voi arăta stilurile de bază ale fiecărei pictograme. Puteți face acest lucru de unul singur, dar acest lucru vă poate ajuta cu configurația de bază a pictogramelor.
// Nume: Array cu pictograme de nume și valoare de conținut $: ('bifați' a ',' minus 'b', 'plus' c '); prefix:' icon-- '! // Descriere: Creați pentru fiecare pictogramă o clasă proprie cu conținut corect Configurare pentru pictograme în _config.scss // Utilizați mixul pentru crearea de pictograme care se află în partea de sus a articolului @@each $ icon în $ icons $ name : n (pictogramă $, 1); # unquote ($ prefix) # $ name @include pictograma (înainte, $ name); // Result .icon - : 'a'; .icon - minus: înainte de content: 'b'; .icon - plus: înainte de content: 'c';Stii ce spun? Când am început pentru prima oară ca dezvoltator CSS, am construit totul pe baza paginii designerului, dar ce se întâmplă dacă aveți nevoie de un modul pe un alt site? Din această cauză este important să construiți module închise fără a avea aspectul în jurul lor.
Creați un fișier pentru modulul dvs. și puneți-l în dosar _modules. În partea de sus a fișierului aveți o zonă de configurare, unde definiți culori sau alte aspecte care vor afecta tema.
Sub configurație veți defini modulul cu toate stilurile. Utilizați comentariile bine, pentru a simplifica modulul.
@charset "UTF-8"; // 1.Config $ acordeon-bgcolor: $ gri-light! Implicit; $ acordeon-alternativă-bgcolor: $ gri-întuneric; implicit; $ acordeon-fontcolor: $ corp-color! implicit; // 2.Baza // Nume: Default Accordion .m-acordeon background: $ acordeon-bgcolor; culoare: $ acordeon-fontcolor; // Nume: Acordeon alternativ .m-acordeon - alternativă background-color: $ acordeon-alternative-bgcolor;
Simțiți-vă liber la furculița depozitului care deține tot codul văzut în acest articol. Sper că vă ajută să construiți un front-end scalabil mai bun în proiectele din lumea reală Vă rugăm să vă împărtășiți gândurile și ideile cu mine în comentariile.
