Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
@ashetm/sass-mixins-responsive
Advanced tools
Readme
Some responsive utilities Sass mixins for your needs. Take what you need!
You can install it with npm:
npm install @ashetm/sass-mixins-responsive
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;
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 valueExample:
.selector {
@include for-mobile {
width: 100%;
}
}
gives in output:
@media all and (min-width: <$breakpoint-mobile: 612px>) {
.selector {
width: 100%;
}
}
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%;
}
}
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%;
}
}
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%;
}
}
Example:
.selector {
@include at-least(<$value>, <$device: screen>) {
width: 100%;
}
}
gives in output:
@media <$device: screen> and (min-width: <$value>) {
.selector {
width: 100%;
}
}
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%;
}
}
Example:
.selector {
@include at-most(<$value>, <$device: screen>) {
width: 100%;
}
}
gives in output:
@media <$device: screen> and (max-width: <$value>) {
.selector {
width: 100%;
}
}
FAQs
Some responsive utilities Sass mixins for your needs. Take what you need!
The npm package @ashetm/sass-mixins-responsive receives a total of 1 weekly downloads. As such, @ashetm/sass-mixins-responsive popularity was classified as not popular.
We found that @ashetm/sass-mixins-responsive demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.