[{"data":1,"prerenderedAt":683},["ShallowReactive",2],{"navigation_docs_en":3,"-en-mixins-use-fluid-prop":131,"-en-mixins-use-fluid-prop-surround":678},[4,34,127],{"title":5,"path":6,"stem":7,"children":8,"page":33},"Functions","\u002Fen\u002Ffunctions","en\u002F100.functions",[9,13,17,21,25,29],{"title":10,"path":11,"stem":12},"color","\u002Fen\u002Ffunctions\u002Fcolor","en\u002F100.functions\u002F110.color",{"title":14,"path":15,"stem":16},"list","\u002Fen\u002Ffunctions\u002Flist","en\u002F100.functions\u002F120.list",{"title":18,"path":19,"stem":20},"math","\u002Fen\u002Ffunctions\u002Fmath","en\u002F100.functions\u002F130.math",{"title":22,"path":23,"stem":24},"responsive","\u002Fen\u002Ffunctions\u002Fresponsive","en\u002F100.functions\u002F135.responsive",{"title":26,"path":27,"stem":28},"meta","\u002Fen\u002Ffunctions\u002Fmeta","en\u002F100.functions\u002F140.meta",{"title":30,"path":31,"stem":32},"string","\u002Fen\u002Ffunctions\u002Fstring","en\u002F100.functions\u002F150.string",false,{"title":35,"path":36,"stem":37,"children":38,"page":33},"Mixins","\u002Fen\u002Fmixins","en\u002F200.mixins",[39,43,47,51,55,59,63,67,71,75,79,83,87,91,95,99,103,107,111,115,119,123],{"title":40,"path":41,"stem":42},"bem-modifiers","\u002Fen\u002Fmixins\u002Fbem-modifiers","en\u002F200.mixins\u002F210.bem-modifiers",{"title":44,"path":45,"stem":46},"border-radius","\u002Fen\u002Fmixins\u002Fborder-radius","en\u002F200.mixins\u002F215.border-radius",{"title":48,"path":49,"stem":50},"box","\u002Fen\u002Fmixins\u002Fbox","en\u002F200.mixins\u002F220.box",{"title":52,"path":53,"stem":54},"br","\u002Fen\u002Fmixins\u002Fbr","en\u002F200.mixins\u002F225.br",{"title":56,"path":57,"stem":58},"ellipsis","\u002Fen\u002Fmixins\u002Fellipsis","en\u002F200.mixins\u002F235.ellipsis",{"title":60,"path":61,"stem":62},"font","\u002Fen\u002Fmixins\u002Ffont","en\u002F200.mixins\u002F240.font",{"title":64,"path":65,"stem":66},"full-size","\u002Fen\u002Fmixins\u002Ffull-size","en\u002F200.mixins\u002F245.full-size",{"title":68,"path":69,"stem":70},"hidden-element","\u002Fen\u002Fmixins\u002Fhidden-element","en\u002F200.mixins\u002F250.hidden-element",{"title":72,"path":73,"stem":74},"hide-scrollbar","\u002Fen\u002Fmixins\u002Fhide-scrollbar","en\u002F200.mixins\u002F251.hide-scrollbar",{"title":76,"path":77,"stem":78},"margin","\u002Fen\u002Fmixins\u002Fmargin","en\u002F200.mixins\u002F255.margin",{"title":80,"path":81,"stem":82},"padding","\u002Fen\u002Fmixins\u002Fpadding","en\u002F200.mixins\u002F260.padding",{"title":84,"path":85,"stem":86},"parent-state","\u002Fen\u002Fmixins\u002Fparent-state","en\u002F200.mixins\u002F265.parent-state",{"title":88,"path":89,"stem":90},"pos","\u002Fen\u002Fmixins\u002Fpos","en\u002F200.mixins\u002F270.pos",{"title":92,"path":93,"stem":94},"pseudo","\u002Fen\u002Fmixins\u002Fpseudo","en\u002F200.mixins\u002F275.pseudo",{"title":96,"path":97,"stem":98},"reset-button","\u002Fen\u002Fmixins\u002Freset-button","en\u002F200.mixins\u002F280.reset-button",{"title":100,"path":101,"stem":102},"reset-input","\u002Fen\u002Fmixins\u002Freset-input","en\u002F200.mixins\u002F285.reset-input",{"title":104,"path":105,"stem":106},"transform-center","\u002Fen\u002Fmixins\u002Ftransform-center","en\u002F200.mixins\u002F290.transform-center",{"title":108,"path":109,"stem":110},"triangle","\u002Fen\u002Fmixins\u002Ftriangle","en\u002F200.mixins\u002F295.triangle",{"title":112,"path":113,"stem":114},"use-fluid-font","\u002Fen\u002Fmixins\u002Fuse-fluid-font","en\u002F200.mixins\u002F300.use-fluid-font",{"title":116,"path":117,"stem":118},"use-fluid-prop","\u002Fen\u002Fmixins\u002Fuse-fluid-prop","en\u002F200.mixins\u002F305.use-fluid-prop",{"title":120,"path":121,"stem":122},"use-transition","\u002Fen\u002Fmixins\u002Fuse-transition","en\u002F200.mixins\u002F310.use-transition",{"title":124,"path":125,"stem":126},"visually-hidden","\u002Fen\u002Fmixins\u002Fvisually-hidden","en\u002F200.mixins\u002F315.visually-hidden",{"title":128,"path":129,"stem":130},"Variables","\u002Fen\u002Fvariables","en\u002F300.variables",{"id":132,"title":116,"body":133,"description":672,"extension":673,"links":674,"meta":675,"navigation":293,"path":117,"seo":676,"stem":118,"__hash__":677},"docs_en\u002Fen\u002F200.mixins\u002F305.use-fluid-prop.md",{"type":134,"value":135,"toc":667},"minimark",[136,147,156,161,242,246,454,458,663],[137,138,139,140,146],"p",{},"See ",[141,142,143],"a",{"href":143,"rel":144},"https:\u002F\u002Fwww.madebymike.com.au\u002Fwriting\u002Ffluid-type-calc-examples\u002F",[145],"nofollow",".",[148,149,150,151,155],"note",{},"This mixin is kept for backward compatibility.\nFor new code, prefer ",[152,153,154],"code",{},"use-fluid-value",": the function keeps the value inside a CSS declaration,\nwhich preserves editor, linter, and tooling integration, and is closer to native CSS functions\nthat will eventually land in CSS.\nThe higher-order mixin or function pattern is still useful: use it to set project breakpoints\nand reduce boilerplate.",[157,158,160],"h2",{"id":159},"arguments","Arguments",[162,163,164,183],"table",{},[165,166,167],"thead",{},[168,169,170,174,177,180],"tr",{},[171,172,173],"th",{},"Name",[171,175,176],{},"Type",[171,178,179],{},"Default",[171,181,182],{},"Description",[184,185,186,208,225],"tbody",{},[168,187,188,198,202,205],{},[189,190,191,192],"td",{},"$property ",[193,194,197],"span",{"className":195},[196],"text-red-600","*",[189,199,200],{},[152,201,30],{},[189,203,204],{},"—",[189,206,207],{},"Property name.",[168,209,210,216,220,222],{},[189,211,212,213],{},"$start ",[193,214,197],{"className":215},[196],[189,217,218],{},[152,219,14],{},[189,221,204],{},[189,223,224],{},"The list containing start values of screen width and property.",[168,226,227,233,237,239],{},[189,228,229,230],{},"$end ",[193,231,197],{"className":232},[196],[189,234,235],{},[152,236,14],{},[189,238,204],{},[189,240,241],{},"The list containing end values of screen width and property.",[157,243,245],{"id":244},"example","Example",[247,248,249,368],"code-group",{},[250,251,257],"pre",{"className":252,"code":253,"filename":254,"language":255,"meta":256,"style":256},"language-scss shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@use 'more-sass' as more;\n\n.element {\n  @include more.use-fluid-prop('margin-block-end', (320px, 20px), (1280px, 60px));\n}\n","SCSS","scss","",[152,258,259,288,295,307,362],{"__ignoreMap":256},[193,260,263,267,271,275,278,281,285],{"class":261,"line":262},"line",1,[193,264,266],{"class":265},"s7zQu","@use",[193,268,270],{"class":269},"sMK4o"," '",[193,272,274],{"class":273},"sfazB","more-sass",[193,276,277],{"class":269},"'",[193,279,280],{"class":265}," as",[193,282,284],{"class":283},"sTEyZ"," more",[193,286,287],{"class":269},";\n",[193,289,291],{"class":261,"line":290},2,[193,292,294],{"emptyLinePlaceholder":293},true,"\n",[193,296,298,300,304],{"class":261,"line":297},3,[193,299,146],{"class":269},[193,301,303],{"class":302},"sBMFI","element",[193,305,306],{"class":269}," {\n",[193,308,310,313,315,317,320,323,325,328,330,333,335,339,341,344,347,349,351,354,356,359],{"class":261,"line":309},4,[193,311,312],{"class":265},"  @include",[193,314,284],{"class":283},[193,316,146],{"class":269},[193,318,116],{"class":319},"s2Zo4",[193,321,322],{"class":269},"(",[193,324,277],{"class":269},[193,326,327],{"class":273},"margin-block-end",[193,329,277],{"class":269},[193,331,332],{"class":283},", ",[193,334,322],{"class":269},[193,336,338],{"class":337},"sbssI","320px",[193,340,332],{"class":283},[193,342,343],{"class":337},"20px",[193,345,346],{"class":269},")",[193,348,332],{"class":283},[193,350,322],{"class":269},[193,352,353],{"class":337},"1280px",[193,355,332],{"class":283},[193,357,358],{"class":337},"60px",[193,360,361],{"class":269},"));\n",[193,363,365],{"class":261,"line":364},5,[193,366,367],{"class":269},"}\n",[250,369,374],{"className":370,"code":371,"filename":372,"language":373,"meta":256,"style":256},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".element {\n  margin-block-end: clamp(20px, calc(20px + 40 * (100vi - 320px) \u002F 960), 60px);\n}\n","Output","css",[152,375,376,384,450],{"__ignoreMap":256},[193,377,378,380,382],{"class":261,"line":262},[193,379,146],{"class":269},[193,381,303],{"class":302},[193,383,306],{"class":269},[193,385,386,390,393,396,398,400,403,406,408,410,413,416,419,422,425,428,431,433,437,440,443,446,448],{"class":261,"line":290},[193,387,389],{"class":388},"sqsOY","  margin-block-end",[193,391,392],{"class":269},":",[193,394,395],{"class":319}," clamp",[193,397,322],{"class":269},[193,399,343],{"class":337},[193,401,402],{"class":269},",",[193,404,405],{"class":319}," calc",[193,407,322],{"class":269},[193,409,343],{"class":337},[193,411,412],{"class":269}," +",[193,414,415],{"class":337}," 40",[193,417,418],{"class":269}," *",[193,420,421],{"class":283}," (",[193,423,424],{"class":337},"100vi",[193,426,427],{"class":269}," -",[193,429,430],{"class":337}," 320px",[193,432,346],{"class":269},[193,434,436],{"class":435},"sHdIc"," \u002F",[193,438,439],{"class":337}," 960",[193,441,442],{"class":269},"),",[193,444,445],{"class":337}," 60px",[193,447,346],{"class":283},[193,449,287],{"class":269},[193,451,452],{"class":261,"line":297},[193,453,367],{"class":269},[157,455,457],{"id":456},"example-as-high-order-mixin","Example as high order mixin",[247,459,460,599],{},[250,461,463],{"className":252,"code":462,"filename":254,"language":255,"meta":256,"style":256},"\u002F\u002F setup.scss\n@use 'more-sass' as more;\n\n@mixin fluid-prop($property, $min, $max) {\n  @include more.use-fluid-prop($property, (320px, $min), (1280px, $max));\n}\n\n\u002F\u002F Other files\n.element {\n  @include fluid-prop('margin-block-end', 20px, 60px);\n}\n",[152,464,465,471,487,491,508,543,548,553,559,568,594],{"__ignoreMap":256},[193,466,467],{"class":261,"line":262},[193,468,470],{"class":469},"sHwdD","\u002F\u002F setup.scss\n",[193,472,473,475,477,479,481,483,485],{"class":261,"line":290},[193,474,266],{"class":265},[193,476,270],{"class":269},[193,478,274],{"class":273},[193,480,277],{"class":269},[193,482,280],{"class":265},[193,484,284],{"class":283},[193,486,287],{"class":269},[193,488,489],{"class":261,"line":297},[193,490,294],{"emptyLinePlaceholder":293},[193,492,493,496,499,501,504,506],{"class":261,"line":309},[193,494,495],{"class":265},"@mixin",[193,497,498],{"class":319}," fluid-prop",[193,500,322],{"class":269},[193,502,503],{"class":283},"$property, $min, $max",[193,505,346],{"class":269},[193,507,306],{"class":269},[193,509,510,512,514,516,518,520,523,525,527,530,532,534,536,538,541],{"class":261,"line":364},[193,511,312],{"class":265},[193,513,284],{"class":283},[193,515,146],{"class":269},[193,517,116],{"class":319},[193,519,322],{"class":269},[193,521,522],{"class":283},"$property, ",[193,524,322],{"class":269},[193,526,338],{"class":337},[193,528,529],{"class":283},", $min",[193,531,346],{"class":269},[193,533,332],{"class":283},[193,535,322],{"class":269},[193,537,353],{"class":337},[193,539,540],{"class":283},", $max",[193,542,361],{"class":269},[193,544,546],{"class":261,"line":545},6,[193,547,367],{"class":269},[193,549,551],{"class":261,"line":550},7,[193,552,294],{"emptyLinePlaceholder":293},[193,554,556],{"class":261,"line":555},8,[193,557,558],{"class":469},"\u002F\u002F Other files\n",[193,560,562,564,566],{"class":261,"line":561},9,[193,563,146],{"class":269},[193,565,303],{"class":302},[193,567,306],{"class":269},[193,569,571,573,575,577,579,581,583,585,587,589,591],{"class":261,"line":570},10,[193,572,312],{"class":265},[193,574,498],{"class":319},[193,576,322],{"class":269},[193,578,277],{"class":269},[193,580,327],{"class":273},[193,582,277],{"class":269},[193,584,332],{"class":283},[193,586,343],{"class":337},[193,588,332],{"class":283},[193,590,358],{"class":337},[193,592,593],{"class":269},");\n",[193,595,597],{"class":261,"line":596},11,[193,598,367],{"class":269},[250,600,601],{"className":370,"code":371,"filename":372,"language":373,"meta":256,"style":256},[152,602,603,611,659],{"__ignoreMap":256},[193,604,605,607,609],{"class":261,"line":262},[193,606,146],{"class":269},[193,608,303],{"class":302},[193,610,306],{"class":269},[193,612,613,615,617,619,621,623,625,627,629,631,633,635,637,639,641,643,645,647,649,651,653,655,657],{"class":261,"line":290},[193,614,389],{"class":388},[193,616,392],{"class":269},[193,618,395],{"class":319},[193,620,322],{"class":269},[193,622,343],{"class":337},[193,624,402],{"class":269},[193,626,405],{"class":319},[193,628,322],{"class":269},[193,630,343],{"class":337},[193,632,412],{"class":269},[193,634,415],{"class":337},[193,636,418],{"class":269},[193,638,421],{"class":283},[193,640,424],{"class":337},[193,642,427],{"class":269},[193,644,430],{"class":337},[193,646,346],{"class":269},[193,648,436],{"class":435},[193,650,439],{"class":337},[193,652,442],{"class":269},[193,654,445],{"class":337},[193,656,346],{"class":283},[193,658,287],{"class":269},[193,660,661],{"class":261,"line":297},[193,662,367],{"class":269},[664,665,666],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":256,"searchDepth":290,"depth":290,"links":668},[669,670,671],{"id":159,"depth":290,"text":160},{"id":244,"depth":290,"text":245},{"id":456,"depth":290,"text":457},"Sets a given property scaling uniformly within the specified limits depending on the screen width.","md",null,{},{"title":116,"description":672},"12imqClfTM55vGuLrgbmQGtP2DsMcnOJCROOE2lVtTA",[679,681],{"title":112,"path":113,"stem":114,"description":680,"children":-1},"Sets the font properties (font-size and line-height) scaling uniformly within the specified limits depending on the screen width.",{"title":120,"path":121,"stem":122,"description":682,"children":-1},"High order mixin to reduce boilerplate code for \"default\" transitions.",1783604653425]