muerwre.github.io/docs/css/sass-nth-child-iterate-mixin/_payload.js

export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:t,_path:u},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Certbot Well Known Auto Renew",_path:"\u002Flinux\u002Fcertbot-well-known-auto-renew"},{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-ex7u9maCrE":{_path:u,_dir:"css",_draft:p,_partial:p,_locale:"en",_empty:p,title:t,description:"Say, we need to color n items by specific colors, which depend on its position. #SCSS supports iteration over lists for that purposes:",excerpt:{type:v,children:[{type:a,tag:l,props:{},children:[{type:b,value:w},{type:a,tag:x,props:{},children:[{type:b,value:y}]},{type:b,value:z},{type:a,tag:A,props:{href:B,rel:[C]},children:[{type:b,value:D}]},{type:b,value:E}]},{type:a,tag:g,props:{code:q,language:m},children:[{type:a,tag:n,props:{},children:[{type:a,tag:g,props:{__ignoreMap:i},children:[{type:b,value:q}]}]}]},{type:a,tag:l,props:{},children:[{type:b,value:F}]},{type:a,tag:g,props:{code:r,language:m},children:[{type:a,tag:n,props:{},children:[{type:a,tag:g,props:{__ignoreMap:i},children:[{type:b,value:r}]}]}]}]},body:{type:v,children:[{type:a,tag:l,props:{},children:[{type:b,value:w},{type:a,tag:x,props:{},children:[{type:b,value:y}]},{type:b,value:z},{type:a,tag:A,props:{href:B,rel:[C]},children:[{type:b,value:D}]},{type:b,value:E}]},{type:a,tag:g,props:{code:q,language:m},children:[{type:a,tag:n,props:{},children:[{type:a,tag:g,props:{__ignoreMap:i},children:[{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:s},children:[{type:b,value:"@mixin"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:"ct-fad650"},children:[{type:b,value:"color-per-child"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:G}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:H}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:I}]}]},{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:J}]},{type:a,tag:c,props:{class:s},children:[{type:b,value:"@each"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:K}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:s},children:[{type:b,value:"in"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:H}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:L}]}]},{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"    "}]},{type:a,tag:c,props:{class:"ct-a97837"},children:[{type:b,value:"&"}]},{type:a,tag:c,props:{class:"ct-7ee002"},children:[{type:b,value:":nth-child"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:G}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"#{"}]},{type:a,tag:c,props:{class:"ct-2cb513"},children:[{type:b,value:"index"}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"(($colors), ($color))}"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:I}]}]},{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"      "}]},{type:a,tag:c,props:{class:"ct-c42099"},children:[{type:b,value:"color"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:": "}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:K}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:";"}]}]},{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:"    }"}]}]},{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:"  }"}]}]},{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:M}]}]}]}]}]},{type:a,tag:l,props:{},children:[{type:b,value:F}]},{type:a,tag:g,props:{code:r,language:m},children:[{type:a,tag:n,props:{},children:[{type:a,tag:g,props:{__ignoreMap:i},children:[{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:"ct-85bf5a"},children:[{type:b,value:".item"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:L}]}]},{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:J}]},{type:a,tag:c,props:{class:"ct-0a2d2b"},children:[{type:b,value:"@include"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:"ct-d04bd4"},children:[{type:b,value:"color_per_child"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:"(("}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"#ded187"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"#dbde87"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"#bade87"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"#9cde87"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"#87deaa"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:"));"}]}]},{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:M}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-1605b9{color:#79C0FF}.ct-d04bd4{color:#D2A8FF}.ct-0a2d2b{color:#FF7B72}.ct-85bf5a{color:#79C0FF}.ct-5a2e29{color:#C9D1D9}.ct-c42099{color:#79C0FF}.ct-2cb513{color:#79C0FF}.ct-7ee002{color:#79C0FF}.ct-a97837{color:#7EE787}.ct-e4cb31{color:#FFA657}.ct-fad650{color:#D2A8FF}.ct-ad1209{color:#C9D1D9}.ct-497b4c{color:#FF7B72}.light .ct-497b4c{color:#859900}.light .ct-ad1209{color:#657B83}.light .ct-fad650{color:#268BD2}.light .ct-e4cb31{color:#657B83}.light .ct-a97837{color:#268BD2}.light .ct-7ee002{color:#93A1A1}.light .ct-2cb513{color:#268BD2}.light .ct-c42099{color:#859900}.light .ct-5a2e29{color:#657B83}.light .ct-85bf5a{color:#93A1A1}.light .ct-0a2d2b{color:#859900}.light .ct-d04bd4{color:#268BD2}.light .ct-1605b9{color:#CB4B16}"}]}],toc:{title:i,searchDepth:N,depth:N,links:[]}},_type:"markdown",_id:"content:CSS:Sass nth-child iterate mixin.md",_source:"content",_file:"CSS\u002FSass nth-child iterate mixin.md",_extension:"md"}},prerenderedAt:1711020012204}}("element","text","span","ct-ad1209","ct-5a2e29","line","code","ct-e4cb31",""," ","ct-1605b9","p","scss","pre",", ",false,"@mixin color-per-child($colors) {\n  @each $color in $colors {\n    &:nth-child(#{index(($colors), ($color))}) {\n      color: $color;\n    }\n  }\n}\n",".item {\n  @include color_per_child((#ded187, #dbde87, #bade87, #9cde87, #87deaa));\n}\n","ct-497b4c","Sass Nth Child Iterate Mixin","\u002Fcss\u002Fsass-nth-child-iterate-mixin","root","Say, we need to color ","code-inline","n"," items by specific colors, which depend on its position. #SCSS supports ","a","https:\u002F\u002Fsass-lang.com\u002Fdocumentation\u002Fat-rules\u002Fcontrol\u002Feach","nofollow","iteration over lists"," for that purposes:","Usage is simple:","(","$colors",") {","  ","$color"," {","}",2))