when entering the vale "xs", i get an error saying "(max-width: 575.98px) isn't a valid CSS value."
and when entering any other value i get the following error "This Breackpoint 'sm' isn't supported yet"
is it even possible to apply this idea with SASS ?
Here is my code:
$breakpoints: (
"xs": (max-width: 575.98px),
"sm": ((min-width: 576px) and (max-width: 767.98px)),
"md": ((min-width: 768px) and (max-width: 991.98px)),
"lg": ((min-width: 992px) and (max-width: 1199.98px)),
"xl": ((min-width: 1200px) and (max-width: 1399.98px)),
"xxl": (min-width: 1400px),
);
#mixin breakpoint($user-value) {
#each $size, $value in $breakpoints{
#if $user-value == $size {
#media #{$value} {
#content;
}
}#else {
#error "This Breackpoint '#{$user-value}' isn't supported yet";
}
}
};
body {
#include breakpoint(sm) {
background-color: blue;
}
}
i wanted to minimize the number of code i'm writing with this SASS mixin
so i figured something out, check out this edited code :
$breakpoints: (
"xs": "max-width: 575.98px",
"sm": "(min-width: 576px) and (max-width: 767.98px)",
"md": "(min-width: 768px) and (max-width: 991.98px)",
"lg": "(min-width: 992px) and (max-width: 1199.98px)",
"xl": "(min-width: 1200px) and (max-width: 1399.98px)",
"xxl": "min-width: 1400px",
);
#mixin breakpoint($user-value) {
$value: map-get($breakpoints, $user-value);
#if $value {
#media (#{$value}) {
#content;
}
}#else {
#warn "This Breackpoint '#{$user-value}' isn't supported yet";
}
};
body {
#include breakpoint(xxl) {
background-color: blue;
}
}
Related
I'm trying to dynamically create a variable, but that doesn't seem to be possible in SCSS:
$res-mat-xs: 0;
$res-mat-sm: 600px;
$res-mat-md: 960px;
$res-mat-lg: 1280px;
$res-mat-xl: 1920px;
#mixin media-min($var) {
#media only screen and (min-width: $var) { #content; }
}
#mixin media-max($var) {
#media only screen and (max-width: $var - 1px) { #content; }
}
#mixin media-from-to($var1, $var2) {
#media only screen and (min-width: $var1) and (max-width: $var2 - 1px) { #content; }
}
$media: 'min', 'max', 'from-to';
$variants: 'very-small', 'small', 'default', 'large', 'very-large';
$breakpoints: 'xs', 'sm', 'md', 'lg', 'xl';
#each $breakpoint in $breakpoints {
.typo-style-#{$breakpoint}-#{$variants}-#{$breakpoint} {
#include media-min($res-mat-#{$breakpoint}) {
#include typo-style('default', 'important');
}
}
}
In addition, I am totally overwhelmed with the from-to ($media) and variants.
The class names for the from-to should look like this:
.typo-style-very-small-from-sm-to-md
.typo-style-large-from-sm-to-lg
How can I make these dynamic variables?
tailwind CSS container width in 2xl is not desired for me .
how can I change it ?
I want to remove its default width in 2xl .
How can I do it?
Add only necessary breakpoints to tailwind.config.js. Default values you can see in tailwind theme config
module.exports= {
theme: {
screens: {
'sm': '640px', // => #media (min-width: 640px) { ... }
'md': '768px', // => #media (min-width: 768px) { ... }
'lg': '1024px', // => #media (min-width: 1024px) { ... }
'xl': '1280px', // => #media (min-width: 1280px) { ... }
}
}
}
Or if you need some custom solution not directly connected with your "screens" configuration (as suggested by JHeth) you can configure container behavior separately like this:
module.exports= {
theme: {
container: {
screens: {
'sm': '100%',
'md': '100%',
'lg': '1024px',
'xl': '1280px',
'2xl': '1600px',
}
}
}
}
I am trying to add breakpoint in the mixin. And declare the breakpoint value in the variable like "$wp-breakpoints-xl: 1280;". But mixin doesn't take the variable. I have tried with interpolation like #{$wp-breakpoints-xl} but that is also not working for me. Mixin code is attached below. If anybody can help me that will be very helpful for me
#mixin wpp-breakpoint($class) {
#if $class == wp-sm
{
#media (min-width: $wp-breakpoints-m) { #content; }
}
#else if $class == wp-md
{
#media (min-width: $wp-breakpoints-l) { #content; }
}
#else if $class == wp-lg
{
#media (min-width: $wp-breakpoints-xl) { #content; }
}
#else if $class == wp-xs-only
{
#media (max-width: $wp-breakpoints-s) { #content; }
}
#else if $class == wp-sm-only
{
#media (min-width: $wp-breakpoints-m) and (max-width: $wp-breakpoints-l - 1) { #content; }
}
#else if $class == wp-md-only
{
#media (min-width: $wp-breakpoints-l) and (max-width: $wp-breakpoints-xl - 1) { #content; }
}
#else if $class == wp-mbltoipad-only
{
#media (max-width: $wp-breakpoints-l - 1) { #content; }
}
#else
{
#warn "Breakpoint mixin supports: wp-sm, wp-md, wp-lg, wp-xs-only, wp-sm-only, wp-md-only, wp-mbltoipad-only";
}
}
And variables are attached below
$wp-breakpoints-s: 749;
$wp-breakpoints-m: 750;
$wp-breakpoints-l: 1024;
$wp-breakpoints-xl: 1280;
I want to make this mixin responsive means it generate the media queries
based on breakpoints.
Here is my SCSS Code :
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
) !default;
#mixin overscroll-behavior-auto() {
-ms-scroll-chaining: chained;
overscroll-behavior: auto;
}
#mixin overscroll-behavior-contain() {
-ms-scroll-chaining: none;
overscroll-behavior: contain;
}
#mixin overscroll-behavior-none() {
-ms-scroll-chaining: none;
overscroll-behavior: none;
}
.overscroll-auto {
#include overscroll-behavior-auto();
}
.overscroll-contain {
#include overscroll-behavior-contain();
}
.overscroll-none {
#include overscroll-behavior-none();
}
#each $breakpoint in map-keys($grid-breakpoints) {
#include media-breakpoint-up($breakpoint) {}
}
I include my sass code thank you guys
Codepen
I made some modifications to the syntax of overscroll-behavior(). Mainly that its not overscroll-behavior-auto(), overscroll-behavior-contain() etc. any longer, but:
overscroll-behavior($behavior, $breakpoint);
This was necessary to not write the same code three times, since you can't generate mixins.
$overscrollBehavior: (
"auto": ["chained", "none" ],
"contain": ["none", "contain"],
"none": ["none", "none" ],
)!default;
$breakpoints: (
"xs": 0px,
"sm": 576px,
"md": 768px,
"lg": 992px,
"xl": 1200px,
"xxl": 1400px,
) !default;
#mixin overscroll-behavior($behavior, $breakpoint) {
$map: $overscrollBehavior;
#for $i from 1 through length($map) {
$label: nth(nth($map, $i), 1);
$values: nth(nth($map, $i), 2);
#if $behavior == $label {
$map: $breakpoints;
#for $i from 1 through length($map) {
$bp: nth(nth($map, $i), 1);
$bpValue: nth(nth($map, $i), 2);
#if $breakpoint == $bp {
#media (min-width: #{$bpValue}) {
-ms-scroll-chaining: unquote(nth($values, 1));
overscroll-behavior: unquote(nth($values, 2));
}
}
}
}
}
}
body {
#include overscroll-behavior(none, xs);
}
#media (min-width: 0px) {
body {
-ms-scroll-chaining: none;
overscroll-behavior: none;
}
}
If that's not quite what your looking for, let me know!
I wanted to put all my media-queries into an object, and then loop over them. It works well, but the stylus forcing my output between brackets.
My question is there were a way to remove the brackets and the quotation marks?
My code:
$maxBreakpoints = {
"0": 'and (min-width: 1701px) and (max-width: 1920px)',
"1": 'and (min-width: 1440px) and (max-width: 1700px)',
"2": 'and (min-width: 1280px) and (max-width: 1439px)',
"3": 'and (min-width: 1024px) and (max-width: 1023px)'
}
$_resolution = {
"0": 1920,
"1": 1440,
"2": 1280,
"3": 1024
}
for $i, $resolution in $maxBreakpoints
#media all $resolution
And the output of this code is:
#media all ('and (min-width: 1440px) and (max-width: 1700px)')
You need to move all into the string:
$maxBreakpoints = {
"0": 'all and (min-width: 1701px) and (max-width: 1920px)',
"1": 'all and (min-width: 1440px) and (max-width: 1700px)',
"2": 'all and (min-width: 1280px) and (max-width: 1439px)',
"3": 'all and (min-width: 1024px) and (max-width: 1023px)'
}
$_resolution = {
"0": 1920,
"1": 1440,
"2": 1280,
"3": 1024
}
for $i, $resolution in $maxBreakpoints
#media $resolution