no.hideout-lastation.com
Paradis For Designere Og Utviklere


Slik kombinerer du dupliserte medieforespørsler

I dag er det mange rammer som kan hjelpe deg med å raskt bygge opp responsive nettsteder. Bootstrap og Foundation, for eksempel, kommer med et sett med vanlige nettsidekomponenter, plugins, masse forhåndsdefinerte stilregler, samt CSS3-mediesøk for bygging av det responsive nettet.

En av ulempene ved å bruke disse rammene er imidlertid at mediaforespørslene er spredt som de er erklært og nestet i Mixins eller Funksjonene. Så du kan ende opp med flere dupliserte medieforespørsler gjennom kodene .

Ville det ikke vært bedre hvis vi kunne fjerne disse duplikatene og kombinere dem i en enkelt CSS-regel ? Hvis du er enig, sjekk ut dette tipset.

Starter

Denne oppgaven er avhengig av Grunt samt Grunt CLI, en Node.js-pakke for oppgaveautomatisering. Skriv inn kommandoen for å installere Grunt CLI (Command Line) i Terminal eller Kommandoprompt.

 npm installere -g grunt-cli 

Når du har kjørt de ovennevnte kommandoene, må du kontrollere at grunt kommandoen fungerer. Du kan teste det ved å skrive grunt --version versjon som skal vise det installerte Grunt versjonsnummeret, slik som det.

Hvis du imidlertid støter på en feil der kommandoen ikke er funnet eller gjenkjent, gå over til vårt forrige innlegg på hvordan du fikser det: Løsning Grunt "Kommando ikke funnet" feil i terminal [Quickfix]

Installer Grunt Plugin

Naviger til prosjektmappen, og kjør følgende kommando for å lage en fil med navnet Gruntfile.js som vil bli brukt til å spesifisere Grunt-funksjonene og registrere oppgavene .

 trykk Gruntfile.js 

Skriv inn disse to kommandoene nedenfor for å laste ned Grunt-modulen, som kreves for å kjøre oppgaven senere. Last ned også et Grunt-plugin kalt grunt-combine-media-queries combin grunt-combine-media-queries (cmq) for å kombinere matchende medieforespørsler.

 npm installere grunt - save-dev npm installere grunt-kombinere-media-spørringer - lag-dev 

Etter at prosessen er fullført, bør du finne en ekstra mappe som heter node_modules i prosjektkatalogen, som inneholder disse modulene.

Registrere og konfigurere oppgave

La oss åpne Gruntfile.js og legge inn følgende kode i den.

 module.exports = funksjon (grunt) {grunt.initConfig ({cmq: {options: {log: false}, your_target: {filer: {'output': ['build / *. css']}}}})); grunt.loadNpmTasks ( 'grunt-kombinerer-media-spørringer'); grunt.registerTask ('standard', 'cmq'); }; 

Denne koden ovenfor konfigurerer cmq oppgaven. Den inneholder to parametere, log og files :

log parameteren er en boolsk som du kan sette enten til true eller false ; Hvis den er satt til true, vil den opprette en loggfil som består av de behandlede mediene.

files parameteren angir målfilene og utdatamappen. Og gitt det ovennevnte kodeeksemplet vil det søke i alle CSS-filene i byggemappen og sende resultatet i utdatamappen. Du kan erstatte banen som per din egen prosjektkonfigurasjon.

Kjør oppgaven

På dette punktet har alt blitt konfigurert; Vi har installert Grunt CLI, Grunt-modulen, samt plugin-modulen for å kombinere medieforespørsler. Nå må vi bare utføre oppgaven.

Som et eksempel har jeg en CSS-fil som inneholder flere dupliserte medieforespørsler som du kan se nedenfor.

Åpne Terminal, sørg for at du fortsatt er "i" prosjektkatalogen. Deretter skriver du bare grunt, slik som det.

Vi er ferdige. Nedenfor er sammenligningen mellom kildefilen og utdatafilen.

Ytterligere referanse

  • Komme i gang med GruntJS
  • Grunt Kombiner mediefiler Repo

Hjelp Søk etter MH370 gjennom Tomnod Satellittbilder

Hjelp Søk etter MH370 gjennom Tomnod Satellittbilder

Malaysia Airlines-fly MH370 transporterer 239 passasjerer og besetningsmedlemmer på vei fra Kuala Lumpur til Beijing, forsvant tidlig lørdag morgen, innen timer etter avreise. Fem dager i, til tross for et stort søk- og redningsoppdrag for fly og fartøy fra 12 land (hittil), er oppholdsstedet for flyet fortsatt ukjent .I m

(Tekniske og design tips)

Mobile Web Design: 10 tips til bedre brukervennlighet

Mobile Web Design: 10 tips til bedre brukervennlighet

Mobil nettlesing forventes å bli til neste store internettplattform. Det er nå enkelt å surfe på nettet fra nesten hvor som helst som bruker mobile enheter som passer i hånden på grunn av teknologi. Å være kort i god brukervennlighet i mobilnettdesign gjør det vanskelig å bla gjennom forskjellige populære mobile nettsteder. Designing

(Tekniske og design tips)