{"id":6115,"date":"2020-05-27T14:01:27","date_gmt":"2020-05-27T13:01:27","guid":{"rendered":"https:\/\/www.bronco.co.uk\/our-ideas\/?p=6115"},"modified":"2022-06-07T09:02:27","modified_gmt":"2022-06-07T08:02:27","slug":"creating-a-clamp-fallback-function-in-sass-scss","status":"publish","type":"post","link":"https:\/\/www.bronco.co.uk\/our-ideas\/creating-a-clamp-fallback-function-in-sass-scss\/","title":{"rendered":"Creating a clamp() fallback function in Sass\/SCSS"},"content":{"rendered":"\n

Rather than using calc()<\/code> and media queries to create fluid elements within min\/max allowable values, on a new project I wanted to determine whether the new CSS functions of min()<\/code>, max()<\/code> and clamp()<\/code> could be used instead.<\/p>\n\n\n\n

Browser support is pretty good across all modern browsers, though clamp()<\/code> isn\u2019t available in all but the very latest version of Safari (at time of writing). With that in mind, I wanted to ensure suitable fallbacks were in place. The result was the following\u2026<\/p>\n\n\n\n

font-size:24px; font-size:min(max(12px, 3vw), 24px); font-size:clamp(12px,3vw,24px);<\/code><\/pre><\/div>\n\n\n\n
I didn\u2019t want to discount older browsers like IE11 and Opera Mini completely as they don\u2019t support any of these new functions at all, hence the standard font-size fallback.<\/p>\n\n\n\n
It might be overkill to also provide a fallback for browsers that do support min()<\/code> and max()<\/code> but not clamp()<\/code> through combining the min()<\/code> and max()<\/code> functions together, but as this is my first foray into using these on a live project I decided an element of caution was ok.<\/p>\n\n\n\n
Min what? Max where? Clamp who?<\/h2>\n\n\n\n
If you\u2019re unaware of the min()<\/code>, max()<\/code> and clamp()<\/code> functions, they work like this\u2026<\/p>\n\n\n\n
padding-top:min(10vw, 100px); padding-top:max(10vw, 100px);<\/code><\/pre><\/div>\n\n\n\n
Essentially the max()<\/code> function determines which of the two values is the largest and uses that. In the example above we\u2019re specifying 100px as the maximum value padding-top can be, so if 10vw becomes less than this the browser will set the value as 100px, otherwise it will be whatever 10vw could be, which on a 2000px viewport would be 200px.<\/p>\n\n\n\n
min()<\/code> works the opposite way, selecting the smallest amount below the maximum allowable value we set.<\/p>\n\n\n\n
padding-top:clamp(100px, 10vw, 200px);<\/code><\/pre><\/div>\n\n\n\n
For clamp()<\/code> we include three parameters (min, value, max). The value is the one the browser will look to first, this is what we want padding-top to be in this case, however if that value becomes smaller than the first parameter, or larger than the last parameter then the browser will use the appropriate min or max value.<\/p>\n\n\n\n
Using Sass\/Scss<\/h2>\n\n\n\n
One challenge came when attempting to use the min()<\/code> and max()<\/code> functions with Sass. As Sass already had a min()<\/code> and max()<\/code> functions the use of the standard CSS min()<\/code> function would cause an error. While different solutions were offered through the web, ultimately, the following was the solution I needed\u2026<\/p>\n\n\n\n
padding-top:#{"min(100px,10vw)"};\n\/* or *\/\npadding-top:#{"min(max(100px, 10vw), 200px)"}<\/code><\/pre><\/div>\n\n\n\n
Not being able to use the function as standard was a bit of a pain really, but it did help lead me towards to creating a mixin to simplify doing this and more, at least when it came to using clamp()<\/code>.<\/p>\n\n\n\n
The Mixin<\/h2>\n\n\n\n
@mixin clamp($property, $min-size, $scaler, $max-size, $min-size-left:false, $scaler-left:false, $max-size-left:false){\n  @if $min-size-left == false {\n    #{$property}:$max-size; \n    #{$property}:#{"min(max(#{$min-size}, #{$scaler}), #{$max-size})"}; \n    #{$property}:clamp($min-size, $scaler, $max-size);\n  } @else if $min-size-left == 0 or $min-size-left == auto{\n    #{$property}:$max-size $min-size-left; \n    #{$property}:#{"min(max(#{$min-size}, #{$scaler}), #{$max-size})"} $min-size-left;\n    #{$property}:clamp($min-size, $scaler, $max-size) $min-size-left;\n  } @else {\n    #{$property}:$max-size $min-size-left; \n    #{$property}:#{"min(max(#{$min-size}, #{$scaler}), #{$max-size})"} #{"min(max(#{$min-size-left}, #{$scaler-left}), #{$max-size-left})"}; \n    #{$property}:clamp($min-size, $scaler, $max-size) clamp($min-size-left, $scaler-left, $max-size-left);\n  }\n}<\/code><\/pre><\/div>\n\n\n\n
This mixin function allows the following use cases\u2026<\/p>\n\n\n\n
\/* Simple one value *\/\n@include clamp('font-size',12px,3vw,24px);\n\n\/* Which outputs... *\/\nfont-size:24px; font-size:min(max(12px, 3vw), 24px); font-size:clamp(12px,3vw,24px);\n\n\n\/* Margin-top simple one value *\/\n@include clamp('margin-top',100px,10vw,200px);\n\n\/* Which outputs... *\/\nmargin-top:100px; margin-top:min(max(100px, 10vw), 200px); margin-top:clamp(100px,10vw,200px);\n\n\n\/* Margin shorthand [value] [0\/auto] *\/\n@include clamp('margin',100px,10vw,200px,0);\n\n\/* Which outputs... *\/\nmargin:200px 0; margin:min(max(100px, 10vw), 200px) 0; margin:clamp(100px,10vw,200px) 0;\n\/* * Unfortunately margin:[0\/auto] [value] isn\u2019t supported.*\/\n\n\n\/* Margin shorthand with values for top\/bottom & left\/right *\/\n@include clamp('margin',100px,10vw,200px,50px,5wv,100px);\n\n\/* Which outputs... *\/\nmargin:200px 100px; margin:min(max(100px, 10vw), 200px) min(max(50px, 5vw), 100px); margin:clamp(100px,10vw,200px) clamp(50px,5vw,100px);<\/code><\/pre><\/div>\n\n\n\n
In addition to providing the fallbacks shown in the first code example of this article, the mixin also allows you to specify the property you want to use as well as handle shorthand values where you\u2019re passing one or two values.<\/p>\n\n\n\n
In future I may drop the min()<\/code>\/max()<\/code> reference in favour of clamp()<\/code> only, but for now it\u2019s a useful little function to quickly author fluid measurements with appropriate fallbacks.<\/p>\n","protected":false},"excerpt":{"rendered":"
Rather than using calc() and media queries to create fluid elements within min\/max allowable values, on a new project I wanted to determine whether the new CSS functions of min(), max() and clamp() could be used instead. Browser support is pretty good across all modern browsers, though clamp() isn\u2019t available in all but the very […]<\/p>\n","protected":false},"author":2,"featured_media":6116,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"class_list":["post-6115","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-and-ux"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/posts\/6115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/comments?post=6115"}],"version-history":[{"count":0,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/posts\/6115\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/media\/6116"}],"wp:attachment":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/media?parent=6115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/categories?post=6115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}