praktiske tips til at bruge mindre,,,, det er ikke længe siden, vi har haft et kig på grundlag af mindre, og selv om det er et solidt grundlag for begyndere, der er meget mere, du kan gøre med mindre!målet med denne lektion er at udvide den viden fra den tidligere artikel og give dem nogle praktiske råd om, hvordan man udnytter alle de gode ting ved mindre.,,,,, at begreberne i den foregående artikel, vil være af afgørende betydning for at unserstanding her.variabler, mixins, funktioner og redebygning i mindre bør være bekendt med, og du kunne i det mindste have nogle hænder på viden om mindre.,,, note:, der er en del af subjektive rådgivning i denne artikel.mange ting, vi skal drøfte, har at gøre med metodologien i modsætning til regler og bestemmelser for et sprog.jeg vil vise dig, hvordan jeg organisere filer og skabe mixins, men der kan være andre og bedre måder at gøre tingene på.hvis du tror, at du bruger en bedre struktur, eller du har nogle tips og tricks i din egen have lov til at slippe løs i bemærkningerne.,,, fil organisation, organisere deres filer er altid yderst vigtigt, meget mindre så godt.jeg plejer at skabe en styles' mappe i mit vigtigste projekt fortegnelse, hvor jeg, hvor alle stilarter, der kræves for det pågældende projekt.hvad sker der, hvis projektet skal omfatte css filer fra flere forskellige steder., er den bedste måde at gøre livet let er at bruge et redskab, som winless eller codekit.disse redskaber giver dig mulighed for at udarbejde forskellige filer til forskellige steder.det giver dig mulighed for at holde alle dine filer på ét sted, mens stil faktisk samle dem til forskellige mapper i deres projekter.,,, som du kan se, i dette wordpress projekt har fremhævet 'stil. mindre fil er indeholdt i "styles' mappe.siden wordpress kræver en "stil. css fil i de vigtigste fortegnelse, vi har brug for at samle det.codekit eller et tilsvarende instrument gør det let, siden du har kun brug for at oprette det én gang, og så kan du glemme det indtil udgangen af projektet.,,, eksterne biblioteker, er der et andet spørgsmål, der kan opstå med css filer, er, hvordan vi skal håndtere tredjepart filer.kvadratnetsystemer, styles for javascript schneider, nulstilles og kræve anvendelse af (undertiden flere) css filer.der er normalt to metoder for at få det til at ske.du enten forbindelse filerne til din hjemmeside særskilt, eller du hele koden ind i en fil og begrænse det til performace formål.med mindre de redskab, det bliver lettere igen!, ved hjælp af importregler, du kan trække alle filerne til deres vigtigste mindre stylesheet.du kan importere mindre sager, og de regler, mixins og andre elementer, der kan anvendes i alle efterfølgende filer.,,,, note:, selv om denne metode er nyttigt, det er ikke en universalløsning.i nogle tilfælde kan du få til at omfatte alle filer, hver for sig, i andre er det bedst at medtage alt inde i en fil,.,,, konsistens, det største problem med css er mangel på konsekvens i næsten alle projekter.denne situation skyldes hovedsagelig på grund af selve sproget, ikke nødvendigvis fra ineptness af programmør.forskning er en meget løs og tilgivende sprog, hvilket betyder, at det fremmer konfiguration i konventionen, mens omvendt ville være at foretrække.desuden css har tendens til at være kodet endnu mere proceduremæssigt end normalt, hvilket betyder, at den globale mønstre er ikke altid så og gennemføres så enkelt, som det kunne,.,, mens mindre er ikke en cureall, gør det muligt for dig at være meget mere konsekvent ved at give dem redskaber som funktioner og russisk.lad os se på et par eksempler, hvor man kan opnå en bedre sammenhæng med mindre redskaber,.,,. radius (@ radius: 5px) (- webkit grænse radius (@ radius); - khtml grænse radius (@ radius); - moz grænse radius (@ radius) - dvs. grænse radius (@ radius); - o-border-radius (@ radius) grænse radius (@ radius)}, uden mindre ville du skal kopiere pasta disse regler, når det er nødvendigt.mange mennesker bare skrive det, de så er det meget mere sandsynligt, at du ville glemme et af præfikser eller skrive dem i en anden rækkefølge.mens disse ikke ville være dealbreakers for din hjemmeside, hver lille uoverensstemmelse er unnecesary støj til din kode.,, nestable karakter af bestemmelser, som også giver dem mulighed for at tilføje, at din kode.jeg prøver at bruge så få divs og anden beholder elementer som muligt, og jeg prøver at målrette alle elementer, som specifikt, som jeg kan. commentlist {. bemærkning (. bemærkning dato (. bemærkning tid (farve:͸}}}}, forekommer det mig at være en smule overflødig ved første - og jeg er enig i, en måde er det.men det gør alt super klar.,,, placering af hvert element kan fastsættes på et blik, de almindelige regler for en del kan stadig være angivet uden for denne struktur, ikke overskrives styles er langt mere ligetil, opretholdelse af regler og at finde fejl er meget lettere, og anvendeligheden af dette vil kun sig, hvis du bruger den i et større projekt, men her er et hurtigt indlæg, som viser, hvordan en kommentar er lydhør.under en bestemt bredde, den del af bemærkning er skjult for at spare plads.,,, @ medier skærm og max bredde: 600px) {. commentlist {. bemærkning container (. bemærkning vigtigste {. bemærkning header {. bemærkning dato (. tid (display: ingen;}}}}}}},, jeg er enig i, at det ser forfærdeligt ud.men ingen tanker gik til at skabe den regel.ingen tænker på let tilbageskridt, fordi du ikke har brug for at finde ud af, fidus du tilføjede undervejs.desuden, du kan fortælle, hvad denne regel er bare ved at kigge på det, mit sidste argument for konsekvens er en mere kompliceret, men jeg tror, er hensigtsmæssigt at se på.jeg bygger wordpress temaer for salg på themeforest og én ting er, at du kan vælge, hvilken farve til temaet.elementer recolored til dit valg.den måde, det er sket, er, at hver gang en farve er defineret det er overskrevet med dynamiske css - kode vi produktion med folkesundhedsprogrammet.det er sådan noget, og indholdet af vores mindre fil:,, @ farve primære: rød;. knap {baggrund: @ farve primære; polstring: 8px 20px;}, og indholdet af en php medtaget i slutningen af html overskrift:,, <?php $primary_color = get_option ('primary_color)?> < stil type ='text /css ">. knap {baggrund:&#<?php echo primary_color?>} < /stil >, dybest set, er der en henvisning til "@ farve primære i mindre sag, vi er nødt til at skabe en php regel for at sikre, at farver, som brugeren vælger afspejles på stedet.det kan tage et stykke tid, og hvad vigtigere er, meget kedelig.for at bekæmpe kedsomhed, vi er ved at skabe et manuskript, som parses vores mindre fil og skaber på den kode, som vi kan kopiere pasta på én gang.det er lidt diffcult, fordi der er nogle dynamiske regler med funktioner og sådan, men for at trække dette fra vores mindre fil må være struktureret og sammenhængende.,,, at biblioteker af regler, en stor tid saver og et middel til at øge sammenhængen i projekter, er at anvende en fælles samling af regler.tidligere spurgte jeg, hvorfor skriver alle grænsen radius regler, når vi kan bruge en mixin?nu kan vi springe et højere niveau.hvorfor skrive grænsen radius mixin for hvert projekt, når du bare kan bruge den samme?, er der nogle mixins (især dem, der løser sælger detaljer), som vil være den samme i alle projekter.disse kan opdeles i en mixins. mindre fil, som du kan bruge, hvor du vil.her er nogle eksempler på mixins, der altid er god at have i nærheden.,, uklarhed,. - uklarhed (@ uklarhed: 0,8) {@ ieopacity: @ opacitet * 100; filter: ~ "alpha (uklarhed = @ {ieopacity})" - khtml uklarhed: @ uklarhed; - moz uklarhed: @ røgtæthed; uklarhed: @ uklarhed;}, gradienter,,. hældning (@ start @ ende) {baggrund: @ start, filter: ~ "progid: dximagetransform. microsoft. hældning (startcolorstr = @ start", endcolorstr = @ ende, gradienttype = 0) "baggrund: - webkit gradient (lineært, venstre øverste, venstre bunden, farve, stop (0% (start) farve stop (100% @ ende) baggrund: - webkit lineær gradient (top, @ start 0% @ ende 100%); baggrund: - moz lineær gradient (top, @ start på 0% @ ende 100%) background: - ms lineær gradient (top, @ start 0% @ ende 100%); baggrund: - o-linear-gradient (top, @ start 0% @ ende 100%); baggrund: lineær gradient (top, @ start 0% @ ende 100%);}, dynamisk farver,,. element farve (@ farve), når (lethed (@ farve) > = 60%) (farve: @ farve -͸.}. element farve (@ farve), når (lethed (@ farve) < 60%) (farve:&#fff;}, dette er især cool.hvis baggrunden farve er lys, teksten farve, vil være en meget mørk version af samme farve.,,, projektets specifikke regler, foreslår jeg altid tænker om placeringen af den regel, du skriver.er du sikker på at det er globalt, der anvendes for alle projekter?det kan være fristende at sætte en masse regler, men i virkeligheden kunne være bedre til at skabe et konkret projekt fil.,, kan du huske det billede af kommentarer tidligere?de beholder dette element har et bestemt format.det er en hvid ramme og en grå omrids.mange andre elementer i dette emne deler dette mønster.det kunne være skabt en regel, som så:,,. rubrik (grænse: 1px fast&#fff; udkast: 1px fast&#dedede;} bemærkninger {. rubrik; baggrund:&#eeeeee;}, mens denne er anvendt overalt, vil det ikke være det samme på tværs af flere projekter.derfor ville det være bedre at oprette en fil, som mytheme. mindre ", som indeholder de almindelige, men tema særlige regler.hvis du virkelig vil bruge noget som i den globale fil, du kunne komme ind på det sådan her:,,. rubrik grænsede (@ grænse farve:&#fff, @ skitsere farve:&#dedede) (grænse: 1px fast @ grænse farve; udkast: 1px fast @ skitsere farve;}, denne regel giver du skal skabe den samme rubrik stil lige så let, men man kan også tilføje parametre til at skabe forskelligt farvede rubrik grænser.du kan tage det et skridt videre ved informa tingene endnu mere og skabe en bootstrap. mindre fil. dette bringer os pænt i vores næste emne, nemlig at skabe en ramme for os.,, som er defineret i vores gamle støvlestrop fil, @ grænse boks grænse farve:&#fff; @ grænse boks skitsere farve:&#dedede;,, på tværs af projekt mixins. mindre,,. rubrik grænsede (@ bc: @ grænse boks grænse farve, @ oc: @ grænse boks skitsere farve) (grænse: 1px fast @ bc; udkast: 1px fast @ oc},,, rul dine egne rammer, skabe din egen ramme er normalt ikke, medmindre du er meget avanceret i deres hovedområde (og 5 - 6 andre), og du har en meget god grund til det.med css og mindre, det er en smule anderledes. du kan begynde at skabe dit eget billede fra dag ét.da mindre er en superset af css alt, hvad du gør, passer fint i de eksisterende regler.da css er tilgivende og ned, du kan ikke gøre nogen varig skade, som ikke kan standses, foreslår jeg, at skabe en større mixins fil til at begynde med.du kan altid fjerne ting fra det eller tilføje noget til det, som er nødvendig.senere kan du tilføje projektspecifikke filer, tredjemand filer, en bootstrap fil og så videre.her er min ramme er organiseret.,,, en bootstrap fil anvendes til at oprette variabler, der, den vigtigste ramme fil, er omfattet.denne sag importen forskellige sager:,, mixins fil igen stil, nettet,,,, - projektet særlige regler er omfattet af tredjemand styles er tilføjet,,,, konklusion, som med ethvert andet sprog, den praktiske gennemførelse af koder indeholder mange forskellige udfordringer og teknikker, som ikke kan opdages og overvinde af bare at kigge på dokumentation.at bruge mindre til sit fulde omfang, bør du læse forslag og forsøge at tage i den logik, men du bliver nødt til at få erfaring.konsistens, logik og enkelhed bør være din overordnede ord og mindre giver dig alle redskaber til at gøre dette. og endelig glæder jeg mig over deres bidrag, og jeg vil gerne høre, hvordan de tilrettelægger mindre, og hvordan du gennemføre det i deres projekter.tak for det!,