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!
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?
I'm very new to the (I guess) more advanced features of SASS. Referencing this article I've been able to create a SASS setup that lets me easily do dark mode theming! I'd like to reduce the amount of CSS it generates, however, and wanted to know if I've reached the limit of my knowledge or just what SASS/CSS is capable of.
I have this map of "themes":
$themes: (
light: (
primaryOne: #f0f,
primaryTwo: #0ff
),
dark: (
primaryOne: #000,
primaryTwo: #111
)
);
I have these mixins/functions that were mostly lifted from the article:
#mixin themify($themes: $themes) {
#each $theme, $map in $themes {
$theme-map: () !global;
#each $key, $submap in $map {
$value: map-get(map-get($themes, $theme), '#{$key}');
$theme-map: map-merge($theme-map, ($key: $value)) !global;
}
#if $theme == dark {
#media (prefers-color-scheme: dark) {
#content;
}
} #else {
#content;
}
$theme-map: null !global;
}
}
#function themed($key) {
#return map-get($theme-map, $key);
}
And finally a custom mixin and the class where I'm using it:
#mixin set-color-primary {
#include themify($themes) {
color: themed('primaryOne');
}
}
.foo-container div {
#include set-color-primary;
}
Finally this generates CSS like the following:
.foo-container div {
color: #f0f;
}
#media (prefers-color-scheme: dark) {
.foo-container div {
color: #000;
}
}
I was hoping I could squeeze out a few more lines and get something more like:
.foo-container div {
color: #f0f;
#media (prefers-color-scheme: dark) {
color: #000;
}
}
Is this a limitation of my SASS knowledge or is this not possible in plain CSS?
I want to generate media queries grids having the below format:
I use a first large/desktop approach, with floats. It is intentional used instead of mobile-first approach.
#media (max-width: 36em) {
.col-1#sm {
width: 25%; }
.col-2#sm {
width: 50%; }
.col-3#sm {
width: 75%; }
.col-4#sm {
width: 100%; }
}
starting from the following grid-config map:
$grid-config: (
lg: (
width: em(960px),
columns: 16,
gutter-horizontal: rem(8px)
),
md: (
width: em(768px),
columns: 8,
gutter-horizontal: rem(8px)
),
sm: (
width: em(568px),
columns: 4,
gutter-horizontal: rem(8px)
),
);
For the first element in the map(lg) I don't want to add a media query.
The first element can change, so I don't want to do a string check (if bp !=='lg') if possible(not like in my code)
I have the following mixin to generate media-query:
#mixin media-breakpoint($bp) {
$columns: get-grid($bp, columns) !global;
#if $bp != 'lg2' {
#media (max-width: get-grid($bp, width)) {
#content
}
} #else {
#content
}
}
and another mixin to generate grid:
#mixin grid-generator {
#each $key, $value in $grid-config {
$bp: $key !global;
&--#{$key} {
#content;
}
}
}
Then I use:
.col {
#include grid-generator {
#include media-breakpoint($bp) {
$grid-columns: get-grid($bp, 'columns');
#for $i from 1 through $grid-columns {
&-#{$i} {
width: 100%/$grid-columns * $i;
}
}
}
}
}
but this generates the following format col--sm-1 and not col-1#sm.
The problems I have:
keep the cols inside media queryset, and add the media at the end.
compare to first in grid-config dynamic, check if $bp == first in map, instead of lg
I'm trying to get only the containers grid from bootstrap4 grid system but I have an error on compiling and I really don't understand why :|
so this is the my custom scss file:
$grid-gutter-width: 30px !default;
$enable-grid-classes: true !default;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
) !default;
#mixin make-container() {
width: 100%;
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
margin-right: auto;
margin-left: auto;
}
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the #content apply to the given breakpoint and wider.
#mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
#if $min {
#media (min-width: $min) {
#content;
}
} #else {
#content;
}
}
// For each breakpoint, define the maximum width of the container in a media query
#mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
#each $breakpoint, $container-max-width in $max-widths {
#include media-breakpoint-up($breakpoint, $breakpoints) {
max-width: $container-max-width;
}
}
}
#if $enable-grid-classes {
.container {
#include make-container();
#include make-container-max-widths();
}
}
#if $enable-grid-classes {
.container-fluid {
#include make-container();
}
}
and this is the error:
(xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) isn't a valid CSS value.
This should be compiled in some media-queries with given variables but
somewhere the movie is broken and ... so please give me a hint or something :|
I am using https://www.sassmeister.com/ for online compiling.
Your sass is missing a required function breakpoint-min used in the media-breakpoint-up mixin. It's located in the mixins/_breakpoints.scss file around line 26 of the latest Bootstrap source files (Nov/2018)
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// 576px
#function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
#return if($min != 0, $min, null);
}
You've likely already found out since 11 months ago but I'll leave it here for anyone else to know to carefully read copied code and check for any required or missing functions, variables or mixins.
Here is the fixed code, I've test and works:
$grid-gutter-width: 30px !default;
$enable-grid-classes: true !default;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
) !default;
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// 576px
#function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
#return if($min != 0, $min, null);
}
#mixin make-container() {
width: 100%;
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
margin-right: auto;
margin-left: auto;
}
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the #content apply to the given breakpoint and wider.
#mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
#if $min {
#media (min-width: $min) {
#content;
}
} #else {
#content;
}
}
// For each breakpoint, define the maximum width of the container in a media query
#mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
#each $breakpoint, $container-max-width in $max-widths {
#include media-breakpoint-up($breakpoint, $breakpoints) {
max-width: $container-max-width;
}
}
}
#if $enable-grid-classes {
.container {
#include make-container();
#include make-container-max-widths();
}
}
#if $enable-grid-classes {
.container-fluid {
#include make-container();
}
}
I have two different maps in my _variables.scss file:
$breakpoints: (
bkp-320: 320px,
bkp-480: 480px,
bkp-768: 768px,
bkp-992: 992px,
bkp-1200: 1200px
);
$fontsizes: (
tiny: (
null: 12px,
bkp-768: 11px
),
small: (
null: 14px,
bkp-768: 13px
),
base: (
null: 16px,
bkp-768: 15px
),
large: (
null: 18px,
bkp-768: 17px
)
);
I would combine them in a "#mixin / function font-size" and recall it in my scss:
.selector{
#import font-size(small);
}
to produce in my css something like this:
.selector {
/* null: default value of font-size, not need mediaqueries */
font-size: 14px;
}
#media only screen and (min-width: 768px) {
.selector {
font-size: 13px;
}
}
thxxx
you could try to change $fontsizes map with this structure
small: (
default: 14px,
resolutions:(
(
breakpoint: 'bkp-768',
default: 13px
),
(
breakpoint: 'bkp-480',
default: 20px
)
)
),
and call mixin font-size with a key
#function getMap($map,$key) {
#if map-has-key($map, $key) {
#return map-get($map, $key);
}
#warn "Unknown `#{$key}` in $map.";
#return null;
}
// font-size
#mixin font-size($key){
$fontsize: getMap($fontsizes, $key);
$resolutions: getMap($fontsize, resolutions);
font-size: getMap($fontsize, default);
#each $resolution in $resolutions {
#media only screen and (min-width: getMap($breakpoints,getMap($resolution, breakpoint)) ) {
font-size: getMap($resolution, 'default');
}
};
}
p {
#include font-size(small);
}
h1 {
#include font-size(large);
}