Share
Jag gör ingen hemlighet för det: Jag älskar Sass. I denna artikel kommer jag att dela med mig av mina rekommendationer för att arbeta med Sass dagligen och på verkliga projekt.
Här är ett fantastiskt plugin som sparar mycket tid. Öppna Paketkontroll i Sublim Text, sök efter Hayaku och gör en snabb installation. Nu kan du skriva din CSS snabbare och med genvägar. Här är några exempel:
// Skriv detta och tryck på fliken mt10 // Resultatmarginal-topp: 10px; // Eller det här df // Resultatvisning: flex;
Särskilt för ditt Sass-arbetsflöde finns en mapp som vi bör ignorera när du söker i Sublime Text. Den aktuella mappen är .sass-cache, eftersom det bara är nödvändigt för kompileringsprocessen. Dessutom måste du aldrig redigera någonting i den här mappen, så gör ditt liv enklare och göm det!
Tryck CMD-, för att få användarkonfigurationen av din redaktör och sätt in följande rader:
"folder_exclude_patterns": [".sass-cache"]
Att ha en solid projektstruktur är super viktig, speciellt om du arbetar i ett lag.
Jag använder tre olika avsnitt (ett tillvägagångssätt från SMACSS av Jonathan Snook): _bas, _layouts och _modules. En global config är idealisk för placering i _bas mapp. För varje layouttyp skapar du en unik fil och placerar den i mappen _layouts. Tänk till exempel på en grundläggande layout, rutnätet eller kanske en fil för utskriftslayouten.
Det är möjligt att dela upp en webbplats i olika typer av moduler som flikar, knappar, dragspel etc. Ingen modul ska vara "medveten" av layouten kring den. Dessa hör hemma i _modules mapp.
Normalt ser min projektstruktur ut så här:
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
Om du inte använder Sass 3.3 eller Node-Sass, behöver du förmodligen följande funktion för att simulera Sass Maps. Sass-kartor låter dig definiera uppsättningar av nycklar med tillhörande värden. I det här fallet kan du använda funktionen, sätt in nyckeln och då får du sitt matchande värde. Här är ett snabbt exempel:
// Funktion: Simulera associativa arrays // Authour: Hugo Giraudel // Källa: http://hugogiraudel.com/2013/08/12/sass-functions/#mapping @function match ($ haystack, $ needle) @each $ item i $ haystack $ index: index ($ item, $ needle); @if $ index $ return: if ($ index == 1, 2, $ index); @return nth ($ item, $ return); @return false; // Användning $ list: a b, c d, e f; $ värde: matcha ($ list, e); // returnerar f
Här är några mixins som du förmodligen behöver i varje projekt. Låt oss börja med några enklare saker som att bygga en kolumn med sass
Ett galler är absolut oumbärligt i ditt projekt. Med den här hjälpen (en mixin jag heter col) Det är lättare att skapa bredden på en kolumn. Den förväntar sig två värden: kolonnnumret ($ col) Och de maximala kolumnerna ($ Max-cols) i ditt rutnät är standardvärdet 12.
// Beräkna bredden på en kolumn // Standardvärdet för maximala kolumner är 12 @mixin col ($ col, $ max-cols: 12) bredd: (100% / $ max-kols) * $ col; // Användning. Element @include col (3); // Resultat. Element bredd: 25%;
Tiden har gått länge att vi bara behöver pixelvärden. När det är möjligt dessa dagar försöker jag använda em eller rem. Dessa är både relativa måttenheter, skillnaden mellan dem är det em baseras på värdet av dess förälderbehållare och rem baseras på rots typsnittstorlek (den html element).
// Mixin @mixin fontstorlek ($ sizeValue: 1.6) font-size: ($ sizeValue * 10) + px; fontstorlek: $ sizeValue + rem; // Användning. Element @ include font-size (1.8); // Resultat. Element font-size: 18px; fontstorlek: 1,8rem;
Manuell inbäddning av teckensnitt via CSS3 är inte lätt, eftersom det finns så många format för olika typer av webbläsare. En mixin är den perfekta lösningen för detta. Denna mixin heter font-faceoch det förväntar sig två värden. Den första är namnet på teckensnittsfamiljen och den andra är sökvägen till olika filformat i teckensnittet. Läs mer om dessa olika format på Mozilla Developer Network.
Accentsconagua
// Mixin @mixin font-face ($ namn, $ url) @ font-face font-family: # $ name; src: url ('# $ url .eot'); src: url ('# $ url .eot # iefix') format ("inbäddad opentype"), url ('# $ url .ttf') format ('truetype'), url ('# $ url .svg ## $ name ') format (' svg '), url (' # $ url .woff ') format ("woff"); @innehåll; // Användning @ inkludera font-face ('ikoner', '... / typsnitt / ikoner / iconfont'); // Resultat @ font-face font-family: icons; src: url ("... /fonts/icons/iconfont.eot"); src: url ("... /fonts/icons/iconfont.eot#iefix") format ("inbäddad 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 ett bra jobb med sin mixin för att inkludera ikoner. Här har vi en mixin som heter ikonmed två parametrar: $ läge för pseudoelementen, då den booleska $ ikon som är inställd på Sann eller falsk. Skapa en variabel som heter $ ikoner, definiera namnet på ikonen (tangenten) och värdetför det:
// Författare: Jayden Seric // Källa: http://jaydenseric.com/blog/fun-with-sass-and-font-icons@mixin icon ($ position: 'before', $ icon: false) &: # $ position @if $ icon innehåll: match ($ ikoner, $ ikon); @innehåll; // Användning // Skapa en variabel med alla dina ikoner // Namn, Innehållsvärde $ ikoner: ('markera' a ',' minus 'b', 'plus' c '); // Inkludera mixin. Element @include icon ('before', 'checkmark'); // Resultat .element: före innehåll: "a";Jag är så tacksam för denna mixin av Snugug: det är ett bra sätt att konfigurera dina globala brytpunkter och det bästa är att du ger varje brytpunkt sitt eget namn. Differentierande saker med namn är så mycket bättre än med pixlar. Detta ger dig också en bra översikt över alla bredder som används och en central plats för att ändra beteendet.
// Använd mixin av Snugug // URL: https://gist.github.com/Snugug/2493551 // Definiera dina brytpunkter och ge var och en ett namn $ breakpoints: ('small' 481px, 'medium' 600px, 'large '769px); // Användning. Element bakgrund: röd; @include respond-to ('medium') bakgrund: blå; // Resultat. Element bakgrund: röd; @ media skärm och (min bredd: 600px) . element bakgrund: blå; Hantering av variabler i ett skalbart frontänd är ofta en filosofisk fråga. I mitt fall har jag ett arbetsflöde för det som passar mig bra. Först skapar vi en färgpalett med alla tillgängliga färger och ger dem vanliga identifierande namn.
$ grå-ljus: # f2f2f2; $ grå: #ccc; $ grå-mörk: # 7a7a7a; $ röd: # d83a3a; $ green: # 40b846;
När vi har en bra palett med alla tillgängliga färger borde vi påpeka projektets huvud- eller projektfärger. Med detta steg är det möjligt att skapa ett helt nytt tema för projektet utan att slösa bort tiden för att anpassa färgerna i hela din fil.
$ corp-color: $ red! default; $ corp-color-dark: darken ($ corp-color, 10%)! default; $ corp-color-second: $ green! default; $ corp-color-second-dark: mörkare ($ corp-color-second, 10%)! default;
Konfigurera en viss grundläggande konfiguration som global fontstorlek, fontfamiljer eller den grundläggande fontfärgen i en konfigurationsfil - till exempel i en fil som heter _config.scss, som finns i din mapp _grundläggande.
// Font $ base-font-size: 1.7! Default; $ basfont-familj: Helvetica, Arial, sans-serif! default; $ base-font-color: $ gray! default; // Box / Border $ base-border-radius: 3px! Default; $ border-radius-rounded: 50%! default; $ basgränsfärg: $ gray! default;
Det finns många många rutnät system i världen, men nätet av PureCSS är i mina ögon en av de bästa. Jag tog upp tanken bakom det, gjorde lite magi med Sass som låter mig skapa kolumnklasser snabbt och bygga ett galler för små, medelstora och stora visportar.
Det är super lätt att ändra det responsiva beteendet hos ett element. Du definierar beteendet en gång för modulen, men om du har något annat beteende någon gång, än du skapar en modifierare som .m-text-med-tillgång - stor
// Definiera maximala kolumner och mellanslag mellan varje kolumn $ max-kols: 2; $ gutter-bredd: 25px;
// Namn: Default-Grid @for $ sum från 1 till $ max-kols @for $ i från 1 till $ summa .lu - # $ i - # $ sum @include col ($ jag, $ summa); // Namn: Small-Grid @for $ sum från 1 till $ max-kols @for $ i från 1 till $ summa .lu - small - # $ i - # $ sum @include respond-to ('small') @include col ($ i, $ sum); // Namn: Medium-Grid @for $ sum från 1 till $ max-kols @for $ i från 1 till $ summa .lu - medium - # $ i - # $ sum @include respond-to ('medium') @include col ($ i, $ sum); // Namn: Large-Grid @for $ sum från 1 till $ max-kols @for $ i från 1 till $ summa .lu - large - # $ i - # $ sum @include respond-to ('large') @include col ($ i, $ sum); // Användning Det här är en av de mest känsliga sakerna, men det är inte så mycket, men det är inte så mycket tid att göra, och det är en stor sak att göra, men det är inte så mycket..
Vid mobilen får du en fullbreddskolumn, bortom 480px viewport en halv kolumn och över 768px en tredje kolumn.
De flesta webbplatser (svepande påstående) har en centrerad behållare. Detta är inte alltid fallet, men därför är det användbart att skapa en hjälper:
// Namn: Constrained Container .l-constrained margin-left: auto; marginal-höger: auto; padding-left: $ prevent-spacing; padding-right: $ prevent-spacing; max bredd: $ max-wrapper-bredd;
Om du inte använder flexbox som din layout-motor, väljer du flyter. Det är absolut nödvändigt att tömma flottor, för annars kan hela layouten förstöras.
.l-grupp: efter innehåll: "; rensa: båda; visa: bord;
Där jag ser konsekvent avstånd i en layoutdesign använder jag hjälparklasser för att hålla mätningar sanna.
// Name: Distance-Small // Beskrivning: Helper för att skapa distans-top .l-distance-small margin-top: 20px; // Namn: Avståndsmedium // Beskrivning: Hjälpare för att skapa distans-topp .l-distans-medium margin-top: 40px;
Föredrar du en online fontgenerator eller använder du ett kommandoradsgränssnitt för att generera typsnitt? Jag föredrar en online-lösning, mitt verktyg är fontastic.me. Det finns en bra översikt över alla dina teckensnitt, du kan välja hur klass- eller karaktärskartläggning ska vara.
Låt oss nu börja skapa klasser för dina ikoner. Jag kommer inte visa dig de grundläggande stilarna på varje ikon. Du kan hantera det själv, men det här kan hjälpa dig med den grundläggande ikonuppsättningen.
// Namn: Array med namn och innehållsvärde $ ikoner: ('markera' a ',' minus 'b', 'plus' c '); $ prefix:' icon-- '! Default; // Namn: Loop // Beskrivning: Skapa för varje ikon en egen klass med korrekt innehåll. Konfiguration för ikoner i _config.scss. // Använd mixin för ikonen skapande som ligger högst upp på artikeln @each $ ikonen i $ ikoner $ name : nth ($ icon, 1);. # unquote ($ prefix) # $ name @include ikon ('före', $ namn); // Resultat .icon - checkmark: före innehåll : 'a'; .ikon - minus: före innehåll: 'b'; .icon - plus: före innehåll: 'c';Vet du vad jag menar? När jag började som en CSS-utvecklare byggde jag allt baserat på designerens sida, men vad händer om du behöver en modul på en annan webbplats? På grund av detta är det viktigt att bygga slutna moduler utan layout runt den.
Skapa en fil för din modul och lägg den i mappen _modules. Överst i filen har du ett konfigurationsområde där du definierar färger eller andra aspekter som påverkar temat.
Under konfigurationen definierar du modulen med alla stilar. Använd kommentarer bra för att förenkla modulen.
@charset 'UTF-8'; // 1.Config $ accordion-bgcolor: $ gray-light! Default; $ dragspel-alternativ-bgcolor: $ grå-mörk! default; $ accordion-fontcolor: $ corp-color! default; // 2.Base // Namn: Standard Accordion .m-dragspel bakgrund: $ accordion-bgcolor; färg: $ dragspel-fontcolor; // Namn: Alternativ Accordion .m-dragspel - alternativ bakgrundsfärg: $ dragspel-alternativ-bgcolor;
Gärna gaffla förvaret som håller hela koden i denna artikel. Jag hoppas att det hjälper dig att bygga en bättre skalbar front-end i verkliga projekt. Vänligen dela dina tankar och idéer med mig i kommentarerna.
