@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-responsiveImport
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-mobilewith default value612px -
$breakpoint-tabletwith default value912px -
$breakpoint-laptopwith 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%;
}
}