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
Related
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;
}
}
Here is my Tailwindcss version 3.0.24.
I want to create a prefix css class like this:
<div class="myTestVariant:text-red-600">hello world</div>
and try to complie css by Tailwindcss like:
#media (max-width: 400px) {
myTestVariant\:text-red-600:active {
color: rgb(220, 38, 38, var(1));
// color may setted by tailwind.config.js
}
}
#media (min-width: 401px) {
myTestVariant\:text-red-600:hover {
color: rgb(220, 38, 38, var(1));
// color may setted by tailwind.config.js
}
}
And I tried to use addVariant to customize my variant. Here is my tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
content: [
'./index.html',
'./src/**/*.{vue,js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [
plugin(function({ addVariant, e, postcss }) {
addVariant('myTestVariant', ({container, separator }) => {
const supportsRule1 = postcss.atRule({ name: 'media', params: 'screen and (min-width: 401px)' })
const supportsRule2 = postcss.atRule({ name: 'media', params: 'screen and (max-width: 400px)' })
supportsRule1.append(container.nodes)
supportsRule2.append(container.nodes)
container.append(supportsRule1)
container.append(supportsRule2)
supportsRule1.walkRules(rule => {
rule.selector = `.${e(`myTestVariant${separator}`)}${rule.selector.slice(1)}:active`
})
supportsRule2.walkRules(rule => {
rule.selector = `.${e(`myTestVariant${separator}`)}${rule.selector.slice(1)}:hover`
})
})
}),
],
}
Actually, it doesn't work.
But when I only add one media queries, it's work.
const plugin = require('tailwindcss/plugin')
module.exports = {
content: [
'./index.html',
'./src/**/*.{vue,js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [
plugin(function({ addVariant, e, postcss }) {
addVariant('myTestVariant', ({container, separator }) => {
const supportsRule1 = postcss.atRule({ name: 'media', params: 'screen and (min-width: 401px)' })
supportsRule1.append(container.nodes)
container.append(supportsRule1)
supportsRule1.walkRules(rule => {
rule.selector = `.${e(`myTestVariant${separator}`)}${rule.selector.slice(1)}:active`
})
})
}),
],
}
I think the problem is: I am not familiar with postCss API.
Can someone do me a favor? please.
You can add the custom screen breakpoint in the tailwind.config.js as follows:
module.exports = {
theme: {
screens: {
//like you can add extra-extra-small screen as
'xxs': '400px',
// => #media (min-width: 400px) { ... }
'xs': '401px',
// => #media (min-width: 401px) { ... }
'sm': '640px',
// => #media (min-width: 640px) { ... }
'md': '768px',
// => #media (min-width: 768px) { ... }
'lg': '1024px',
// => #media (min-width: 1024px) { ... }
'xl': '1280px',
// => #media (min-width: 1280px) { ... }
'2xl': '1536px',
// => #media (min-width: 1536px) { ... }
}
}
}
You can find more here https://tailwindcss.com/docs/screens#adding-smaller-breakpoints
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;