https://cdn.v1v2.io/_next/static/chunks/pages/blog/css-preprocessors-sfhtml5-12b2ffca21026106.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5393],{98910:(e,t,s)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/blog/css-preprocessors-sfhtml5",function(){return s(68294)}])},77083:(e,t,s)=>{"use strict";s.d(t,{A:()=>R});var r=s(74848),i=s(45703),n=s.n(i),a=s(79237),l=s(96540),o=s(62539),c=s(93809),x=s(41662),d=s(89260),h=s(95643),m=s(48996),p=s(48706),u=s(11692),j=s(50303),g=s(14320),f=s(74892),b=s(56972),v=s(20053),y=s(86715),w=s(96452),z=s(39605),_=s(73374),C=s(49752),k=s(91588),S=s(15741),N=s(79167),I=s(67764);let A=[{path:S.gs,matchRule:e=>e.startsWith("/blog"),label:"Blog & Projects",icon:w.EmU,iconColor:N.K2},{path:S.qu,label:"Resume",icon:_.bGE,iconColor:N.RP}],E=e=>{let{path:t,label:s,icon:i,iconColor:n,closeModal:a,matchRule:l=null}=e,{pathname:x}=(0,y.useRouter)(),d=l?l(x):x.startsWith(t);return(0,r.jsx)(o.az,{_hover:{"& svg":{color:n}},children:(0,r.jsx)(b.z9,{pl:5,className:(0,v.A)(d&&"active-nav"),justifyContent:"left",variant:"ghost",href:t,onClick:a,size:"lg",w:"full",leftIcon:(0,r.jsx)(c.I,{as:i,boxSize:4,mr:1,color:d&&n,transitionProperty:"color",transitionDuration:"var(--chakra-transition-duration-normal)"}),children:s},t)},t)},P=e=>{let{closeModal:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(x.c,{px:2,children:(0,r.jsx)(f.YC,{spacing:0,children:A.map(e=>(0,r.jsx)(E,{closeModal:t,...e},e.path))})}),(0,r.jsx)(d.j,{pt:0,justifyContent:"center",children:(0,r.jsx)(h.$,{onClick:t,children:"Close"})})]})},W=e=>{let{toggleColorMode:t}=(0,m.G6)(),s=(0,m.dU)(C.vVA,C.q9U),i=(0,m.dU)("Dark mode","Light mode");return(0,r.jsx)(p.K,{variant:"ghost","aria-label":i,icon:(0,r.jsx)(c.I,{as:s,boxSize:5}),onClick:t,...e})},F=e=>{let{path:t,label:s,icon:i,iconColor:n,matchRule:a=null}=e,{pathname:l}=(0,y.useRouter)(),x=a?a(l):l.startsWith(t);return(0,r.jsx)(o.az,{_hover:{"& svg":{color:n}},children:(0,r.jsxs)(b.z9,{className:(0,v.A)(x&&"active-nav"),variant:"ghost",href:t,children:[(0,r.jsx)(c.I,{sx:(0,I.x)("".concat(830,"px")),as:i,boxSize:3.5,mr:2,color:x&&n,transitionProperty:"color",transitionDuration:"var(--chakra-transition-duration-normal)"}),s]})})},D=(0,l.memo)(e=>(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(o.az,{className:"header",shadow:"md",py:2,pos:"fixed",top:0,w:"full",zIndex:10,sx:{"@media print":{display:"none"}},...e,children:(0,r.jsx)(a.m,{maxW:"container.lg",children:(0,r.jsxs)(u.s,{align:"center",justify:"space-between",children:[(0,r.jsx)(b.N_,{href:S.Pm,mr:2,children:(0,r.jsx)(o.az,{sx:{"@media screen and (max-width: 310px)":{width:"26px",overflowX:"hidden"}},children:(0,r.jsx)(z.A,{className:"body-color",width:"110px",title:"V1V2"})})}),(0,r.jsx)(j.z,{sx:(0,I.x)("".concat(730,"px")),spacing:.5,children:A.map(e=>(0,r.jsx)(F,{...e},e.path))}),(0,r.jsxs)(j.z,{children:[(0,r.jsx)(g.N,{href:"https://x.com/verekia",isExternal:!0,sx:(0,I.x)("230px"),children:(0,r.jsx)(p.K,{tabIndex:-1,icon:(0,r.jsx)(c.I,{as:w.feZ,boxSize:6,fillOpacity:.9}),variant:"ghost","aria-label":"GitHub logo"})}),(0,r.jsx)(g.N,{href:S.xD,isExternal:!0,sx:(0,I.x)("356px"),children:(0,r.jsx)(p.K,{tabIndex:-1,icon:(0,r.jsx)(c.I,{as:w.hL4,boxSize:6,fillOpacity:.9}),variant:"ghost","aria-label":"GitHub logo"})}),(0,r.jsx)(W,{}),(0,r.jsx)(f.g6,{modalProps:{preserveScrollBarGap:!0,isCentered:!0},contentProps:{width:"auto"},trigger:e=>(0,r.jsx)(p.K,{"aria-label":"Menu",variant:"ghost",icon:(0,r.jsx)(c.I,{as:k.vIB,boxSize:6}),onClick:e,sx:(0,I.u)("".concat(731,"px"))}),children:e=>(0,r.jsx)(P,{closeModal:e})})]})]})})}),(0,r.jsx)(o.az,{h:14,sx:{"@media print":{display:"none"}}})]})),H={a:{textDecor:"underline"}},U=e=>{let{children:t,maxW:s,...i}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n(),{id:"75b87823bb2211a2",children:"html{overflow-y:scroll}"}),(0,r.jsx)(D,{mb:5}),(0,r.jsx)(a.m,{maxW:null!=s?s:"container.lg",pb:"200px",sx:H,...i,children:t})]})};var L=s(53924);let R=e=>{let{children:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n(),{id:"e3d2254df3ae0ad9",children:"article header>:last-child{margin-bottom:0}article footer>:first-child{margin-top:0}article section>:first-child{margin-top:0}article section>:last-child{margin-bottom:0}"}),(0,r.jsx)(U,{as:"article",maxW:"730px",sx:{fontSize:L.fQ,lineHeight:L.UH,h1:{fontWeight:600},h2:{textAlign:"center",fontSize:24,mt:12,mb:6,fontWeight:600},h3:{fontSize:18,mt:10,mb:4,fontWeight:600},h4:{fontSize:16,my:6,mb:4},"ul, ol":{my:L.vU,ml:7},"ul > ul, ol > ol":{my:1,ml:5},"ul li, ol li":{pl:1},"p + ul":{mt:3},"ul + p":{mt:3},"p, ul":{fontWeight:L.Im},"b, strong":{fontWeight:L.uf},".chakra-wrap__list":{m:0},".chakra-wrap__listitem":{pl:0},"> header":{mb:L.rf},"> footer":{mt:L.rf},"> section":{my:L.rf},"> section > section":{my:L.vU},"> section > section > section":{my:L.vU}

1,".deprecation-warning":{bg:"orange.100",[(0,L.XT)()]:{bg:"#735016"}},"@media print":{mb:0}},children:t})]})}},21055:(e,t,s)=>{"use strict";s.d(t,{A:()=>c.N_,Cy:()=>l.C,E9:()=>g,H2:()=>p,H3:()=>u,H4:()=>j,L9:()=>h,Li:()=>o.ck,P:()=>a.E,Ul:()=>o.Xy,nC:()=>m,nz:()=>f,uQ:()=>b});var r=s(74848),i=s(62539),n=s(91311),a=s(27821),l=s(29818),o=s(55462),c=s(56972),x=s(29965),d=s.n(x);let h=e=>(0,r.jsx)(i.az,{as:"span",...e}),m=e=>(0,r.jsx)(i.az,{as:"aside",...e}),p=e=>(0,r.jsx)(n.D,{as:"h2",...e}),u=e=>(0,r.jsx)(n.D,{as:"h3",...e}),j=e=>(0,r.jsx)(n.D,{as:"h4",...e}),g=e=>{let{alt:t,src:s,borderRadius:n=5,style:a,center:l,imageProps:o,...c}=e;return(0,r.jsx)(i.az,{...l?{display:"flex",justifyContent:"center",w:"full"}:{},...c,children:(0,r.jsx)(d(),{alt:t,style:{borderRadius:n,...a},src:s,quality:100,...o})})},f=e=>{let{children:t,...s}=e;return(0,r.jsx)(a.E,{mb:3,...s,children:t})},b=e=>{let{children:t,...s}=e;return(0,r.jsx)(i.az,{as:"ul",mb:"var(--chakra-space-3) !important",...s,children:t})}},85044:(e,t,s)=>{"use strict";s.d(t,{A:()=>o});var r=s(74848),i=s(91311),n=s(49497),a=s(21055),l=s(67764);let o=e=>{let{children:t,headTitle:s,icon:o,...c}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.A,{title:null!=s?s:String(t)}),(0,r.jsxs)(i.D,{as:"h1",textAlign:"center",fontSize:"3xl",my:8,...c,children:[o&&(0,r.jsx)(a.L9,{sx:(0,l.u)("".concat(830,"px")),children:o}),t]})]})}},68294:(e,t,s)=>{"use strict";s.r(t),s.d(t,{default:()=>o});var r=s(74848),i=s(36466),n=s(77083),a=s(85044);let l=()=>(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(a.A,{children:"CSS Preprocessors at SFHTML5"}),(0,r.jsx)("p",{children:"On May 31st 2012, I gave this talk at SFHTML5 about CSS Preprocessors."}),(0,r.jsx)(i.g,{ratio:628/350,children:(0,r.jsx)("iframe",{src:"https://www.youtube.com/embed/FlW2vvl0yvo",frameBorder:"0",allowFullScreen:!0})})]});l.wrappers=e=>(0,r.jsx)(n.A,{children:e});let o=l},67764:(e,t,s)=>{"use strict";s.d(t,{u:()=>i,x:()=>r});let r=e=>

1({["@media screen and (max-width: ".concat(e,")")]:{display:"none"}}),i=e=>({["@media screen and (min-width: ".concat(e,")")]:{display:"none"}})},36466:(e,t,s)=>{"use strict";s.d(t,{g:()=>c});var r=s(15284),i=s(85149),n=s(11235),a=s(29857),l=s(96540),o=s(74848),c=(0,r.R)(function(e,t){let{ratio:s=4/3,children:r,className:c,...x}=e,d=l.Children.only(r),h=(0,a.cx)("chakra-aspect-ratio",c);return(0,o.jsx)(i.B.div,{ref:t,position:"relative",className:h,_before:{height:0,content:'""',display:"block",paddingBottom:(0,n.bk)(s,e=>`${1/e*100}%`)},__css:{"& > *:not(style)":{overflow:"hidden",position:"absolute",top:"0",right:"0",bottom:"0",left:"0",display:"flex",justifyContent:"center",alignItems:"center",width:"100%",height:"100%"},"& > img, & > video":{objectFit:"cover"}},...x,children:d})});c.displayName="AspectRatio"}},e=>{var t=t=>e(e.s=t);e.O(0,[8916,5422,6379,7351,8593,1940,2503,636,6593,8792],()=>t(98910)),_N_E=e.O()}]);