@ashetm/sass-mixins-responsive

Some responsive utilities Sass mixins for your needs. Take what you need!

Install

You can install it with npm:

npm install @ashetm/sass-mixins-responsive

Import

You only need to import @ashetm/sass-mixins-responsive.

@import '@ashetm/sass-mixins-responsive';

or, if you want to override the breakpoint value(s)

@use '@ashetm/sass-mixins-responsive' as *;

$breakpoint-mobile: 500px;
$breakpoint-tablet: 800px;
$breakpoint-laptop: 1000px;

Usage

Variables

There is 3 variables that can be overriden:

• $breakpoint-mobile with default value 612px
• $breakpoint-tablet with default value 912px
• $breakpoint-laptop with no default value

Mixins

for-mobile

Example:

.selector {
  @include for-mobile {
    width: 100%;
  }
}

gives in output:

@media all and (min-width: <$breakpoint-mobile: 612px>) {
  .selector {
    width: 100%;
  }
}

for-tablet

Example:

.selector {
  @include for-tablet {
    width: 100%;
  }
}

gives in output:

@media all and (min-width: <$breakpoint-mobile + 1: 613px>) and (max-width: <$breakpoint-tablet: 912px>) {
  .selector {
    width: 100%;
  }
}

for-laptop

Example:

.selector {
  @include for-laptop {
    width: 100%;
  }
}

gives in output:

/* If ``$breakpoint-laptop`` is given */
@media all and (min-width: <$breakpoint-tablet + 1: 913px>) and (max-width: <$breakpoint-laptop: 912px>) {
  .selector {
    width: 100%;
  }
}

/* If ``$breakpoint-laptop`` is not given */
@media all and (min-width: <$breakpoint-tablet + 1: 913px>) {
  .selector {
    width: 100%;
  }
}

for-huge-screen

NB: If $breakpoint-laptop is given, this mixin will be available otherwise it will throw an error.

Example:

.selector {
  @include for-huge-screen {
    width: 100%;
  }
}

gives in output:

/* If ``$breakpoint-laptop`` is given */
@media all and (min-width: <$breakpoint-laptop + 1>) {
  .selector {
    width: 100%;
  }
}

at-least

Example:

.selector {
  @include at-least(<$value>, <$device: screen>) {
    width: 100%;
  }
}

gives in output:

@media <$device: screen> and (min-width: <$value>) {
  .selector {
    width: 100%;
  }
}

between

Example:

.selector {
  @include between(<$min>, <$max>, <$device: screen>) {
    width: 100%;
  }
}

gives in output:

@media <$device: screen> and (min-width: <$min>) and (max-width: <$max>) {
  .selector {
    width: 100%;
  }
}

at-most

Example:

.selector {
  @include at-most(<$value>, <$device: screen>) {
    width: 100%;
  }
}

gives in output:

@media <$device: screen> and (max-width: <$value>) {
  .selector {
    width: 100%;
  }
}