Mixins in depth

Web Designer Magazine - - Workshops Automatiseren Met Sass Mixins, Loops & F -

14. Kleu­ro­ver­gang via fa­den

We ge­brui­ken het ‘tran­si­ti­on’-ken­merk in CSS om de over­gang tus­sen de ach­ter­grond­kleu­ren ge­lei­de­lijk te la­ten ver­lo­pen. We zou­den dit voor ‘all’ kun­nen doen, maar dat heeft veel in­vloed op de pres­ta­ties en dan kun­nen we ver­schil­len­de waar­des niet met ver­schil­len­de ti­mings la­ten over­gaan of an­de­re ken­mer­ken ge­brui­ken. [class^=”so­ci­al__i­con”] { ... tran­si­ti­on: back­ground-co­lor 150ms ea­se-in-out ; }

15. Meer over­gang­se fec­ten

We voe­gen een ‘re­la­tie­ve’ po­si­ti­o­ne­ring aan de knop­pen toe, als­me­de de waar­de ‘top’ die we in ‘tran­si­ti­on’ ge­brui­ken. Daar­mee kun­nen we meer in­ter­ac­ti­vi­teit toe­voe­gen. f[class^=”so­ci­al__i­con”] { po­si­ti­on: re­la­ti­ve; top: 0; ... tran­si­ti­on: back­ground-co­lor 150ms ea­se-in-out, top 250ms li­near ; }

16. Knop om­hoog bij aan­wij­zen

Om­dat we voor de­ze in­ter­ac­tie geen ex­tra’s no­dig heb­ben, kun­nen we de co­de aan de ge­meen­schap­pe­lij­ke class toe­voe­gen. Met een ne­ga­tie­ve waar­de voor top en het weg­la­ten van de out­line krij­gen we nog dui­de­lij­ker vi­su­e­le feed­back bij in­ter­ac­tie. [class^=”so­ci­al__i­con”] { ... &:hover, &:fo­cus, &:ac­ti­ve { out­line: no­ne; top: -0.25em; }}

17. Val­scha­duw

Op de­zelf­de ma­nier voe­gen we met de va­ri­a­be­le ‘box-sha­dow’ meer diep­te aan de in­ter­ac­tie toe. De ver­ti­ca­le hoog­te van de scha­duw wij­zi­gen we te­ge­lij­ker­tijd met de waar­de top. box-sha­dow: 0 0 0.25em -0.25em rg­ba(0,0,0,0.2); &:hover, &:fo­cus, &:ac­ti­ve { ... box-sha­dow: 0 0.5em 0.25em -0.25em rg­ba(0,0,0,0.3); }

18. Snel­tek­sten

Mixins kun je zo­da­nig de in­i­ë­ren dat ze in­put ver­ei­sen of niet. We zou­den bij­voor­beeld een mixin kun­nen ma­ken voor een een­vou­di­ge clear ix die hele­maal geen in­put no­dig heeft. Die zou je dan aan­roe­pen met ‘@in­clu­de clear ix’. Je zou dit trou­wens ook kun­nen be­rei­ken met een si­lent class, op ba­sis van een ‘%’ se­lec­tor en aan­ge­roe­pen met ‘@ex­tend’.

Je kunt com­plexe­re mixins ma­ken die in­put ver­ei­sen of waar je con­tent voor op­geeft wan­neer je ze aan­roept. We zou­den bij­voor­beeld een Flex­box-mixin als fall­back voor ou­de­re brow­sers kun­nen ma­ken. Die mixin zou het lex grow-, shrink- en ba­sis-ken­merk als in­put krij­gen en wor­den aan­ge­roe­pen met ‘@in­clu­de lex(1,1,50%);’.

De mixin die we in de­ze workshop ma­ken, is nog een an­der voor­beeld van hoe je mixins kunt ge­brui­ken: hij ac­cep­teert een stel waar­des en her­haalt ze in de con­tent van de mixin. Als ex­tra toe­lich­ting voor de ge­brui­kers voe­gen we met CSS tool­tips aan de pic­to­gram­men toe. Daar­voor zet­ten we eerst de be­tre en­de tek­sten in de lijst. Plaats ze tus­sen aan­ha­lings­te­kens zo­dat je ook spa­ties kunt ge­brui­ken. $icon-list: ( vi­meo “Vi­meo” “\f27d” #1ab7ea, twit­ter “Twit­ter” “\f099” #1da1f2, ... git­hub “Git­hub” “\f113” #333, rss “RSS” “\f09e” #f26522, );

19. Pas de @each-lus aan

Om­dat de lijst is aan­ge­past, moe­ten we on­ze ‘@ each’-loop aan­pas­sen zo­dat de waar­de voor de tool­tip (‘$na­me’) wordt mee­ge­no­men. We kun­nen die dan ge­brui­ken als con­tent bij het ‘be­fo­re’ pseu­doe­le­ment van de knop­pen. @each $icon, $na­me, $uni­co­de, $icon-back­ground in $icon-list { ... .so­ci­al__i­con--#{$icon} { ... &::be­fo­re { con­tent: ‘#{$na­me}’; } } }

20. Een stijl voor ‘be­fo­re’

Nu de naam van elk pic­to­gram als tool­tip ver­schijnt, moe­ten we die een stijl ge­ven. We voe­gen een ach­ter­grond­kleur, pad­ding en an­de­re stijl­ken­mer­ken toe. We po­si­ti­o­ne­ren de tool­tips ook voor een tran­si­tie en pas­sen de waar­de top en de trans­pa­ran­tie (opa­ci­ty) aan bij in­ter­ac­tie. &::be­fo­re { ... top: -3.5em; opa­ci­ty: 0; tran­si­ti­on: top 250ms li­near, opa­ci­ty 150ms li­near 150ms; } &:hover, ... { ... &::be­fo­re { opa­ci­ty: 1; top: -2.5em; } }

21. Een stijl voor ‘af­ter’

We ge­brui­ken Css-drie­hoe­ken () voor on­der­aan on­ze tool­tips. Ook dit ele­ment po­si­ti­o­ne­ren we weer voor een tran­si­tie en we pas­sen daar­bij de door­zich­tig­heid en de waar­de top aan met een ver­schil­len­de ti­ming. Door een ver­tra­ging in te bou­wen krij­gen we een ani­ma­tie waar­bij de snel­tekst in­ge­fa­det wordt en naar be­ne­den schuift. &::af­ter { ... top: -1.9em; opa­ci­ty: 0; tran­si­ti­on: top 250ms li­near, opa­ci­ty 150ms li­near 150ms; } &:hover, ... { ... &::af­ter { opa­ci­ty: 1; top: -0.9em; } }

Op srt.lt/tg2g7z vind je een Co­de­pen-pro­ject met al­le stap­pen van de­ze workshop.

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.