Share
Frontend-utviklerens arbeidsflyt har gjennomgått store endringer de siste årene. Mer kompleksitet, høyere krav og større prosjekter beveger oss mot nye teknologier som forprosessorer. Personlig elsker jeg min preprocessor arbeidsflyt og vil ikke savne Sass for mine prosjekter i disse dager - uten det ville jeg være et rot.
En situasjon spesielt hvor Sass har hjulpet meg ut, er å skape en enkelt solid frontend som kan ha forskjellige temaer - forandre farger, bilder eller fonter med letthet. I dag skal jeg beskrive arbeidsflyten min, jeg håper du tar noe nyttig vekk fra det.
Her er strukturen av et eksempelprosjekt. Du kan bruke hvilke deler du logisk føler bør inkluderes. Nøkkelen er å ha en egen mappe for temaer og en ny .SCSS fil for hvert 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 importerer alle delene dine, ignorerer mappen _themes / På dette punktet. Dette bygger grunnlaget der vi kan skape forskjellige temaer.
@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';
Konfigurere prosjektet ditt er svært viktig. Her kommer variabler til redning, slik at vi kan angi standardverdier og overskrive verdier på tema nivå senere. Her kan du se at jeg har satt noen variabler for farger, skrifter og grenseinnstillinger.
For mer detaljer om navngivning av variabler, ta en titt på Jim Nielsens Quick Tip: Navn SASS Variablene Modularly.
@charset "UTF-8"; // Farger $ svart: # 000; $ hvit: #fff; $ rød: # e2061c; $ grålys: # c9c8c8; $ grå: # 838282; $ grå-mørk: # 333333; $ blå: # 253652; // Corp-Colors $ corp-farge: $ blue! Default; $ corp-color-dark: darken ($ corp-color, 15%)! default; $ corp-color-second: $ rød! standard; $ corp-color-second-dark: mørkere ($ 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! standard; // Border $ base-border-radius: 2px! Default; $ avrundet grense: 50%! standard; $ base-border-farge: $ gray! default;
Nøkkelen til dette stadiet er å bruke !misligholde flagg etter de variable deklarasjonene. Ved å gjøre dette kan du overskrive dem innenfor temaet .SCSS filer; de !misligholde effektivt sier "Bruk denne verdien hvis den ikke er definert andre steder".
Svært ofte utviklere lager ikke variabler for bilder, men skriver nettadresser direkte i selektorer. En tilnærming jeg liker er å fjerne alle baner i partiell og sette dem i konfigurasjonsfilen som variabler. Dette vil gjøre livet ditt lettere og prosjektet bedre vedlikeholdt.
// Bilder $ sprite: '... /images/base/sprite.png'! Default; $ colorbox-bakgrunn: '... /images/base/colorbox-background.png'! default;
Her kan du se noen bakgrunnsvariabler i aksjon. Dette er en modulær del for et trekkspill, og benytter seg av den globale variabelen $ sprite men også innstilling og bruk av en variabel $ Trekkspill-bgcolor som er spesifikk for modulen.
// 1.Config $ accordion-bgcolor: $ gray! Default; // 2.Base .m-trekkspill polstring: 20px; bakgrunn: $ accordion-bgcolor; .m-accordion__trigger bakgrunn: url ($ sprite) no-repeat;
I temafilen din (for eksempel _themes / _light-tema / light.scss fra demonstrasjonsstrukturen ovenfor) importerer application.scss som inneholder alle modulene, layoutene og så videre. Dette er grunnlaget for alt; Med et tema plasserer vi et andre lag over det. Ikke noe mer. Når du har importert application.scss Legg til de samme variablene som ble brukt tidligere, men definer verdier som er spesifikke for dette temaet.
Ved å bruke denne teknikken vil vi automatisk (og harmløst) kompilere dem i alle våre temaer hvis vi legger til nye moduler i prosjekttrinnet..
@charset 'UTF-8'; // 1.Overbrite ting $ corp-color: $ gray; $ corp-color-darken: mørkere ($ corp-farge, 10%); $ corp-color-second: $ blue; $ corp-color-second-dark: mørkere ($ corp-farge-sekund, 10%); $ base-font-size: 1,6; $ base-font-familie: Droid Sans, Georgia, Arial; $ base-border-radius: 0px; $ base-border-farge: $ grå-lys; // Bilder $ sprite: '... /images/light/sprite.png'; $ colorbox-bakgrunn: '... /images/light/colorbox-background.png'; $ accordion-bgcolor: $ grå-lys; // 2. Importer grunnleggende tema @import '... / ... / application';
Det siste trinnet er å kompilere Sass til CSS og få to forskjellige filer til bruk. Vi må kompilere application.scss og light.scss. Ved hjelp av kommandolinjen vil du bruke noe som:
sass - watch DIN / PATH / application.scss: DIN / CSSPATH / application.css DIN / PATH / _themes / _light-theme / light.scss: DIN / CSSPATH / light.css
Hvis du bruker en app, for eksempel CodeKit eller Prepros App, blir kompilering en mer visuell prosess.
Inkluder light.css filen i hodet på siden din og ta en titt på ditt friske nettsted.
Som du kan se, er det nyttig og greit å ha flere temafiler, alt basert på et solid fundament. Ta gjerne spørsmål, eller gi tilbakemelding og del dine erfaringer med oss i kommentarfeltet.
Accentsconagua