Share
Jeg vil ikke hemmeligholde det: Jeg elsker Sass. I denne artikkelen skal jeg dele mine anbefalinger for å jobbe med Sass på daglig basis og på virkelige prosjekter.
Her er en fantastisk plugin som vil spare deg for mye tid. Åpne pakkekontroll i Sublime Text, søk etter Hayaku og gjør en rask installasjon. Nå kan du skrive CSS raskere og med snarveier. Her er noen eksempler:
// Skriv dette og trykk kategorien mt10 // Resultatmargin-topp: 10px; // Eller dette df // Resultatvisning: flex;
Spesielt for din Sass-arbeidsflyt er det en mappe som vi bør overse når du søker i Sublime Text. Den aktuelle mappen er .sass-cache, fordi dette bare er nødvendig for kompileringsprosessen. I tillegg må du aldri redigere noe i denne mappen, så gjør livet ditt lettere og gjemme det!
trykk CMD-, for å få brukerkonfigurasjonen av redaktøren din og sett inn følgende linjer:
"folder_exclude_patterns": [".sass-cache"]
Å ha en solid prosjektstruktur er super viktig, spesielt hvis du jobber i et lag.
Jeg bruker tre forskjellige seksjoner (en tilnærming fra SMACSS av Jonathan Snook): _utgangspunkt, _layouts og _modules. En global konfigurasjon er ideell for plassering i _utgangspunkt mappe. For hver layouttype lager du en unik fil og legger den i mappen _layouts. Tenk for eksempel av en grunnleggende layout, rutenettet eller kanskje en fil for utskriftsoppsettet.
Det er mulig å dele et nettsted i forskjellige typer moduler som faner, knapper, trekkspill osv. Ingen modul skal være "klar" av layouten rundt den. Disse tilhører deretter i _modules mappe.
Normalt ser prosjektstrukturen slik ut:
scss / | - _base / | | - _config.scss | | - _presets.scss | | - _headings.scss | | - ... | - _layouts / | | - _l-base.scss | | - _l-grid.scss | - _modules / | | - _m-buttons.scss | | - _m-tabs.scss | - application.scss stylesheets / | - application.css
Med mindre du bruker Sass 3.3 eller Node-Sass, vil du sannsynligvis trenge følgende funksjon for å simulere Sass Maps. Sass kart gir deg mulighet til å definere sett med nøkler med tilhørende verdier. I dette tilfellet kan du bruke funksjonen, sette inn nøkkelen og så får du den tilsvarende verdien. Her er et raskt eksempel:
// Funksjon: Simulere associative arrays // Authour: Hugo Giraudel // Kilde: http://hugogiraudel.com/2013/08/12/sass-functions/#mapping @function match ($ haystack, $ needle) @each $ element i $ haystack $ index: index ($ item, $ needle); @if $ indeks $ return: if ($ index == 1, 2, $ index); @return nth ($ item, $ return); @return false; // Bruk $ list: a b, c d, e f; $ verdi: match ($ list, e); // returnerer f
Her er noen mixins som du sannsynligvis trenger i hvert prosjekt. La oss starte med noen enklere ting som å bygge en kolonne med sass
Et rutenett er absolutt uunnværlig i prosjektet. Med denne hjelperen (en blanding jeg har kalt col) Det er lettere å lage bredden på en kolonne. Det forventer to verdier: tallet til kolonnen ($ col) Og de maksimale kolonnene ($ Max-kolonner) i rutenett, standardinnstillingen 12.
// Beregn bredde på en kolonne // Standardverdien av maksimale kolonner er 12 @mixin col ($ col, $ max-kols: 12) bredde: (100% / $ max-kols) * $ col; // Bruk .element @include col (3); // Resultat .element bredde: 25%;
Tiden har lenge passert at vi bare trenger pixelverdier. Hvor mulig disse dager prøver jeg å bruke em eller rem. Disse er begge relative måleenheter, forskjellen mellom dem er det em er basert på verdien av sin foreldrebeholder og rem er basert på fontstørrelsen til roten (den html element).
// Mixin @mixin skriftstørrelse ($ sizeValue: 1.6) font-size: ($ sizeValue * 10) + px; skriftstørrelse: $ sizeValue + rem; // Bruk .element @ include font-size (1.8); // Resultat. Element font-size: 18px; fontstørrelse: 1.8rem;
Det er ikke lett å legge inn fonter manuelt via CSS3, fordi det er så mange formater for forskjellige typer nettlesere. En mixin er den perfekte løsningen for dette. Denne blandingen kalles skrifttypeog det forventer to verdier. Den første er navnet på skrifttypefamilien, og det andre er banen til de forskjellige filformatene til skrifttypen. Les mer om disse ulike formatene på Mozilla Developer Network.
Accentsconagua
// Mixin @mixin font-face ($ navn, $ url) @ font-face font-family: # $ name; src: url ('# $ url .eot'); src: url ('# $ url .eot # iefix') format ("embedded-opentype"), url ('# $ url .ttf') format ('truetype'), url ('# $ url .svg ## $ name ') format (' svg '), url (' # $ url .woff ') format (' woff '); @innhold; // Bruk @ inkludere font-face ('ikoner', '... / skrifter / ikoner / iconfont'); // Resultat @ font-face font-family: icons; src: url ("... /fonts/icons/iconfont.eot"); src: url ("... /fonts/icons/iconfont.eot#iefix") format ("embedded-opentype"), url ("... /fonts/icons/iconfont.ttf") format ("truetype"), url "... /fonts/icons/iconfont.svg#icons") format ("svg"), url ("... /fonts/icons/iconfont.woff") format ("woff"); Jayden Seric gjorde en flott jobb med sin mixin for å inkludere ikoner. Her har vi en mixin som heter ikonmed to parametere: $ posisjon for pseudo-elementene, så den boolske $ ikonet som er satt til ekte eller falsk. Opprett en variabel som heter $ ikoner, definer navnet på ikonet (nøkkelen) og verdienfor det:
// Forfatter: Jayden Seric // Kilde: http://jaydenseric.com/blog/fun-with-sass-and-font-icons @mixin icon ($ posisjon: 'før', $ ikon: false) &: # $ posisjon @if $ icon innhold: match ($ ikoner, $ ikon); @innhold; // Bruk // Opprett en variabel med alle ikonene dine // Navn, Innholdsverdi $ ikoner: ('merk av' a ',' minus 'b', 'plus' c '); // Inkluder mixin. Element @include icon ('before', 'checkmark'); // Resultat .element: før innhold: "a";Jeg er så takknemlig for denne mixin av Snugug: Det er en fin måte å konfigurere dine globale breakpoints, og det beste er at du gir hvert brytepunkt sitt eget navn. Differensierende ting med navn er så mye bedre enn med piksler. Dette gir deg også en god oversikt over alle bruddbredder og et sentralt sted for å endre oppførselen.
// Bruk mixin av Snugug // URL: https://gist.github.com/Snugug/2493551 // Definer dine breakpoints og gi hver en navn $ breakpoints: ('small' 481px, 'medium' 600px, 'large '769px); // Bruk. Element bakgrunn: rød; @include svar til ('medium') bakgrunn: blå; // Resultat. Element bakgrunn: rødt; @media skjerm og (min-bredde: 600px) .element bakgrunn: blå; Håndtering av variabler i en skalerbar frontend er ofte et filosofisk spørsmål. I mitt tilfelle har jeg en arbeidsflyt for det som passer meg godt. Først oppretter vi en fargepalett med alle tilgjengelige farger og gir dem vanlige identifiserende navn.
$ grålys: # f2f2f2; $ grå: #ccc; $ grå-mørk: # 7a7a7a; $ rød: # d83a3a; $ grønn: # 40b846;
Etter at vi har en god palett med alle tilgjengelige farger, bør vi påpeke prosjektets hovedkilder eller hovedfarger. Med dette trinnet er det mulig å lage et helt nytt tema for prosjektet uten å kaste bort tid til å tilpasse fargene i hele filene.
$ corp-farge: $ rød! standard; $ corp-color-dark: darken ($ corp-color, 10%)! default; $ corp-color-second: $ green! default; $ corp-color-second-dark: mørkere ($ corp-color-second, 10%)! default;
Oppsett noen grunnleggende konfigurasjoner som global skriftstørrelse, skriftfamilier eller den grunnleggende skrifttypefarge i en konfigurasjonsfil - for eksempel i en fil som heter _config.scss, som er i mappen din _basic.
// Font $ base-font-size: 1.7! Default; $ base-font-familie: Helvetica, Arial, sans-serif! default; $ base-font-color: $ grå! standard; // Box / Border $ base-border-radius: 3px! Default; $ border-radius-avrundet: 50%! default; $ base-border-farge: $ gray! default;
Det er mange mange rutenettsystemer i verden, men rutenettet av PureCSS er i mine øyne en av de beste. Jeg tok opp ideen bak den, gjorde litt magi med Sass som la meg lage kolonneklasser raskt og bygge et rutenett for små, mellomstore og store visninger.
Det er veldig enkelt å endre den responsive oppførselen til et element. Du definerer oppførelsen en gang for modulen, men hvis du har annen oppførsel på et tidspunkt, enn du oppretter en modifikator som .m-tekst-med-ressurs - large
// Definer maksimale kolonner og mellomrom mellom hver kolonne $ max-kols: 2; $ gutter-bredde: 25px;
// Navn: Default-Grid @for $ sum fra 1 til $ max-kols @for $ i fra 1 til $ sum .lu - # $ i - # $ sum @include col jeg, $ sum); // Navn: Small-Grid @for $ sum fra 1 til $ max-kols @for $ i fra 1 til $ sum .lu - small - # $ i - # $ sum @include respond-to ('small') @include col ($ i, $ sum); // Navn: Medium-Grid @for $ sum fra 1 til $ max-kols @for $ i fra 1 til $ sum .lu - medium - # $ i - # $ sum @include respond-to ('medium') @include col ($ i, $ sum); // Navn: Large-Grid @for $ sum fra 1 til $ max-kols @for $ i fra 1 til $ sum .lu - large - # $ i - # $ sum @include respond-to ('large') @include col ($ i, $ sum); // Bruk Kjæresten min er lei meg, elsker deg, elsker deg, du er ikke enig med deg, og du er glad for at du har det, og du er glad i alt du trenger..
På mobil får du en full bredde kolonne, utover 480px viewport en halv kolonne og over 768px en tredje kolonne.
De fleste nettsteder (feiring) har en sentrert container. Dette er ikke alltid tilfelle skjønt, så på grunn av dette er det nyttig å skape en hjelper:
// Navn: Begrenset beholder .l-begrenset margin-left: auto; margin-høyre: auto; padding-left: $ forebyggingsavstand; polstring-høyre: $ forhindre-avstand; maksimal bredde: $ max-wrapper-bredde;
Hvis du ikke bruker flexbox som valgfri layoutmotor, vil du bruke flyter. Det er viktig å fjerne flyter, fordi ellers kan hele oppsettet bli ødelagt.
.l-gruppe: etter innhold: "; klare: begge; display: tabell;
Hvor jeg ser konsistent avstand i en layoutdesign bruker jeg hjelperklasser for å holde målingene sanne.
// Navn: Distance-Small // Beskrivelse: Hjelper for å opprette avstandstopp .l-distance-small margin-top: 20px; // Navn: Avstandsmedium // Beskrivelse: Hjelper for å opprette avstandstopp .l-avstandsmedium margin-top: 40px;
Foretrekker du en online skriftgenerator eller bruker du et kommandolinjegrensesnitt for å generere skrifter? Jeg foretrekker en online løsning, verktøyet mitt valg er fontastic.me. Det er en flott oversikt over alle skriftene dine, du kan velge hvordan klasse- eller karaktermåling skal være.
La oss nå begynne å lage klasser for ikonene dine. Jeg vil ikke vise deg de grunnleggende stilene til hvert ikon. Du kan håndtere det selv, men dette kan hjelpe deg med grunnleggende ikonoppsett.
// Navn: Array med navn og innholdsverdi $ ikoner: ('merk av' a ',' minus 'b', 'plus' c '); $ prefix:' icon-- 'default; // Name: Loop // Beskrivelse: Opprett for hvert ikon en egen klasse med riktig innhold. Konfigurasjon for ikoner i _config.scss. // Bruk mixin for icon-creation som er øverst på artikkelen @each $ ikonet i $ ikoner $ name : nth ($ icon, 1);. # unquote ($ prefix) # $ name @include ikon ('før', $ navn); // Resultat .icon - : 'a'; .icon - minus: før innhold: 'b'; .icon - pluss: før innhold: 'c';Vet du hva jeg mener? Da jeg først begynte som en CSS-utvikler, bygget jeg alt basert på designers side, men hva om du trenger en modul på et annet nettsted? På grunn av dette er det viktig å bygge lukkede moduler uten utformingen rundt den.
Opprett en fil for modulen din og legg den i mappen _modules. Øverst i filen har du et konfigureringsområde, der du definerer farger eller andre aspekter som vil påvirke temaet.
Under konfigurasjonen definerer du modulen med alle stiler. Bruk kommentarer godt, for å forenkle modulen.
@charset 'UTF-8'; // 1.Config $ accordion-bgcolor: $ gray-light! Default; $ trekkspill-alternativ-bgcolor: $ grå-mørk! standard; $ trekkspill-fontcolor: $ corp-color! default; // 2.Base // Navn: Standard Accordion .m-trekkspill bakgrunn: $ accordion-bgcolor; farge: $ accordion-fontcolor; // Navn: Alternativ Accordion .m-trekkspill - alternativ bakgrunnsfarge: $ trekkspill-alternativ-bgcolor;
Ta gjerne gaffelregisteret som inneholder all koden sett i denne artikkelen. Jeg håper at det hjelper deg med å bygge en bedre skalerbar front-end i virkelige prosjekter. Vennligst del dine tanker og ideer med meg i kommentarene.
