et par ting, du ikke ved om mindre,,,, det har været en lang tid siden vores sidste dækning af   mindre.sidste gang vi talte om, var det i 2012, når mindre stadig var version 1.2.0.på tidspunktet for denne skriftligt på er ved at nå, version 2.0, og der har været en række forbedringer samt en håndfuld tilføjet elementer i hver iteration.,, på denne post, og jeg vil gerne fremhæve nogle af disse elementer, som du   kan   være lykkelig uvidende om,.,, forlængelse af udvælgere, til at begynde med, lad os tale om, også.udvide var en af de ønskede egenskaber, da frækhed og stylus brugere har haft det i et stykke tid.anvendelse af udvide metode giver os mulighed for at   producerer enklere produktion   ved at gruppere udvælgere, som deler de samme mixins.det hjælper os med at bevare den stil, tør og i sidste ende mindske stylesheet størrelse. i frækhed, samt stylus, vi vil bruge  , @ udvide,   direktiv for at udvide en mixin.så tager det anderledes; det benytter sin medicinske pseudo - klasse,  ,: extend(),  , og jeg tror, at vælge at bruge en pseudo - klasse snarere end en  , @,   direktiv er et klogt valg, en standard css pseudo - klasse giver os mulighed for at anvende de nye regler inden for et eksisterende vælgeren uden stil helt ikke overskrives den oprindelige styles.The ,:extend(), also uses a similar principle, including new styles into a new style rule where it is extended.,,Assuming you have a mixin containing basic circle styles, like so:,,,.circle {   border-radius: 50%; },,You could use the ,:extend(), pseudo-class to share the ,.circle, styles within other selectors like so:,,.circle {   border-radius: 50%; } .button:extend(.circle) {   position: absolute;   top: 0;   left: 0; },,Alternatively, you could nest the ,:extend(), pseudo-class with an ,&, notation.,,.circle {   border-radius: 50%; } .button {   &:extend(.circle);   position: absolute;   top: 0;   left: 0; },,This example will declare two ,.button, selectors; the first one being bundet med  , cirkel, således at dele den samme  , grænse radius,.,,. cirkel. knap (     grænse radius: 50%). knap (     holdning: absolutte og      top: 0;      tilbage: 0}, flere mixins, du kan også omfatte flere mixins inden for en enkelt vælgeren.i siger og stylus, ville vi erklærer hver mixin inden for en særskilt  , @ også, men i mindre vi erklærer mixins i en enkelt  ,: extend(),   ved at adskille hver med et komma.efter vores tidligere eksempel kan vi tilføje en anden definition af misligholdelse - gearvælgeren farve den cirkel, f.eks.:,, @ gray:&#ccc; @ grå lettere:&#f3f3f3;. cirkel (   grænse radius: 50%}. cirkel misligholdelse (   baggrund farve: @ grå lettere;    grænse: 1px fast @ gray.}. knap (   &: forlænge (. cirkel. cirkel misligholdelse)    holdning: absolutte og    top: 0;    tilbage: 0), som vil blive udarbejdet i:,,. cirkel. knap (   grænse radius: 50%}. cirkel misligholdelse. knap (   baggrund farve:&#f3f3f3;    grænse: 1px fast&#cccccc;}. knap (   holdning: absolutte og    top: 0;    tilbage: 0}, som du kan se, at de samme politiske stil fra den udvidede mixins er erklæret sam- korrekt.,, at udvide indlejrede udvælgere,, en anden ting er, at du skal vide, er, at de mindre udvide metode kun vil fusionere former for første vælgeren.styles, der kommer fra barnet eller indlejrede selektorer vil ikke følge efter.Hence the,.button, class here:,,@gray: #ccc; @gray-lighter: #f3f3f3; .parent {     color: @gray;     .child {         color: @gray-lighter;       } } .button:extend(.parent) {     font-family: Arial; },,will not inherit the styles from the nested ,.child, selector:,,.parent, .button {   color: #cccccc; } .parent .child {   color: #f3f3f3; } .button {   font-family: Arial; },,If you want the ,.button, to share the styles from ,.child,, you will have to tell LESS implicitly by including the selector within the brackets:,,.button:extend(.parent .child) {     font-family: Arial; },,In this example, the output would be:,,.parent, .button {   color: #cccccc; } .parent .child, . knap (   farve:&#f3f3f3;}. knap (   skrifttype familie: arial;}, personligt, jeg kan lide, hvordan mindre leverer udvide metode.det giver stor kontrol over som selektorer i en mixin at fusionere.fremad med hensyn til, hvordan vil du erklære stil regler for din hjemmeside, og udvide, når de mener, at en særlig stil regel bør fordeles gennem politiske i stylesheet.,, indikation af en art, være næsvis brugere vil være bekendt med  , indikation af en art, som vælgeren.en indikation af en art, der svarer til en klasse - eller id - komitéen, der indeholder et sæt af ejendom, erklæringer og også anvendes i forbindelse med en  , @ udvide,   direktiv.men en indikation af en art er angivet med en  ,%,   tegn, og vil aldrig blive udarbejdet og produktion som ccs.så, når følgende   sass kode eksempel er udarbejdet:,,% afrundet (   grænse radius: 30px}. knap misligholdelse (   @ udvide% rundet;},,,,,,, det vil kun output:,,. knap misligholdelse (   grænse radius: 30px;}, mindre ikke har et særligt vigtigt, som men du kan producere   samme produktion   ved at tilføje   (),   ved udgangen af komitéen.for eksempel:,,. rounded() {   grænse radius: 30px}. knap misligholdelse (  . afrundes;}, denne metode, i mindre officielt er kendt som   mixins som funktioner.,, mere import valgmuligheder, mindre indført flere nye muligheder for indførsel af eksterne stylesheets.en af mine favorit muligheder er   (reference).dette viser, at ikke mindre stylesheet udarbejder inden for stylesheet, hvor den er importeret.mindre vil behandle stylesheet med denne mulighed kun som en reference.lad os se på vores første eksempel igen. her har vi grundlæggende styles danner en cirkel.men denne gang, vi redder dem   i en særskilt mixins fil, mixins. mindre,.,, @ gray:&#ccc; @ grå lettere:&#f3f3f3;. cirkel (   grænse radius: 50%}. cirkel misligholdelse (   baggrund farve: @ grå lettere;    grænse: 1px fast @ gray.}, nu importerer vi de   mixins. mindre   sag i vores vigtigste stylesheet ved hjælp af   (reference),   kommando.,, @ import (reference) "mixins. mindre", så vi kan bruge mixins i de vigtigste stylesheet, f.eks.:,,. knap {  . cirkel.   . cirkel misligholdelse    holdning: absolutte og    top: 0;    tilbage: 0}, som nævnt, mixins, der er indeholdt i   mixins. mindre   fil ikke vil blive udarbejdet i de vigtigste stylesheet.dermed produktionen kun efterlade  ,. knap,   vælgeren:,,. knap (   grænse radius: 50%    baggrund farve:&#f3f3f3;    grænse: 1px fast&#cccccc;    holdning: absolutte og    top: 0;    tilbage: 0}, finder jeg det særligt valg er nyttig, og jeg bruger det ofte) ved brug af en heftig rammer som bootstrap.,, @ import (reference) "mindre /bootstrap /bootstrap. mindre", med ovenstående eksempel, vil vi være i stand til at genbruge og udvide nogle bootstrap mixins og funktioner, samtidig med at den vigtigste stylesheet fri fra bootstrap rod og rod.,, drej css i mindre, en mulighed, som jeg tror, du vil finde det nyttigt, er   (mindre).det omfatter ofte biblioteker, som kun er tilgængelige som vanilje  ,. css,   sådan her:,, @ import "bibliotek. css", blev ovenstående eksempel, mindre vil behandle det som blot ccs.det betyder, at den stylesheet ikke udarbejdes, og produktionen vil blive lige som det er (i dette tilfælde:  , @ import "bibliotek. css"), og den politiske klasse, der er indeholdt i ikke vil være til rådighed mixins. du vil ikke være i stand til at genbruge eller udvide udvælgere.,, hvis du vil have det til at opføre sig som en mindre stylesheet, du bliver nødt til at erklære import erklæring som sådan ved hjælp af   (mindre),   mulighed.,, @ import (mindre) "bibliotek. css",,, hvis du ønsker at stylesheet er til stede lige som reference, import med en kombination af   (mindre),   og   (reference):,, @ import (mindre, reference) "bibliotek. css", variable interpolation, hugo giraudel,   i en af hans tuts + artikel, forklares grundigt, hvad, hvorfor og hvordan af interpolation i næsvished.LESS uses ,@{}, to interpolate a variable, placing the variable name within the brackets, for instance:,,@variable: 'value'; @{variable} //interpolated,,We can use a variable in this way multiple times within a file; I often use this technique to specify file paths for images or fonts:,,@path-img: 'assets/img'; .header {   background-image: url('@{path-img}/bg.png'); },,You can also include interpolation within an ,@import, statement, which (as I far I’m aware) is not yet possible in Sass.,,//Variables @path-less: 'src/less'; @path-img: 'assets/img';   //External Stylesheet @import '@{path-less}/mixins.less';   //Styles .header {   background-image: url('@{path-img}/bg.png'); },,Or, perhaps use it for declaringudvælgere og egenskaber:,, @ navn: farve;. misligholdelse - @ {ejendom} {   @ {ejendom}:�ee;    baggrund - @ {ejendom}:ϧ.}, som du kan se, brugen og anvendelsen af variable interpolation i mindre er meget fleksible,.,, sammenlægning af ejendom værdier, den sidste mindre nyt element, som vi taler om her, er, at sammenlægge,.de gør det nemt at håndtere css egenskaber, der accepterer flere værdier såsom  , tekst skygge,  , rubrik skygge, og  , overgangen,.,, lad os antage, at du ønsker at anvende en overgang virkning som en knap farve og baggrund.måske har du en mixin med overgangen til erklæring til tekst farve.,,. farve overgang (   overgang: farve 350ms;}, lad os tage det en anden regel i stil med en eksisterende overgang erklæring:,,. knap (  . farve overgang.    overgang: baggrund farve 300ms;},, i dette tilfælde ville man ende med to  , overgang   erklæringer i en enkelt stil regel:,,. knap (   overgang: farve 350ms;    overgang: baggrund farve 300ms;}, overgangen til  , farve,   vil ikke fungere, da disse kan træde i stedet for den første   overgangen,   ejendom.for at gøre både farve og baggrund skift arbejde, ville du have til at omfatte begge værdier i en fælles erklæring fra afgrænsning af hver enkelt med et komma.og det er hvor fusionere element kommer.,, tilføjer et plus tegn efter hver ejendom navn, som så:,,. color- transition() {   overgang +: farve 350ms;}. knap (  . farve overgang.    overgang +: baggrund farve 300ms;}, nu vil vi have følgende output når det er udarbejdet:,,. knap (   overgang: farve 350ms, baggrund, farve 300ms;}, konklusion, jeg tror de - også mixins som funktioner, variable interpolation, de muligheder, og fusionere - er meget betydelige forbedringer af mindre.disse funktioner effektivt hjælpe os producere mere effektiv og let håndterligt styles.måske er det tid til at gennemgå og   refactor din gamle kodeks.,,,