-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy path040b1300.100797a3.js
1 lines (1 loc) · 17.2 KB
/
040b1300.100797a3.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{137:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return o})),t.d(n,"metadata",(function(){return i})),t.d(n,"rightToc",(function(){return d})),t.d(n,"default",(function(){return b}));var c=t(2),r=t(9),a=(t(0),t(199)),o={title:"SASS\u89c4\u8303"},i={id:"css/sass",title:"SASS\u89c4\u8303",description:"## \u8bed\u6cd5\u9009\u7528",source:"@site/docs/css/sass.md",permalink:"/jdc_fe_guide/docs/css/sass",editUrl:"https://git.jd.com/JDC_FE/jdc_fe_guide/tree/master/docs/css/sass.md",sidebar:"someSidebar",previous:{title:"\u6ce8\u91ca\u89c4\u8303",permalink:"/jdc_fe_guide/docs/css/note"},next:{title:"\u91cd\u7f6e\u6837\u5f0f",permalink:"/jdc_fe_guide/docs/css/reset"}},d=[{value:"\u8bed\u6cd5\u9009\u7528",id:"\u8bed\u6cd5\u9009\u7528",children:[{value:"SCSS",id:"scss",children:[]},{value:"Sass",id:"sass",children:[]},{value:"\u56e2\u961f\u7ea6\u5b9a",id:"\u56e2\u961f\u7ea6\u5b9a",children:[]}]},{value:"\u7f16\u7801\u683c\u5f0f",id:"\u7f16\u7801\u683c\u5f0f",children:[{value:"\u56e2\u961f\u7ea6\u5b9a",id:"\u56e2\u961f\u7ea6\u5b9a-1",children:[]}]},{value:"SASS\u6ce8\u91ca\u89c4\u8303",id:"sass\u6ce8\u91ca\u89c4\u8303",children:[{value:"\u56e2\u961f\u7ea6\u5b9a",id:"\u56e2\u961f\u7ea6\u5b9a-2",children:[]}]},{value:"\u5d4c\u5957\u89c4\u8303",id:"\u5d4c\u5957\u89c4\u8303",children:[{value:"\u9009\u62e9\u5668\u5d4c\u5957",id:"\u9009\u62e9\u5668\u5d4c\u5957",children:[]},{value:"\u5c5e\u6027\u5d4c\u5957",id:"\u5c5e\u6027\u5d4c\u5957",children:[]}]},{value:"\u53d8\u91cf",id:"\u53d8\u91cf",children:[]},{value:"\u6df7\u5408(mixin)",id:"\u6df7\u5408mixin",children:[]},{value:"\u5360\u4f4d\u9009\u62e9\u5668 %",id:"\u5360\u4f4d\u9009\u62e9\u5668-",children:[]},{value:"extend \u7ee7\u627f",id:"extend-\u7ee7\u627f",children:[]},{value:"for \u5faa\u73af",id:"for-\u5faa\u73af",children:[]},{value:"each \u5faa\u73af",id:"each-\u5faa\u73af",children:[]},{value:"function \u51fd\u6570",id:"function-\u51fd\u6570",children:[]},{value:"\u8fd0\u7b97\u89c4\u8303",id:"\u8fd0\u7b97\u89c4\u8303",children:[]}],l={rightToc:d};function b(e){var n=e.components,t=Object(r.a)(e,["components"]);return Object(a.b)("wrapper",Object(c.a)({},l,t,{components:n,mdxType:"MDXLayout"}),Object(a.b)("h2",{id:"\u8bed\u6cd5\u9009\u7528"},"\u8bed\u6cd5\u9009\u7528"),Object(a.b)("p",null,"SASS\u6709\u4e24\u79cd\u8bed\u6cd5\u683c\u5f0f\uff0c\u4e00\u79cd\u662f SCSS (Sassy CSS)\uff0c\u53e6\u4e00\u79cd\u662f\u7f29\u8fdb\u683c\u5f0f\uff08Indented Syntax\uff09\uff0c\u6709\u65f6\u79f0\u4e4b\u4e3a Sass\u3002"),Object(a.b)("h3",{id:"scss"},"SCSS"),Object(a.b)("p",null,"SCSS\u8bed\u6cd5\u57fa\u4e8e CSS \u8bed\u6cd5\u6269\u5c55\uff0c\u6bcf\u4e00\u4e2a\u6709\u6548\u7684 CSS \u6587\u4ef6\u90fd\u662f\u4e00\u4e2a\u6709\u6548\u7684\u5177\u6709\u76f8\u540c\u542b\u4e49\u7684 SCSS \u6587\u4ef6\uff0c\u6362\u79cd\u8bf4\u6cd5\u5c31\u662f SCSS \u80fd\u8bc6\u522b\u5927\u591a\u6570\u7684 CSS hacks \u5199\u6cd5\u548c\u6d4f\u89c8\u5668\u524d\u7f00\u5199\u6cd5\u4ee5\u53ca\u65e9\u671f\u7684 IE \u6ee4\u955c\u5199\u6cd5\uff0c\u8fd9\u79cd\u683c\u5f0f\u4ee5 .scss \u4f5c\u4e3a\u6269\u5c55\u540d\u3002"),Object(a.b)("h3",{id:"sass"},"Sass"),Object(a.b)("p",null,"Sass \u4f7f\u7528 \u201c\u7f29\u8fdb\u201d \u4ee3\u66ff \u201c\u82b1\u62ec\u53f7\u201d \u8868\u793a\u5c5e\u6027\u5c5e\u4e8e\u67d0\u4e2a\u9009\u62e9\u5668\uff0c\u7528 \u201c\u6362\u884c\u201d \u4ee3\u66ff \u201c\u5206\u53f7\u201d \u5206\u9694\u5c5e\u6027\uff0c\u5f88\u591a\u4eba\u8ba4\u4e3a\u8fd9\u6837\u505a\u6bd4 SCSS \u66f4\u5bb9\u6613\u9605\u8bfb\uff0c\u4e66\u5199\u4e5f\u66f4\u5feb\u901f\u3002\u7f29\u8fdb\u683c\u5f0f\u4e5f\u53ef\u4ee5\u4f7f\u7528 Sass \u7684\u5168\u90e8\u529f\u80fd\uff0c\u53ea\u662f\u4e0e SCSS \u76f8\u6bd4\u4e2a\u522b\u5730\u65b9\u91c7\u53d6\u4e86\u4e0d\u540c\u7684\u8868\u8fbe\u65b9\u5f0f\uff0c\u5177\u4f53\u8bf7\u67e5\u770b ",Object(a.b)("a",Object(c.a)({parentName:"p"},{href:"http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html"}),"the indented syntax reference"),"\u3002\u8fd9\u79cd\u683c\u5f0f\u4ee5 .sass \u4f5c\u4e3a\u62d3\u5c55\u540d\u3002"),Object(a.b)("p",null,"\u66f4\u8be6\u7ec6\u7684\u7528\u6cd5\u8bf7\u9605\u8bfb SASS \u5b98\u7f51\u6587\u6863\uff1a",Object(a.b)("a",Object(c.a)({parentName:"p"},{href:"http://sass-lang.com/documentation/file.SASS_REFERENCE.html"}),"DOCUMENTATION")),Object(a.b)("h3",{id:"\u56e2\u961f\u7ea6\u5b9a"},"\u56e2\u961f\u7ea6\u5b9a"),Object(a.b)("p",null,"\u8003\u8651\u5230 SCSS \u8bed\u6cd5\u5bf9 CSS \u8bed\u6cd5\u53cb\u597d\u7684\u517c\u5bb9\u6027\u548c\u6269\u5c55\u6027\uff0c\u6211\u4eec\u5728\u4f7f\u7528 SASS \u7f16\u5199\u6837\u5f0f\u7684\u65f6\u5019\uff0c\u7edf\u4e00\u4f7f\u7528 SCSS \u8bed\u6cd5"),Object(a.b)("h2",{id:"\u7f16\u7801\u683c\u5f0f"},"\u7f16\u7801\u683c\u5f0f"),Object(a.b)("blockquote",null,Object(a.b)("p",{parentName:"blockquote"},"When running on Ruby 1.9 and later, Sass is aware of the character encoding of documents. Sass follows the CSS spec to determine the encoding of a stylesheet, and falls back to the Ruby string encoding. This means that it first checks the Unicode byte order mark, then the @charset declaration, then the Ruby string encoding. If none of these are set, it will assume the document is in UTF-8.")),Object(a.b)("p",null,"\u5f53\u5728 Ruby1.9\u6216\u66f4\u65b0\u7684\u7248\u672c\u8fd0\u884c\u7684\u65f6\u5019\uff0cSASS \u80fd\u8bc6\u8fa8\u6587\u6863\u7684\u5b57\u7b26\u7f16\u7801\u3002SASS \u9075\u5faa CSS \u89c4\u8303\u53bb\u786e\u5b9a\u6837\u5f0f\u6587\u4ef6\u7684\u7f16\u7801\uff0c\u8fdb\u800c\u8f6c\u56de Ruby \u5b57\u7b26\u4e32\u7f16\u7801\u3002\u8fd9\u610f\u5473\u7740SASS\u7f16\u8bd1\u7684\u65f6\u5019\u4f1a\u9996\u5148\u68c0\u6d4b BOM\uff0c\u7136\u540e\u5230 @charset \u58f0\u660e\uff0c\u518d\u5230 Ruby \u5b57\u7b26\u4e32\u7f16\u7801\uff0c\u5982\u679c\u4ee5\u4e0a\u90fd\u6ca1\u6709\u8bbe\u7f6e\uff0cSASS \u4f1a\u8ba4\u4e3a\u6587\u6863\u7684\u7f16\u7801\u4e3a UTF-8"),Object(a.b)("h3",{id:"\u56e2\u961f\u7ea6\u5b9a-1"},"\u56e2\u961f\u7ea6\u5b9a"),Object(a.b)("p",null,"\u4e25\u683c\u9075\u5b88\u4e0a\u9762 \u201cCSS\u89c4\u8303\u201d \u4e2d\u7684 ",Object(a.b)("a",Object(c.a)({parentName:"p"},{href:"code.html"}),"\u201c\u7f16\u7801\u89c4\u8303\u201d")),Object(a.b)("p",null,"\u66f4\u591a\u5173\u4e8e SASS \u7f16\u7801\uff1a",Object(a.b)("a",Object(c.a)({parentName:"p"},{href:"http://sass-lang.com/documentation/file.SASS_REFERENCE.html"}),"SASS Encodings")),Object(a.b)("h2",{id:"sass\u6ce8\u91ca\u89c4\u8303"},"SASS\u6ce8\u91ca\u89c4\u8303"),Object(a.b)("p",null,"SASS\u652f\u6301 CSS \u6807\u51c6\u7684\u591a\u884c\u6ce8\u91ca ",Object(a.b)("inlineCode",{parentName:"p"},"/* */"),"\uff0c\u540c\u65f6\u4e5f\u652f\u6301\u5355\u884c\u6ce8\u91ca ",Object(a.b)("inlineCode",{parentName:"p"},"//"),"\u3002"),Object(a.b)("ul",null,Object(a.b)("li",{parentName:"ul"},"\u591a\u884c\u6ce8\u91ca\u5728\u4f7f\u7528\u975e Compressed \u6a21\u5f0f\u8fdb\u884c\u7f16\u8bd1\u540e\u7684\u8f93\u51fa\u6587\u4ef6\u4e2d\u4f1a\u4fdd\u7559\u4e0b\u6765\uff0c\u5355\u884c\u6ce8\u91ca ",Object(a.b)("inlineCode",{parentName:"li"},"//")," \u4fa7\u4f1a\u88ab\u79fb\u9664"),Object(a.b)("li",{parentName:"ul"},"\u591a\u884c\u6ce8\u91ca\u548c\u5355\u884c\u6ce8\u91ca\u5728 SASS \u7f16\u8bd1\u540e\u8f93\u51fa\u7684\u538b\u7f29 CSS \u6587\u4ef6\u90fd\u4f1a\u88ab\u79fb\u9664"),Object(a.b)("li",{parentName:"ul"},"\u5f53\u591a\u884c\u6ce8\u91ca\u5185\u5bb9\u7b2c\u4e00\u4e2a\u5b57\u7b26\u662f\u611f\u53f9\u53f7 \u201c!\u201d \u7684\u65f6\u5019\uff0c\u5373 ",Object(a.b)("inlineCode",{parentName:"li"},"/*! */"),"\uff0cSASS \u65e0\u8bba\u7528\u54ea\u4e00\u79cd\u7f16\u8bd1\u65b9\u5f0f\u7f16\u8bd1\u6ce8\u91ca\u90fd\u4f1a\u4fdd\u7559"),Object(a.b)("li",{parentName:"ul"},"\u6ce8\u91ca\u5185\u5bb9\u53ef\u4ee5\u52a0\u5165 SASS \u53d8\u91cf")),Object(a.b)("h3",{id:"\u56e2\u961f\u7ea6\u5b9a-2"},"\u56e2\u961f\u7ea6\u5b9a"),Object(a.b)("p",null,"SCSS \u6587\u4ef6\u5185"),Object(a.b)("ul",null,Object(a.b)("li",{parentName:"ul"},"\u5168\u90e8\u9075\u5faa CSS \u6ce8\u91ca\u89c4\u8303"),Object(a.b)("li",{parentName:"ul"},"\u4e0d\u4f7f\u7528 ",Object(a.b)("inlineCode",{parentName:"li"},"/*! */")," \u6ce8\u91ca\u65b9\u5f0f"),Object(a.b)("li",{parentName:"ul"},"\u6ce8\u91ca\u5185\u4e0d\u653e SASS \u53d8\u91cf")),Object(a.b)("p",null,"\u6807\u51c6\u7684\u6ce8\u91ca\u89c4\u8303\u5982\u4e0b\uff1a"),Object(a.b)("pre",null,Object(a.b)("code",Object(c.a)({parentName:"pre"},{className:"language-css"}),'@charset "UTF-8";\n\n/**\n * @desc File Info\n * @author liqinuo\n * @date 2015-10-10\n */\n\n/* Module A\n----------------------------------------------------------------*/\n.mod_a {}\n\n/* module A logo */\n.mod_a_logo {}\n\n/* module A nav */\n.mod_a_nav {}\n\n\n/* Module B\n----------------------------------------------------------------*/\n.mod_b {}\n\n/* module B logo */\n.mod_b_logo {}\n\n/* module B nav */\n.mod_b_nav {}\n')),Object(a.b)("h2",{id:"\u5d4c\u5957\u89c4\u8303"},"\u5d4c\u5957\u89c4\u8303"),Object(a.b)("h3",{id:"\u9009\u62e9\u5668\u5d4c\u5957"},"\u9009\u62e9\u5668\u5d4c\u5957"),Object(a.b)("pre",null,Object(a.b)("code",Object(c.a)({parentName:"pre"},{className:"language-scss"}),"/* CSS */\n.jdc {}\nbody .jdc {}\n\n/* SCSS */\n.jdc {\n body & {}\n}\n")),Object(a.b)("pre",null,Object(a.b)("code",Object(c.a)({parentName:"pre"},{className:"language-scss"}),"/* CSS */\n.jdc {}\n.jdc_cover {}\n.jdc_info {}\n.jdc_info_name {}\n\n/* SCSS */\n.jdc {\n &_cover {}\n &_info {\n &_name {}\n }\n}\n")),Object(a.b)("h3",{id:"\u5c5e\u6027\u5d4c\u5957"},"\u5c5e\u6027\u5d4c\u5957"),Object(a.b)("pre",null,Object(a.b)("code",Object(c.a)({parentName:"pre"},{className:"language-scss"}),"/* CSS */\n.jdc {\n background-color: red;\n background-repeat: no-repeat;\n background-image: url(/img/icon.png);\n background-position: 0 0;\n}\n\n/* SCSS */\n.jdc {\n background: {\n color: red;\n repeat: no-repeat;\n image: url(/img/icon.png);\n position: 0 0;\n }\n}\n")),Object(a.b)("h2",{id:"\u53d8\u91cf"},"\u53d8\u91cf"),Object(a.b)("p",null,"\u53ef\u590d\u7528\u5c5e\u6027\u5c3d\u91cf\u62bd\u79bb\u4e3a\u9875\u9762\u53d8\u91cf\uff0c\u6613\u4e8e\u7edf\u4e00\u7ef4\u62a4"),Object(a.b)("pre",null,Object(a.b)("code",Object(c.a)({parentName:"pre"},{className:"language-scss"}),"// CSS\n.jdc {\n color: red;\n border-color: red;\n}\n\n// SCSS\n$color: red;\n.jdc {\n color: $color;\n border-color: $color;\n}\n")),Object(a.b)("h2",{id:"\u6df7\u5408mixin"},"\u6df7\u5408(mixin)"),Object(a.b)("p",null,"\u6839\u636e\u529f\u80fd\u5b9a\u4e49\u6a21\u5757\uff0c\u7136\u540e\u5728\u9700\u8981\u4f7f\u7528\u7684\u5730\u65b9\u901a\u8fc7 ",Object(a.b)("inlineCode",{parentName:"p"},"@include")," \u8c03\u7528\uff0c\u907f\u514d\u7f16\u7801\u65f6\u91cd\u590d\u8f93\u5165\u4ee3\u7801\u6bb5"),Object(a.b)("pre",null,Object(a.b)("code",Object(c.a)({parentName:"pre"},{className:"language-scss"}),"// CSS\n.jdc_1 {\n -webkit-border-radius: 5px;\n border-radius: 5px;\n}\n.jdc_2 {\n -webkit-border-radius: 10px;\n border-radius: 10px;\n}\n\n// SCSS\n@mixin radius($radius:5px) {\n -webkit-border-radius: $radius;\n border-radius: $radius;\n}\n.jdc_1 {\n @include radius; //\u53c2\u6570\u4f7f\u7528\u9ed8\u8ba4\u503c\n}\n.jdc_2 {\n @include radius(10px);\n}\n\n\n\n// CSS\n.jdc_1 {\n background: url(/img/icon.png) no-repeat -10px 0;\n}\n.jdc_2 {\n background: url(/img/icon.png) no-repeat -20px 0;\n}\n\n// SCSS\n@mixin icon($x:0, $y:0) {\n background: url(/img/icon.png) no-repeat $x, $y;\n}\n.jdc_1 {\n @include icon(-10px, 0);\n}\n.jdc_2 {\n @include icon(-20px, 0);\n}\n")),Object(a.b)("h2",{id:"\u5360\u4f4d\u9009\u62e9\u5668-"},"\u5360\u4f4d\u9009\u62e9\u5668 %"),Object(a.b)("p",null,"\u5982\u679c\u4e0d\u8c03\u7528\u5219\u4e0d\u4f1a\u6709\u4efb\u4f55\u591a\u4f59\u7684 css \u6587\u4ef6\uff0c\u5360\u4f4d\u9009\u62e9\u5668\u4ee5 ",Object(a.b)("inlineCode",{parentName:"p"},"%")," \u6807\u8bc6\u5b9a\u4e49\uff0c\u901a\u8fc7 ",Object(a.b)("inlineCode",{parentName:"p"},"@extend")," \u8c03\u7528"),Object(a.b)("pre",null,Object(a.b)("code",Object(c.a)({parentName:"pre"},{className:"language-scss"}),"//scss\n%borderbox {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n.jdc {\n @extend %borderbox;\n}\n")),Object(a.b)("h2",{id:"extend-\u7ee7\u627f"},"extend \u7ee7\u627f"),Object(a.b)("pre",null,Object(a.b)("code",Object(c.a)({parentName:"pre"},{className:"language-scss"}),"// CSS\n.jdc_1 {\n font-size: 12px;\n color: red;\n}\n.jdc_2 {\n font-size: 12px;\n color: red;\n font-weight: bold;\n}\n\n// SCSS\n.jdc_1 {\n font-size: 12px;\n color: red;\n}\n.jdc_2 {\n @extend .jdc_1;\n font-weight: bold;\n}\n\n// \u6216\u8005\n%font_red {\n font-size: 12px;\n color: red;\n}\n.jdc_1 {\n @extend %font_red;\n}\n.jdc_2 {\n @extend %font_red;\n font-weight: bold;\n}\n")),Object(a.b)("h2",{id:"for-\u5faa\u73af"},"for \u5faa\u73af"),Object(a.b)("pre",null,Object(a.b)("code",Object(c.a)({parentName:"pre"},{className:"language-scss"}),"// CSS\n.jdc_1 {background-position: 0 -20px;}\n.jdc_2 {background-position: 0 -40px;}\n.jdc_3 {background-position: 0 -60px;}\n\n// SCSS\n@for $i from 1 through 3 {\n .jdc_#{$i} {\n background-position: 0 (-20px) * $i;\n }\n}\n")),Object(a.b)("p",null,"\u6ce8\u610f\uff1a",Object(a.b)("inlineCode",{parentName:"p"},"#{}")," \u662f\u8fde\u63a5\u7b26\uff0c\u53d8\u91cf\u8fde\u63a5\u4f7f\u7528\u65f6\u9700\u8981\u4f9d\u8d56"),Object(a.b)("h2",{id:"each-\u5faa\u73af"},"each \u5faa\u73af"),Object(a.b)("pre",null,Object(a.b)("code",Object(c.a)({parentName:"pre"},{className:"language-scss"}),"// CSS\n.jdc_list {\n background-image: url(/img/jdc_list.png);\n}\n.jdc_detail {\n background-image: url(/img/jdc_detail.png);\n}\n\n// SCSS\n@each $name in list, detail {\n .jdc_#{$name} {\n background-image: url(/img/jdc_#{$name}.png);\n }\n}\n\n\n// CSS\n.jdc_list {\n background-image: url(/img/jdc_list.png);\n background-color: red;\n}\n.jdc_detail {\n background-image: url(/img/jdc_detail.png);\n background-color: blue;\n}\n\n// SCSS\n@each $name, $color in (list, red), (detail, blue) {\n .jdc_#{$name} {\n background-image: url(/img/jdc_#{$name}.png);\n background-color: $color;\n }\n}\n")),Object(a.b)("h2",{id:"function-\u51fd\u6570"},"function \u51fd\u6570"),Object(a.b)("pre",null,Object(a.b)("code",Object(c.a)({parentName:"pre"},{className:"language-scss"}),"@function pxToRem($px) {\n @return $px / 10px * 1rem;\n}\n.jdc {\n font-size: pxToRem(12px);\n}\n")),Object(a.b)("h2",{id:"\u8fd0\u7b97\u89c4\u8303"},"\u8fd0\u7b97\u89c4\u8303"),Object(a.b)("p",null,"\u8fd0\u7b97\u7b26\u4e4b\u95f4\u7a7a\u51fa\u4e00\u4e2a\u7a7a\u683c"),Object(a.b)("pre",null,Object(a.b)("code",Object(c.a)({parentName:"pre"},{className:"language-scss"}),".jdc {\n width: 100px - 50px;\n height: 30px / 5;\n}\n")),Object(a.b)("p",null,"\u6ce8\u610f\u8fd0\u7b97\u5355\u4f4d\uff0c\u5355\u4f4d\u540c\u65f6\u53c2\u4e0e\u8fd0\u7b97\uff0c\u6240\u4ee5 10px \u4e0d\u7b49\u4e8e 10\uff0c\u4e58\u9664\u8fd0\u7b97\u65f6\u9700\u8981\u7279\u522b\u6ce8\u610f"),Object(a.b)("pre",null,Object(a.b)("code",Object(c.a)({parentName:"pre"},{className:"language-scss"}),"// \u6b63\u786e\u7684\u8fd0\u7b97\u683c\u5f0f\n.jdc {\n width: 100px - 50px;\n width: 100px + 50px;\n width: 100px * 2;\n width: 100px / 2;\n}\n")))}b.isMDXComponent=!0},199:function(e,n,t){"use strict";t.d(n,"a",(function(){return s})),t.d(n,"b",(function(){return S}));var c=t(0),r=t.n(c);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function o(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);n&&(c=c.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,c)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?o(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function d(e,n){if(null==e)return{};var t,c,r=function(e,n){if(null==e)return{};var t,c,r={},a=Object.keys(e);for(c=0;c<a.length;c++)t=a[c],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(c=0;c<a.length;c++)t=a[c],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var l=r.a.createContext({}),b=function(e){var n=r.a.useContext(l),t=n;return e&&(t="function"==typeof e?e(n):i({},n,{},e)),t},s=function(e){var n=b(e.components);return r.a.createElement(l.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},p=Object(c.forwardRef)((function(e,n){var t=e.components,c=e.mdxType,a=e.originalType,o=e.parentName,l=d(e,["components","mdxType","originalType","parentName"]),s=b(t),p=c,S=s["".concat(o,".").concat(p)]||s[p]||u[p]||a;return t?r.a.createElement(S,i({ref:n},l,{components:t})):r.a.createElement(S,i({ref:n},l))}));function S(e,n){var t=arguments,c=n&&n.mdxType;if("string"==typeof e||c){var a=t.length,o=new Array(a);o[0]=p;var i={};for(var d in n)hasOwnProperty.call(n,d)&&(i[d]=n[d]);i.originalType=e,i.mdxType="string"==typeof e?e:c,o[1]=i;for(var l=2;l<a;l++)o[l]=t[l];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,t)}p.displayName="MDXCreateElement"}}]);