Fluid-width

This mixin allows you to set a fluid width from a minimum and maximum value.

How to use it

_partial.scss


@use "sailorcss" as s;


// example with breakpoint prefixes (values in $s-breakpoints required)
h2 {
  @include s.fluid-width(sm, xl, 120px, 200px);
}


// example with pixels viewport values
h3 {
   @include s.fluid-width(640px, 1440px, 120px, 200px);
 }

For the above example, the return width will be :

- 120px for a 0 to 640px viewport.
- From 640px to 1440px, it will be fluid from 120px to 200px, based on the screen width.
- Then, for 1440px and up, the width will stay at 200px.

Usage on svg tag

This mixin is very helpful to set the size of an SVG. Just add the SVG viewbox on your SVG tag and let the magic happen.

navbar.html


   <svg viewBox="0 0 218 49" class="my-logo">
      <use xlink:href="#svg-logo"></use> // svg content or ref to SVG sprite
   </svg>

_partial.scss


   .my-logo {
      @include s.fluid-width(sm, xl, 120px, 200px);
   }

Mixin arguments

@include s.fluid-width($min-bp, $max-bp, $min-width, $max-width)

$min-bp

The minimum breakpoint that your width will become "fluid".
The value can be a string like "sm" or "md" from your $s-breakpoints in config.scss or a pixel value like 600px or 1200px.

$max-bp

The maximum breakpoint that your width will stay at the biggest value.
The value can be a string like "xl" or "xxl" from your $s-breakpoints in config.scss or a pixel value like 1200px or 1400px.

$min-width

The minimum value for your width. This size will be used on screens smaller to your $min-bp value.

$max-width

The maximum value for your width. This size will be used on screens bigger or equal to your $max-bp value.