I have a function that calculates the value of vw from px depending on the maximum brackpoint. For the mobile version of the page I use a brackpoint of 360, but starting with a screen size of 768px I need to use a brackpoint of 1440.
Below I gave an example of how this works now, but maybe there is some solution to automate this process. In a real project it becomes very difficult to handle all sizes every time.
variables.scss
$bp-large: 1440;
mixins.scss
#mixin _768 {
#media (min-width: 768px) {
#content;
}
}
functions.scss
#function get-vw($target, $base-vw: 360) {
$vw-context: ($base-vw * .01) * 1px;
#return calc($target / $vw-context) * 1vw;
}
page.scss
.square {
width: get-vw(100px);
height: get-vw(100px);
#include _768 {
width: get-vw(200px, $bp-large);
height: get-vw(200px, $bp-large);
}
}
I've been trying to write conditional SCSS that sets the height of my device to one value if the device is landscape or another if it is in portrait.
I understand I can use a media query to determine the orientation but I don't believe I'm receiving the correct calculation. Currently this is what I have. How can I check that my condition is written properly?
#function calculateRootHeight ($width, $orientation: landscape)
{
$heightPaddedRatio: 1.0;
$heightToWidth: 2/3;
#if (orientation: portrait) {
$heightToWidth: 3/2;
}
#return $heightPaddedRatio * $heightToWidth * $width;
}
#mixin describeRoot($bodyWidth) {
#root {
background-color: #EAE5E5;
}
#media (orientation: portrait) {
#root {
height: calculateRootHeight($bodyWidth, portrait);
}
}
#media (orientation: landscape) {
#root {
height: calculateRootHeight($bodyWidth, landscape);
}
}
}
I think you only need to change the syntax in your #if statement slightly, the rest seems ok.
Using the #debug directive is helpful if you want to check a value in your Sass functions.
#function calculateRootHeight ($width, $orientation: landscape) {
$heightPaddedRatio: 1.0;
$heightToWidth: 2/3;
#if ($orientation == "portrait") {
$heightToWidth: 3/2;
}
#debug "Orientation is '#{$orientation}'";
#return $heightPaddedRatio * $heightToWidth * $width;
}
.portrait {
height: calculateRootHeight(200px, portrait); /* Orientation is 'portrait' */
}
.landscape {
height: calculateRootHeight(200px); /* Orientation is 'landscape' */
}
i am using the "vanilla" bootstrap 4 sass media query in my scss files:
#include media-breakpoint-up(xs){}
#include media-breakpoint-up(sm){}
#include media-breakpoint-up(lg){}
#include media-breakpoint-up(xl){}
i know that if i use the css width media query i can couple it with the orientation media query, but i want to use the sass framework.
I want to add the orientation media query in on of them, the XS one. thus it is specific. Because as you know bootsrap 4 is not supporting orientation query for now (strangely).
i tried to concatenat the "orientation query" with the "SASS bootstrap media query (xs)" in different way but i always have a sass error.
Thus What i did is to nest it in the SASS bootstrap media query (xs):
#include media-breakpoint-up(xs){
... some SCSS rules
#media (orientation: landscape){
header{
display:none !important;
}
.navbar{
display:none !important;
}
}
}
The problem i have even tought it is nested into the XS query is that it apply to all breakpoint. it s like it does nt take into account to be nested.
My question: how to concatenate the "orientation query" with the "SASS bootstrap media query (xs)"? Or how to make it specific to the XS breakpoint by nesting it.
Thank you
I've found the solution.
It's possible to combine sass mixin by nesting them, thus I've created the following mixin in my _mixins.scss file:
#mixin orientation($direction) {
$orientation-landscape: "(orientation:landscape)";
$orientation-portrait: "(orientation:portrait)";
#if $direction == landscape {
#media #{$orientation-landscape} { #content; }
}
#if $direction == portrait {
#media #{$orientation-portrait} { #content; }
}
}
Note: i didn't put the "and" in the variable value: "and (orientation:landscape)". SASS or bootstrap put it automatically i suppose.
Then in my SCCS file I've added the following rules:
#include media-breakpoint-down(sm) {
#include orientation(landscape) {
.path-frontpage header {
display: none !important;
}
.path-frontpage .navbar {
display: none !important;
}
}
}
Note: in my first post i was saying that the CSS rules I've nested was applied to all breakpoints, it s because when the CSS is generated the SASS Bootstrap 4 XS breakpoint of is not written, i suppose it's because the value is 0. thus the orientation media query was not combines with a min-width value. So i changed the value to a max-width instead of a min-width, as the Bootstrap 4 SM breakpoint have the 576px value.
The result in the CSS file is what i wanted:
#media (max-width: 767.98px) and (orientation: landscape) {
.path-frontpage header {
display: none !important;
}
.path-frontpage .navbar {
display: none !important;
}
}
I hope it will help the community.
I use this outside of Bootstrap. You should be able to use it with Bootstrap or any other framework, giving you more flexibility in your media queries.
// Extra map functions by Hugo Giraudel
#function map-deep-get($map, $keys...) {
#each $key in $keys {
$map: map-get($map, $key);
}
#return $map;
}
#function map-has-keys($map, $keys...) {
#each $key in $keys {
#if not map-has-key($map, $key) {
#return false;
}
}
#return true;
}
#function map-has-nested-keys($map, $keys...) {
#each $key in $keys {
#if not map-has-key($map, $key) {
#return false;
}
$map: map-get($map, $key);
}
#return true;
}
These are extra map functions Hugo Giraudel wrote up. map-deep-get is basically a simplified nested map-get function. map-has-keys is just like map-has-key, which is built-in to sass, but checks for multiple keys. map-has-nested-keys expands on that by checking for nested keys. This is crucial for this method. I'd definitely look into the extra Sass functions he's built. I've quite easily found use for just about all of them.
// Map
$sizes: (
null: (
breakpoint: 0,
container: 100%
),
xs: (
breakpoint: 480px,
container: 464px
),
sm: (
breakpoint: 768px,
container: 750px
),
md: (
breakpoint: 992px,
container: 970px
),
lg: (
breakpoint: 1200px,
container: 1170px
)
);
This is a simple breakpoint map. I usually use this as a base map for all settings on my projects, so I'll include things like base font-sizes and whatnot in it.
// Breakpoint mixin
#mixin break($screen-min: null, $screen-max: null, $orientation: null) {
$min: $screen-min;
$max: $screen-max;
$o: $orientation;
$query: unquote("only screen");
#if $min != null and $min != "" {
#if map-has-nested-keys($base, sizes, $screen-min) {
$min: map-deep-get($base, sizes, $screen-min, breakpoint);
}
#else {
$min: $screen-min;
}
#if is-number($min) {
$query: append($query, unquote("and (min-width: #{$min})"));
}
}
#if $max != null and $max != "" {
#if map-has-nested-keys($base, sizes, $screen-max) {
$max: map-deep-get($base, sizes, $screen-max, breakpoint);
}
#else {
$max: $screen-max;
}
#if is-number($max) {
$query: append($query, unquote("and (max-width: #{$max})"));
}
}
#if $orientation == landscape or $orientation == portrait {
$o: $orientation;
$query: append($query, unquote("and (orientation: #{$o})"));
}
#else {
$o: null;
}
#media #{$query} {
#content;
}
};
Here's the mixin. You can use the keys from the sizes map (xs, sm, md, lg) for the first two arguments, or you can use custom values (like 30em). The third argument accepts either landscape or portrait. You could even customize the mixin the make l = landscape and p = portrait if you wanted.
Additionally, if you only wanted, for example, an orientation, you could pass the arguments (null, null, landscape).
For clarity, here's some examples:
#include break(null, md, landscape) {
...
}
#include break(null, null, landscape) {
...
}
#include break(md) {
...
}
#include break(null, md) {
...
}
#include break(480px) {
...
}
Output:
#media only screen and (max-width: 992px) and (orientation: landscape) {
...
}
#media only screen and (orientation: landscape) {
...
}
#media only screen and (min-width: 992px) {
...
}
#media only screen and (max-width: 992px) {
...
}
#media only screen and (min-width: 480px) {
...
}
This is a hard question, so I am aware that no one may come up with solution, but that's the problem I really need to solve in my framework.
I have a screen() mixin written in SCSS, which takes $size as an argument, to return any #content wrapped in a media query.
The problem occurs when one element #includes multiple screen() mixins, because resulting media queries will overwrite each other in the same order as they were included. How can I make sure the resulting media queries will be rendered in the correct order (biggest screen to smallest), even if I forget to include them in the right order?
http://sassmeister.com/gist/951520fa83d1e1c69c9d
#mixin screen(
$size: null
){
#if $size == md {
#media (max-width: 1024px) {
#content;
}
}
#if $size == sm {
#media (max-width: 768px) {
#content;
}
}
#if $size == xs {
#media (max-width: 320px) {
#content;
}
}
}
/* output should be 1024, 768, 320 */
.screen {
&:before {
// this should be included as the Last one
#include screen(xs){
content: "xs";
}
#include screen(sm){
content: "sm";
}
// this should be included as the First one
#include screen(md){
content: "md";
}
}
}
I tried to solve that issue by creating placeholder selectors in the right order %media-sm{...}, %media-xs {...}..., and #extend them from the mixin, but #content can't be passed through the #extend directive.
Another solution is a hard one - create an array of keys - sizes, and values - #contents and render them from another function.
No. Sass only does exactly what you tell it to do. If you want your styles to appear in a specific order, write them in that specific order.
Might be easier to pass in the media width you are trying to target:
#mixin media($width) {
#media only screen and (max-width: $width) {
#content;
}
}
#include media(320px) {
background: red;
}
Is there a way to have SASS emulate the way LESS concatenates repeated mixin definitions (redefining a mixin in LESS doesn't overwrite the original).
For instance, would it be possible to push a block of CSS rules into a buffer, and then flush them all at once?
Example:
With LESS I'd do this:
// _menu.less
#_base () { .menu{ /*styles*/ } }
#_mobile () { .menu{ /*styles*/ } }
#_desktop () { .menu{ /*styles*/ } }
...
// _widget.less
#_base () { .widget{ /*styles*/ } }
#_mobile () { .widget{ /*styles*/ } }
#_desktop () { .widget{ /*styles*/ } }
...
and then:
// styles.less
#import "_menu.less";
#import "_widget.less";
#media screen { #_base(); }
#media screen and (max-width:700px) { #_mobile(); }
#media screen and (min-width:701px) { #_desktop(); }
...
// styles-oldie.less
#import "_menu.less";
#import "_widget.less";
#media screen {
#_base();
#_desktop();
}
To the best of my knowledge, there is no way to replicate what you want to achieve by building on to existing mixins. If you define a mixin two times, the second will overwrite the first. See example
AFAIK the common practice in Sass is to use media query mixins inside the selector to keep the code clean and readable. Breakpoint is a popular library that adds a lot of nice functionality for doing this.
An example of the code would be.
#import "breakpoint";
$medium: 600px;
$large: 1000px;
$breakpoint-no-queries: false; // Set to true to ignore media query output
$breakpoint-no-query-fallbacks: true; // Set to true to output no-query fallbacks
$breakpoint-to-ems: true; // Change px to ems in media-queries
.menu {
content: "base";
// Mobile styles
#include breakpoint(min-width $medium - 1) {
content: "mobile";
}
// Tablet styles
#include breakpoint($medium $large) {
content: "tablet";
}
// Desktop styles with no-query fallback
#include breakpoint($large, $no-query: true) {
content: "large";
}
}
This could output (depending on your settings)
.menu {
content: "base";
content: "large";
}
#media (min-width: 37.4375em) {
.menu {
content: "mobile";
}
}
#media (min-width: 37.5em) and (max-width: 62.5em) {
.menu {
content: "tablet";
}
}
#media (min-width: 62.5em) {
.menu {
content: "large";
}
}
You can play around with the settings here
I often have a stylesheet for modern browsers that support media queries set up like this:
// main.scss
$breakpoint-no-queries: false;
$breakpoint-no-query-fallbacks: false;
#import "imports";
And another stylesheet for older browsers that don't support media queries
// no-mq.scss
$breakpoint-no-queries: true;
$breakpoint-no-query-fallbacks: true;
#import "imports";