Share
Frontend-utvecklarens arbetsflöde har genomgått stora förändringar under senare år. Mer komplexitet, högre krav och större projekt leder oss till ny teknik, som förprocessorer. Personligen älskar jag min preprocessor arbetsflöde och vill inte sakna Sass för mina projekt idag - utan det skulle jag vara en röra.
En speciell situation där Sass har hjälpt mig ut är att skapa en enda solid frontend som kan ha olika teman - ändra färger, bilder eller teckensnitt med lätthet. Idag ska jag beskriva mitt arbetsflöde, jag hoppas att du tar något användbart bort från det.
Här är strukturen i ett exempelprojekt. Du kan använda vilka delar du logiskt känner bör ingå. Nyckeln är att ha en separat mapp för teman och en ny .SCSS fil för varje tema.
| - _scss / | - | - _base / | - | - | - _config.scss | - | - _layouts / | - | - | - _l-grid.scss | - | - | - _l-default.scss | - | - _modules / | - | - | - _m-accordions.scss | - | - | - _m-teasers.scss | - | -_themes / | - | - | - _light-theme / | - | - | - | - light .scss | - | - application.scss
I application.scss fil du importerar alla dina delar, ignorerar mappen _themes / vid denna tidpunkt Detta bygger grunden på vilken vi kan skapa olika teman.
@charset 'UTF-8'; // 1.Base @import '_base / _config.scss'; // 2.Layouts @ import '_layouts / _l-grid', '_layouts / _l-default'; // 3.Modules @ import '_modules / _m-accordions', '_modules / _m-teasers';
Konfigurera ditt projekt är mycket viktigt. Här kommer variabler till räddning, så att vi kan ställa in standardvärden och skriva över värden på temanivån senare. Här kan du se att jag har ställt in några variabler för färger, teckensnitt och gränssnittsinställningar.
För mer detaljer om namngivna variabler ta en titt på Jim Nielsens Quick Tip: Namnge dina SASS-variabler modulärt.
@charset "UTF-8"; // Färger $ svart: # 000; $ vit: #fff; $ röd: # e2061c; $ grå-ljus: # c9c8c8; $ grå: # 838282; $ grå-mörk: # 333333; $ blå: # 253652; // Corp-Colors $ corp-color: $ blue! Default; $ corp-color-dark: darken ($ corp-color, 15%)! default; $ corp-color-second: $ red! default; $ corp-color-second-dark: mörkare ($ corp-color-second, 15%)! default; // Font $ base-font-size: 1.8! Default; $ base-font-family: Helvetica, Arial, Sans-Serif! standard; $ base-font-color: $ grå-mörk! default; // Gräns $ basgränsradie: 2px! Default; $ avrundad radie: 50%! default; $ basgränsfärg: $ gray! default;
Nyckeln till detta stadium är att använda !standard flagga efter de variabla deklarationerna. Genom att göra detta kan du skriva över dem inom temat .SCSS filer; de !standard säger effektivt "Använd det här värdet om det inte är definierat någon annanstans".
Ofta skapar utvecklare inte variabler för bilder, utan skriver direkt i väljaren. Ett tillvägagångssätt som jag gillar är att ta bort alla sökvägar i partiklar och placera dem i konfigurationsfilen som variabler. Detta kommer att göra ditt liv enklare och projektet bättre underhållbart.
// Bilder $ sprite: '... /images/base/sprite.png'! Default; $ colorbox-background: '... /images/base/colorbox-background.png'! default;
Här kan du se några bakgrundsvariabler i åtgärd. Detta är en modulär partiell för ett dragspel, som använder sig av den globala variabeln $ sprite men också inställning och användning av en variabel $ Dragspels bgcolor vilket är specifikt för modulen.
// 1.Config $ accordion-bgcolor: $ gray! Default; // 2.Base .m-dragspel vaddering: 20px; bakgrund: $ accordion-bgcolor; .m-accordion__trigger background: url ($ sprite) no-repeat;
I din temafil (t.ex. _themes / _light-tema / light.scss från demokonstruktionen ovan) importera application.scss som innehåller alla moduler, layouter och så vidare. Detta är grunden för allting; Med ett tema lägger vi ett andra lager över det. Inget mer. När du har importerat application.scss lägg till samma variabler som tidigare använts, men definiera värden som är specifika för detta tema.
Med hjälp av denna teknik, om vi lägger till nya moduler i basen av projektet kommer vi automatiskt (och harmlöst) att kompilera dem inom alla våra teman.
@charset 'UTF-8'; // 1.Overfattade saker $ corp-color: $ gray; $ corp-color-darken: darken ($ corp-color, 10%); $ corp-color-second: $ blue; $ corp-color-second-dark: mörkare ($ corp-color-second, 10%); $ basfontstorlek: 1,6; $ bas-font-familj: Droid Sans, Georgia, Arial; $ basgränsradie: 0px; $ basgränsfärg: $ gråljus; // Bilder $ sprite: '... /images/light/sprite.png'; $ colorbox-background: '... /images/light/colorbox-background.png'; $ accordion-bgcolor: $ grå-ljus; // 2. Importera grundläggande tema @ import "... / ... / ansökan";
Det sista steget är att kompilera Sass till CSS och få två olika filer för användning. Vi måste sammanställa application.scss och den light.scss. Med kommandoraden skulle du använda något som:
sass -watch DIN / PATH / application.scss: DIN / CSSPATH / application.css DIN / PATH / _themes / _light-theme / light.scss: DIN / CSSPATH / light.css
Om du använder en app, till exempel CodeKit eller Prepros App, blir kompilering en mer visuell process.
inkludera light.css filen i huvudet på din sida och ta en titt på din freshened up webbplats.
Som du kan se är det användbart och enkelt att ha flera temafiler, allt baserat på en solid grund. Ställ frågor, eller ge feedback och dela dina erfarenheter med oss i kommentarfältet.
Accentsconagua