, postcss dybt dyk: diverse varer,,,,, 63,,,,,,,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss. denne post er en del af en serie kaldet postcss dybt dive.postcss dybt dyk: genveje og shorthandpostcss dybt dyk: skabe din egen stik af, i hele denne serie, vi har været igennem mange forskellige kategorier af postcss plugins, med alle mulige forskellige fordele for deres forskning i udvikling.men nogle af de bedste postcss plugins ikke passer ind i de kategorier, vi har behandlet i vores tidligere serie angivelser.,, i denne forelæsning, du kommer til at lære om fem af disse "andre varer".vi dækker:,, at skabe net med tabt, se, hvordan dit design - farveblind folk med postcss farveblind, omregning af px enheder til rem - med postcss pxtorem, automatisk skaber en rtl version af din stylesheet med rtlcss, automatisk genererer stil vejledning med postcss stil lede, lad os begynde.,, fælde dit projekt, som nogensinde er den første ting du skal gøre er at fælde din projekt at anvende enten sodavand eller grynter, afhængigt af deres præferencer.hvis du ikke allerede har en forkærlighed for det ene eller det andet anbefaler jeg med sodavand, som du får brug for mindre kode for at nå de samme mål, så skal du finde det lidt mere at arbejde med.,,, du kan læse om, hvordan vi skal fælde sodavand eller grynter projekter for postcss i den foregående tutorials,, postcss vejledning: tag opstilling eller hurtigt skal iværksættes hurtigt skal iværksættes, postcss vejledning: grynter fælde,,.,, hvis du ikke vil have manuelt at fælde din projekt fra bunden, du kan downloade kilde filer, der er knyttet til denne forelæsning, og ekstrakt enten forudsat sodavand eller grynter første projekt til en tom projekt mappe.så med en terminal eller kommando hurtig pegede på mappen løb kommando, new public management installere,.,, installere plugins, nu er vi nødt til at installere fem plugins i dit projekt.hvad enten du bruger sodavand eller grynter, løb følgende kommando ind i dit projekt mappe til at installere plugins, vi vil bruge:,, new public management installere mistede postcss farveblind postcss pxtorem postcss stil lede... redde dev, samt de fem, vi vil også være med rtlcss, men det virker en smule anderledes end andre postcss plugins, vi vil bruge det via dets tilsvarende sodavand eller grynter plugins.,, hvis brugen af sodavand, installere gulp rtlcss med kommandoen:,, new public management installere gulp rtlcss gulp omdøbe... redde dev, og hvis der anvendes grynter installere grynter rtlcss med kommandoen:,, new public management installere grynter rtlcss... redde dev, nu er vi klar til at indlæse plugins i dit projekt. plugins belastning via sodavand,, hvis du bruger sodavand, tilføje disse variabler i henhold til de variabler, allerede i filen:,, var tabt = kræver ('lost) var farveblind = kræver ('postcss-colorblind) var pxtorem = kræver ('postcss-pxtorem) var styleguide = kræver ('postcss-style-guide) var rtlcss = kræver ('gulp-rtlcss) var omdøbe = kræver ('gulp-rename), tilføj hver af disse nye variable navne i dine, forarbejdningsvirksomheder, system:,, var forarbejdningsvirksomheder = [tabt, //farveblind, pxtorem,styleguide], bemærker:, farveblind, kommenteres, som vil blive forklaret senere.,, gør en hurtig test, at alt er ved at løbe kommando, gulp css, så tjekker vi, at en ny stil. css "fil er dukket op i dit projekt er" best "mappe.,, lad plugins via grynter,, hvis du bruger grynter, ajourføre, forarbejdningsvirksomheder, genstand, som satte under, optioner, genstand, følgende:,, forarbejdningsvirksomheder: [kræver ('lost ') () //kræver ('postcss-colorblind') (), kræver ('postcss-pxtorem ') (), kræver ('postcss-style-guide') ()], bemærker: kræver ('postcss-colorblind ') (), fremsatte bemærkninger, som vil blive forklaret senere.,,, er en hurtig test, at alt er til bearbejdning af running kommando, grunt postcss, så tjekker vi, at en ny stil. css "fil er dukket op i dit projekt er" best "mappe.,, skabe net med tabt, tabt, er en helt postcss baseret net generation af systemet med cory simmons, skaberen af jeet, et meget vellykket forsyningsnettet skrevet i stylus.det er en lang liste af imponerende karakteristika, men dens anvendelse er meget ligetil.,, start ved at skabe et dossier, der hedder "index.html" i din "best" mappe.vi vil være oprettelsen af en grundlæggende net indretning i denne sag.der tilføjes følgende kode:,, <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div class="row"> \t<div class="main"> \t\t<h1>Main Area</h1> \t</div> \t<div class="sidebar"> \t\t<h1>Sidebar</h1> \t</div> </div> \t </body> </html>,,Then add this code to your “src/style.css” to setup a basic two column grid layout, with a main area column and sidebar column:,,@lost gutter 1.618rem; .row { lost-center: 75rem; } .main { \tlost-column: 3/5; } .sidebar { \tlost-column: 2/5; },,Let’s break down what we’ve done here.,,First, we’ve use a ,@lost, at-rule to set our own value for one of Lost's muligheder: rendestenen størrelse.ved misligholdelse tagrender (huller mellem kolonner), 30px,.jeg har altid godt kunne lide at bruge, 1.618rem for afstand i design, så jeg har sat det nye rendestenen størrelse med linjen, @ mistede rendestenen 1.618rem,,.,, vi har arrangeret en,. ro, klasse, at vi pakker omkring vores kolonne.det kræver kun ved hjælp af den ejendom, mistede center, og med en bredde på linjen.de stik af vil tage sig af, at der fastsættes en max bredde på den klasse, koncentrerer det, og at det, efter at i,. vigtigste og. sidebar, klasser, vi har skabt vores kolonne.,, mistede ikke begrænse dem til at arbejde med et bestemt antal kolonner som tolv eller 16. du kan have flere piller, du vil have.kolonne) bestemmes ved hjælp af den ejendom, mistede kolonne, og fastsætte en del som værdi.In our code the ,.main, class uses a setting of ,3/5, so it will take up 3 of 5 columns, and the ,.sidebar, uses ,2/5, so it will take 2 of 5 columns.,,Compile your file and in your “dest/style.css” file you should now see this code:,,.row { *zoom: 1; \tmax-width: 75rem; \tmargin-left: auto; \tmargin-right: auto; } .row:before { \tcontent: ''; \tdisplay: table; } .row:after { \tcontent: ''; \tdisplay: table; \tclear: both; } .main { \twidth: calc(99.99% * 3/5 - (1.618rem - 1.618rem * 3/5)); } .main:nth-child(n) { \tfloat: left; \tmargin-right: 1.618rem; \tclear: none; } .main:last-child { \tmargin-right: 0; } .main:nth-child(5n) { \tmargin-right: 0; } .main:nth-child(5n + 1) { \tclear: left; } .sidebar (bredde: calcium (99,99% * 2 /5 - (1.618rem - 1.618rem * 2 /5)}. aftale: n - barn (n) {flyde: venstre margen. 1.618rem; klart: ingen;}. aftale: sidste barn (margen: 0}. aftale: 117. barn (0) (margen: 0}. aftale: n - barn (0 + 1) (klart: venstre}, og, når de ses i en browser, din "best /index en.html" fil skal fremlægge to kolonne layout sådan her:,,,,,, det er lidt svært at se, præcis hvad sker der med vores net, hvilket er grunden til mistet giver også mistet nytteværdi: redigér;, at fremhæve deres net for at lette visualiseringen under udvikling., tilsættes til hver af de klasser, vi har skabt hidtil:,,. ro (mistede center: 75rem; mistede nytteværdi: redigér;}. vigtigste {mistede kolonne: 3 /5, mistede nytteværdi: redigér;} sidebar {mistede kolonne: 2 /5, mistede nytteværdi: redigér;} nu, da du recompile og genopfriske din side, du skulle se dit net fremhævet som denne:,,,,,, lad os gøre det lidt tydeligere at se igen med nogle ekstra design (som også vil hjælpe os med senere afsnit i denne forelæsning).opdatere din "src /stil. css" fil til følgende, at tilføje et par ekstra som fyld i kolonnerne og et par baggrund og tekst farver:,, @ mistede rendestenen 1.618rem; * {æske størrelsessortering: grænse boks}: organ (højde: 100% margen: 0; skrifttype familie: "åben" sans "} {polstring: http: //0} organ {polstring: 1.618rem; baggrund:a085;}. ro (mistede center: 75rem;}. vigtigste. aftale (polstring: 1.618rem; min højde: 500px;}. vigtigste {mistede kolonne: 3 /5 baggrund: hvid. farve:𸮃} sidebar {mistede kolonne: 2 /5 baggrund:c3e50; farve: hvid;}, udarbejder deres css igen og lade din side, og det bør nu har en klassisk to kolonne layout sådan her:,,,,,, hvad vi hardækket her bare skims overfladen af, hvad der kan gøres med tabt, så husk at læse om resten af kendetegn: https: //////////////////////github. kom corysimmons tabt, se gennem øjnene af farveblind, farveblindhed virkninger, en større del af din hjemmeside er besøgende, end du kan er klar over.for eksempel, den mest almindelige type farveblindhed er deuteranomaly, at 6% af alle mænd og 0, 4% for kvinder.for at sætte det i perspektiv, er det anslåede ie9 og ie10 kombinerede anvendes med ca. 4% af alle web - trafik.man kan sige, at hvis vi kan få en betydelig mængde tid, til at støtte specifikke browsere, kan vi få en lige grad af tid til at støtte mennesker,.,, postcss farveblind stik af med brian holt hjælper umådeligt ved vurderingen af, hvor adgang til et design for mennesker med forskellige former for farveblindhed, da det gør det muligt for dem at se selv din farve ordninger ville se, om du havde haft den samme visuel perception.det giver dig mulighed for at generere versioner af din stylesheet at simulere otte forskellige slags farveblindhed.lad os se, hvordan du kan bruge det, tilføje lidt ekstra farver, først skal vi tilføje lidt ekstra farver til vores design, så langt for at hjælpe os mere klart se virkningen af de forskellige stylesheets, vi er ved at skabe.We’ll add five “metro style” tiles, by adding the following html below the row we already have in our “dest/index.htm” file:,,<div class="row"> <div class="tile">This is a Tile</div> \t<div class="tile">This is a Tile</div> \t<div class="tile">This is a Tile</div> \t<div class="tile">This is a Tile</div> \t<div class="tile">This is a Tile</div> </div>,,Now add the following code to your “src/style.css” file to style these tiles with five different colors:,,.row { margin-bottom: 1.618rem; } .tile { \tlost-column: 1/5; \tpadding: 3.75rem 1.618rem; \ttext-align: center; \tfont-size: 1.25rem; \tcolor: white; } .tile:nth-of-type(1) { \tbackgom:&#f39c12;} fliser: n - type (2) (baggrund:&#c0392b;} fliser: n - type (3) (baggrund:e44ad;} fliser: n - type (4) {baggrund:தb9;} fliser: n - type (5) (baggrund:&#d35400;}, efter bearbejdning, du skal se din fil nu ser sådan ud i en browser:,,,,, generere farveblind simulationer, de har måske bemærket, at når vi har vores, forarbejdningsvirksomheder, array tidligere indrejse for farveblind, blev kommenteret.det er fordi, så snart de stik af er aktiv vil anvende farveblind simulering til din stylesheet, så du ikke vil gøre det, indtil du er klar til at bruge det.uncomment i, forarbejdningsvirksomheder, fremme.,, at simulere et af de otte typer af colorblindness, give mulighed for denne metode, stik af i din gulpfile eller gruntfile sammen med navnet på den type colorblindness du vil tjekke., f.eks. til at simulere deuteranomaly fastsætter denne mulighed: /*, gulpfile * /farveblind ((metode: "deuteranomaly '}) /* gruntfile * /kræver ('postcss-colorblind') (2) (metode:" deuteranomaly '}), nu recompile din stylesheet og genopfriske din side, og du vil se dit design, som en person med deuteranomaly er:,,,,, du ser se navnlig forskellige farver.en person med deuteranomaly ser rød og grøn anderledes, så mens du kan se de blå er næsten det samme, de røde og grønne er helt forskellige.,, at visualisere protanopia fastsætter denne mulighed: /* gulpfile * /farveblind ((metode: "protanopia '}) /* gruntfile kræver (* /'postcss-colorblind') (2) (metode:" protanopia '}), recompile din stylesheet, og nu vil du se dette:,,,,, en person med protanopia hovedsagelig ikke rødt på alle, og ser grønne på en anden måde.du vil opdage, at den stærke blå er igen ikke for stærkt sted, men lilla er blevet rene blå, og de resterende farver er blevet varianter af samme gullig brun farve.det er blevet meget vanskeligt at skelne mellem de røde og to orange farvet fliser fra hinanden. denne evne til at skabe alle de forskellige typer af farveblind simulationer er utroligt indsigtsfuldt og hjælper os med at sikre farve ordninger, vi har valgt, er ikke afhængig af opfattelsen af, at der er en særlig farve og dermed er tilgængelig for alle, der læser. mere om postcss farveblind på: https: //////////////////////github. kom btholt postcss farveblind, omdanne px enheder til rem, i næsten alle de design, der er meget gode grunde til det, rem enhed til at spille en fremtrædende rolle.det er imidlertid vanskeligt at tænke i rem, enheder, og meget lettere at tænke i, varer, enheder ved at skabe opstillingsskemaer.den postcss pxtorem stik af bidrager til denne speedbump ved automatisk konverterer, forsyning, enheder til rem enheder.,, stik af bruger en hvid liste over egenskaber, som den finder anvendelse på, så som standard, forsyning, enheder, vil blive omregnet til rem, når det anvendes på:,, skrifttype, skriftstørrelse linjehøjde brev afstand, du kan tilføje yderligere egenskaber, at den hvide liste ved at fastsætte, prop_white_list mulighed.Update your Gulpfile or Gruntfile to add the ,width, property like so:,,/* Gulpfile */ pxtorem({ \tprop_white_list: ['width', 'font', 'font-size', 'line-height', 'letter-spacing'] }), /* Gruntfile */ require('postcss-pxtorem')({ \tprop_white_list: ['width', 'font', 'font-size', 'line-height', 'letter-spacing'] }),,,Now add the following code to your “src/style.css” file so we can test the conversion process:,,.convert_this { width: 500px; \tfont-size: 18px; },,Compile your file and in your “dest/style.css” file you should now see the resulting ,rem, values:,,.convert_this { width: 31.25rem; \tfont-size: 1.125rem; },,Read more about postcss-pxtorem at: https://github.com/cuth/postcss-pxtorem,,Generate a RTl - udgaven af din stylesheet,, hvis du er der en global publikum, kan det være nødvendigt at yde støtte til manuskripter, der skal læses fra højre mod venstre, snarere end fra venstre til højre, såsom arabisk og hebræisk, for eksempel.når orientering af manuskriptet er vendt, så vil også udformningen af din hjemmeside, så hele design giver mening for dem, der ser på højre side af skærmen.,, rtlcss stik af af mohammad younes gør processen med at skabe en højre - venstre indretning meget lettere, da det automatisk kan scanne dit stylesheet og konvertere sin orientering, at ordet "tilbage" til "ret" og omvendt.,, stik af rent faktisk virker lidt anderledes end andre postcss plugins, i, at vi ikke kan føje den til vores, forarbejdningsvirksomheder, vifte.Instead, during our project setup we installed the Gulp and Grunt plugins for rtlcss, and we’re going to setup separate tasks to execute it.,,If using Gulp, add this code to your Gulpfile:,,gulp.task('rtl', function () { return gulp.src('./dest/style.css') \t\t.pipe(rtlcss()) \t\t.pipe(rename({ suffix: '-rtl' })) \t\t.pipe(gulp.dest('./dest')); });,,If using Grunt, add this line after your existing ,grunt.loadNpmTasks, line:,,grunt.loadNpmTasks('grunt-rtlcss');,,Then add a comma ,,, after your ,postcss, task, and paste in this new ,rtlcss, task:,,rtlcss: { \t'default':{ \t\tdest : 'dest/style-rtl.css', \t\tsrc : 'dest/style.css' \t} },,Now, if using Gulp run the command ,gulp rtl,, and if using Grunt run the command ,grunt rtlcss,for at skabe en højre - venstre stylesheet ved navn "stil rtl. css" i din "best" mappe.,, redigere dit "best /index en.html" fil til belastning "stil rtl. css" i stedet for "stil. css" opfriske din hjemmeside, og du skulle se deres layout er blevet vendt rundt.,,,,, vil du se teksten stadig er tilbage på linje, men det kan let blive afhjulpet ved blot at tilføje, tekst, tilpasse: venstre, din misligholdelse stylesheet, som rtlcss konverteres til tekst tilpasse:,,.,, læse mere om rtlcss og sodavand og grynter modparter i: https: ///////,, /github. kom /mohammadyounes /rtlcss, https://github.com/jjlharrison/gulp-rtlcss, https://github.com/mohammadyounes/grunt-rtlcss,,, skabe en stil lede,, postcss stil lede stik af, er et fantastisk redskab, der er skabt af mas -aaki morishita.det giver dig mulighed for at skabe en styleguide automatisk på grundlag af deres stylesheet.alt du skal gøre er at føje nogle bemærkninger til deres forskning, og disse bemærkninger vil blive parset som nedskrives, og som anvendes til at befolke deres styleguide.,, at det første, vi skal gøre, er at få et par muligheder for vores styleguide.vi kommer til at sætte navn på vores projekt, så det kan vises i hovedet af styleguide, og vi skal også bruge en skik tema, der hedder 1column.,, at installere den skik tema, vi vil bruge i dit projekt, løb kommandoen:,, new public management installere psg-theme-1column... redde dev. nu opdatere din gulpfile eller gruntfile bestå en navn, og tema, muligheder som følger: /* gulpfile * /styleguide ({navn: "auto - guide«, tema:" 1column '}) /* gruntfile * /kræver ('postcss-style-guide') ({navn: "auto - guide, tema:" 1column ')), som postcss styleguide virker, er, at det vil se på deres bemærkninger i deres stylesheet og vende hver en finder i en styleguide indrejse.det vil påtage sig enhver bemærkning vedrører css, der følger efter det, hele vejen igennem til en anden bemærkning eller slutningen af dokumentet. af denne grund, at du ønsker at fremvise css i din styleguide bør flyttes til bunden af din stylesheet.vi skal have vores farvede fliser, bekendtgøres i de styleguide samt en h1 - element, så vi får brug for både dem, at ved slutningen af vores dokument,.,, starte med at flytte alle klasser, at virkningen af vores fliser ned til bunden af din stylesheet; det er det, fliser klasse og de fem, fliser: nth-of- type(), styles.så også tilføje en lille kode kontrol, h1, elementer, så bunden af din stylesheet ligner denne (, fliser: nth-of- type(), styles er ikke vist at spare plads):, h1 - (skriftstørrelse: 42px;} fliser (mistede kolonne: 1 /5, polstring: 3.75rem 1.618rem; tekst tilpasse: center; skriftstørrelsen: 1.25rem; farve: hvid;}, nu kan vi tilføje nogle bemærkninger til at beskrive disse styles.Any html added in these comments will be rendered as html in the styleguide, and the CSS that follows a comment will appear in a display box.,,Add some comments to your stylesheet describing the ,h1, style and the ,.tile, class, and including some example html, so you end up with the following:,,/* This is the h1 style <h1>Heading 1</h1> */ h1 { font-size: 42px; } /* These use the .tile class <div class="row"> <div class="tile">This is a Tile</div> \t<div class="tile">This is a Tile</div> \t<div class="tile">This is a Tile</div> \t<div class="tile">This is a Tile</div> \t<div class="tile">This is a Tile</div> </div> */ .tile { mistet kolonne: 1 /5, polstring: 3.75rem 1.618rem; tekst tilpasse: center; skriftstørrelsen: 1.25rem; farve: hvid;}, nu udarbejde deres stylesheet, se på dit projekt er grundlæggende mappe og åbne "styleguide. html" fil, du finder der i en browser:,,,,, hey presto, øjeblikkelig styleguide!, på det tidspunkt, hvor det ser lidt underligt, fordi det har hentet den grønne lig baggrund farve fra vores stylesheet.det, vi ønsker, er, at vores indhold skal være på hvid baggrund, og vi kan få styleguide for at hente en anden kode fra vores stylesheet, for at dette kan ske, den centrale del af denne styleguide model bruger a, afsnit element, så over det beskriver din, h1, element, og der tilsættes denne kode:,, afsnit (polstring: 1rem; baggrund: hvide,), recompile din kode, genopfriske din styleguide, og du vil se, er det nu, der gør brug af den satte vi bare lægges til afsnit, elementer og ser sådan her ud.,,,,, der meget bedre.,, læse mere om postcss stil. vejledning: https: ////////////////////////////github. kom morishitter postcss stil lede, lad os opsummere, at sammenfatte alt det, vi har dækket over:,, lost stik af giver dig mulighed for at oprette fleksible net med -st. nogle egenskaber, med masser af ekstra funktioner til rådighed for, hvis du har brug for det, postcss farveblind stik af lader dig se for dig selv, hvordan deres design, se på mennesker med otte forskellige typer colorblindness.,, postcss pxtorem stik af gør, at du kan skrive kode ved hjælp af varer, enheder, men har dem automatisk konverteres til rem, enheder under forarbejdningen,.,, rtlcss stik af automatisk genererer lige til venstre stylesheets ved scanning din kode for ordet "ret" og erstatte det med "venstre", og vice versa.,, postcss stil lede stik af automatisk genererer en styleguide baseret på bemærkninger tilføjes til din stylesheet.,,, næste: lave din egen stik af, i det næste og sidste anlæg af denne postcss dybt- vil du lære, - - at åbne en af de største fordele, som postcss tilbud, der er i stand til at bruge det til at skabe nogen form for funktionalitet, du vil have, du skal lære at lave dine egne grundlæggende stik af, og fra dette grundlag håber du går på at gøre mange flere plugins for det, der skal kunne opstå i fremtiden, vil jeg se dig i den sidste lektion.