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();
}
}
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 want to add a 50% container to every breakpoint.
For example: The witdh of .container is 1140px in the xl breakpoint.
So I want to do something like this:
.is-style-container-50 {
max-width: calc($container-max-widths / 2);
}
I found the variable $container-max-widths in the docs.
There are the breakpoints in it like this:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
The problem is, that I get an error message like this:
Error: (sm: 540px, md: 720px, lg: 960px, xl: 1140px) isn't a valid CSS value.
Is there any other way to use the container width for calculations?
Or do I have to use fixed values?
$container-max-widths is a list of values mapped to the keys (sm,md,lg,xl).
You need to get a value from the xl key of $container-max-widths.
Example for xl you need this:
.is-style-container-50 {
max-width: map-get($container-max-widths , xl) / 2;
}
To use all the breakpoints you need to cycle trough all the list:
#each $size-name in map-keys($container-max-widths){
$size-value: map-get($container-max-widths , $size-name);
.is-style-container-50 {
#include media-breakpoint-up($size-name){
max-width: $size-value / 2;
}
}
}
You can also build another list with 50% of values and use it with the Bootstrap mixin for add max-widths to his containers make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints):
$container-mid-max-widths: (
sm: #{map-get($container-max-widths, sm)*0.5},
md: #{map-get($container-max-widths, md)*0.5},
lg: #{map-get($container-max-widths, lg)*0.5},
xl: #{map-get($container-max-widths, xl)*0.5}
);
.mid-container {
// Using Bootstrap Mixin: make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints)
#include make-container-max-widths( $container-mid-max-widths , $grid-breakpoints );
}
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
This is a SASS map (https://sass-lang.com/documentation/values/maps), not a CSS instruction. I don't have enough informations to help you further but hope this hint will help.
i am trying to generate #custom-media entries in a mixin, sourced from a sass map, but get the error that the media query is not a valid css value
eg
#use 'sass:map';
#mixin custom-media($breakpoints) {
$breakpoint-names: map.keys($breakpoints);
#each $breakpoint in $breakpoint-names {
$media-query: null;
$min: map.get($breakpoints, $breakpoint, width, min);
$max: map.get($breakpoints, $breakpoint, width, max);
#if ($min) { $min: (min-width: #{$min}); }
#if ($max) { $max: (max-width: #{$max}); }
#if ($min and $max) {
$media-query: "#{$min} and #{$max}";
}
#else {
$media-query: $min or $max;
}
#custom-media --#{breakpoint}-media-query #{$media-query};
}
}
.root {
#include custom-media((
small: (
width: (
max: 40em,
)
),
medium: (
width: (
min: 40em,
max: 80em,
)
),
large: (
width: (
min: 80em,
)
)
))
};
the error is (max-width: 40em) is'nt a valid css value., despite that being exactly what i want the value to be. does sass not support the #custom-media syntax?
A mixin can return only a valid CSS rules.
#custom-media ... It's not a valid CSS rule.
If you want customize breakpoints points, create a CSS var.
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 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);
}