I am trying to use CSS variables in media query and it does not work.
:root {
--mobile-breakpoint: 642px;
}
#media (max-width: var(--mobile-breakpoint)) {
}
From the spec,
The var() function can be used in place of any part of a value in
any property on an element. The var() function can not be used as
property names, selectors, or anything else besides property values.
(Doing so usually produces invalid syntax, or else a value whose
meaning has no connection to the variable.)
So no, you can't use it in a media query.
And that makes sense. Because you can set --mobile-breakpoint e.g. to :root, that is, the <html> element, and from there be inherited to other elements. But a media query is not an element, it does not inherit from <html>, so it can't work.
This is not what CSS variables are trying to accomplish. You can use a CSS preprocessor instead.
As Oriol has answered, CSS Variables Level 1’s var() cannot currently be used in media queries. However, there have been recent developments that will address this problem. Once CSS Environment Variables Module Level 1 is standardized and implemented, we’ll be able to use env() variables in media queries in all modern browsers.
The CSS Working Group (CSSWG) codified env() in a new standard (currently at a draft stage): the CSS Environment Variables Module Level 1 (see this GitHub comment and this comment for more info). The draft calls out variables in media queries as an explicit use case:
Because environment variables don’t depend on the value of anything drawn from a particular element, they can be used in places where there is no obvious element to draw from, such as in #media rules, where the var() function would not be valid.
If you read the specification and have a concern, or if you want to voice your support for the media-query use case, you can do so in issue #2627, in issue #3578, or in any CSS GitHub issue labeled with “css-env-1”.
GitHub issue #2627 and GitHub issue #3578 are devoted to custom environmental variables in media queries.
Original answer from 2017-11-09:
Recently, the CSS Working Group decided that CSS Variables Level 2 will support user-defined environment variables using env(), and they will try to make them be valid in media queries. The Group resolved this after Apple first proposed standard user-agent properties, shortly before the official announcement of iPhone X in September 2017 (see also WebKit: “Designing Websites for iPhone X” by Timothy Horton). Other browser representatives then agreed they would be generally useful across many devices, such as television displays and ink printing with bleed edges. (env() used to be called constant(), but that has now been deprecated. You might still see articles that refer to the old name, such as this article by Peter-Paul Koch.) After some weeks passed, Cameron McCormack of Mozilla realized that these environment variables would be usable in media queries, and Tab Atkins, Jr. of Google then realized that user-defined environment variables would be especially useful as global, non-overridable root variables usable in media queries. Now, Dean “Dino” Jackson of Apple will join Atkins in editing Level 2.
You can subscribe to updates on this matter in w3c/csswg-drafts GitHub issue #1693 (for especially relevant historical details, expand the meeting logs embedded in the CSSWG Meeting Bot’s resolutions and search for “MQ”, which stands for “media queries”).
What you can do however is #media query your :root statement!
:root {
/* desktop vars */
}
#media screen and (max-width: 479px) {
:root {
/* mobile vars */
}
}
Totally works in Chrome, Firefox and Edge at least the latest production versions as of this posting.
One limitation: if you need to access the value as a variable – for example to use in calculations elsewhere – you will need to have a variable, and it requires defining the variable in two places: the media query and variable declaration.
Apparently it's just not possible to use native CSS variables like that. It's one of the limitations.
A clever way to use it is to change your variables in the media-query, to impact all your style. I recommend this article.
:root {
--gutter: 4px;
}
section {
margin: var(--gutter);
}
#media (min-width: 600px) {
:root {
--gutter: 16px;
}
}
One way to achieve what you want is using npm package postcss-media-variables.
If you are fine with using npm packages then you can take a look documentation for same here:
postcss-media-variables
Example
/* input */
:root {
--min-width: 1000px;
--smallscreen: 480px;
}
#media (min-width: var(--min-width)) {}
#media (max-width: calc(var(--min-width) - 1px)) {}
#custom-media --small-device (max-width: var(--smallscreen));
#media (--small-device) {}
The level 5 specification of media queries define Custom Media Queries that does almost what you are looking for. It allows you to define breakpoint similar to how you do with CSS variables and later use them in different places.
Example from the specification:
#custom-media --narrow-window (max-width: 30em);
#media (--narrow-window) {
/* narrow window styles */
}
#media (--narrow-window) and (script) {
/* special styles for when script is allowed */
}
There is still no support for this actually so we have to wait before using this feature.
Short Answer
You can use JavaScript to change the value of media queries and set it to the value of a css variable.
// get value of css variable
getComputedStyle(document.documentElement).getPropertyValue('--mobile-breakpoint'); // '642px'
// search for media rule
var mediaRule = document.styleSheets[i].cssRules[j];
// update media rule
mediaRule.media.mediaText = '..'
Long Answer
I wrote a small script which you can include on your page. It replaces every media rule with a value of 1px with the value of the css variable --replace-media-1px, rules with value 2px with --replace-media-2px and so on. This works for the media queries with, min-width, max-width, height, min-height and max-height even when they are connected using and.
JavaScript:
function* visitCssRule(cssRule) {
// visit imported stylesheet
if (cssRule.type == cssRule.IMPORT_RULE)
yield* visitStyleSheet(cssRule.styleSheet);
// yield media rule
if (cssRule.type == cssRule.MEDIA_RULE)
yield cssRule;
}
function* visitStyleSheet(styleSheet) {
try {
// visit every rule in the stylesheet
var cssRules = styleSheet.cssRules;
for (var i = 0, cssRule; cssRule = cssRules[i]; i++)
yield* visitCssRule(cssRule);
} catch (ignored) {}
}
function* findAllMediaRules() {
// visit all stylesheets
var styleSheets = document.styleSheets;
for (var i = 0, styleSheet; styleSheet = styleSheets[i]; i++)
yield* visitStyleSheet(styleSheet);
}
// collect all media rules
const mediaRules = Array.from(findAllMediaRules());
// read replacement values
var style = getComputedStyle(document.documentElement);
var replacements = [];
for (var k = 1, value; value = style.getPropertyValue('--replace-media-' + k + 'px'); k++)
replacements.push(value);
// update media rules
for (var i = 0, mediaRule; mediaRule = mediaRules[i]; i++) {
for (var k = 0; k < replacements.length; k++) {
var regex = RegExp('\\((width|min-width|max-width|height|min-height|max-height): ' + (k+1) + 'px\\)', 'g');
var replacement = '($1: ' + replacements[k] + ')';
mediaRule.media.mediaText = mediaRule.media.mediaText.replace(regex, replacement);
}
}
CSS:
:root {
--mobile-breakpoint: 642px;
--replace-media-1px: var(--mobile-breakpoint);
--replace-media-2px: ...;
}
#media (max-width: 1px) { /* replaced by 642px */
...
}
#media (max-width: 2px) {
...
}
You can build a media query programmatically using matchMedia:
const mobile_breakpoint = "642px";
const media_query = window.matchMedia(`(max-width: ${mobile_breakpoint})`);
function toggle_mobile (e) {
if (e.matches) {
document.body.classList.add("mobile");
} else {
document.body.classList.remove("mobile");
}
}
// call the function immediately to set the initial value:
toggle_mobile(media_query);
// watch for changes to update the value:
media_query.addEventListener("change", toggle_mobile);
Then, instead of using a media query in your CSS file, apply the desired rules when body has the mobile class:
.my-div {
/* large screen rules */
}
.mobile .my-div {
/* mobile screen rules */
}
As you can read other answers, still not possible to do so.
Someone mentioned custom environmental variables (similar to custom css variables env() instead of var()), and the principle is sound, though there are still 2 major issues:
weak browser support
so far there is no way to define them (but probably will be in the future, as this is so far only an unofficial draft)
While converting a .css file to .scss I am getting a Sass syntax error in safari only hack section.
At the following part of the code its throwing Invalid CSS after "...tio:0) { #media": expected media query (e.g. print, screen, print and screen), was "{" error.
#media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { #media
{
// some code here
}}
Your media query is invalid, you have a media query inside your media query which has no conditions.
Try this:
#media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
// some code here
}
#media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { #media { // some code here }}
should be
#media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { // some code here }}
You have a media query inside a media query, which is invalid.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
You can use javascript to properly detect safari, something like this:
function isiPad() { return (
(navigator.userAgent.toLowerCase().indexOf(/iPad/i) > -1));}
I'm trying to "translate" a sass function into a less function.
Here is the original SASS one :
#mixin bp($feature, $value) {
// Set global device param
$media: only screen;
// Media queries supported
#if $mq-support == true {
#media #{$media} and ($feature: $value) {
#content;
}
// Media queries not supported
} #else {
#if $feature == 'min-width' {
#if $value <= $mq-fixed-value {
#content;
}
} #else if $feature == 'max-width' {
#if $value >= $mq-fixed-value {
#content;
}
}
}
}
And here is the function I started to make in less as it seems every declaration can not be implemented the same as in sass :
.bp(#feature; #val) when (#mq-support = true) {
#med: ~"only screen";
#media #{med} and (#{feature}:#val) {
#content;
}
}
When I'm compiling this, I got the following error :
Missing closing ')' on line 15, column 34:
15 #media #{med} and (#{feature}:#val) {
16 #content;
So this error seems to come from the closing #{feature} closing bracket but following the documentation and several blog posts on the internet, it seems that since the 1.6.0 version of less, the css property interpolation is a feature that should work.
Does anybody have an idea of what could be wrong here ?
Is it actually possible to use a variable as a property in a media query ?
Maybe I'm doing it totally wrong but it seems the mixins guard feature in less does not work exactly the same as with SASS and the #if condition so the "translation" is a little bit different.
Thank you in advance
Sébastien
Interpolation or using variables in media queries work slightly differently in Less.
First of all, you shouldn't use the normal interpolation syntax (#{med}). Instead it should just be #med.
Next the second condition should also be set to a variable and then appended to the media query just like the #med variable or it should be included as part of the #med variable itself. I've given a sample for both approaches below.
.bp(#feature; #val) when (#mq-support = true) {
#med: ~"only screen and";
#med2: ~"(#{feature}:#{val})";
#media #med #med2{
#content();
}
}
or
.bp(#feature; #val) when (#mq-support = true) {
#med: ~"only screen and (#{feature}:#{val})";
#media #med {
#content();
}
}
Below is a sample conversion of that Sass code completely into its Less equivalent. Less does not support the #content like in Less, so it should be passed as a detached ruleset with the mixin call.
#mq-support: true;
#mq-fixed-value: 20px;
.bp(#feature; #val; #content) {
& when (#mq-support = true) {
#med: ~"only screen and (#{feature}:#{val})";
#media #med {
#content();
}
}
& when not (#mq-support = true) {
& when (#feature = min-width) {
& when (#val <= #mq-fixed-value){
#content();
}
}
& when (#feature = max-width) {
& when (#val >= #mq-fixed-value){
#content();
}
}
}
}
a{
.bp(max-width, 100px, { color: red; } );
}
b{
.bp(min-width, 10px, { color: blue; } );
}
I'm trying to use LESS to dynamically generate a set of mixins that would help me write cleaner media query code. So far in my limited knowledge of the language I've put together code that looks like this:
#sizes: xxs, xs, sm, md, lg;
.mediaQueries(#iterator:1) when(#iterator <= length(#sizes)) {
//Extract name
#sizeName: extract(#sizes, #iterator);
//Attempt to build min-width query
.MQ-min-#{sizeName} (#content) {
#media (min-width: #screen-#{sizeName}) {
#content();
}
}
//Attempt to build max-width query
.MQ-max-#{sizeName} (#content) {
#media (max-width: #screen-#{sizeName}) {
#content();
}
}
.mediaQueries((#iterator + 1));
}
.mediaQueries();
The goal is to have a set of mixins that would allow me to easily and cleanly define some CSS properties for a specific breakpoint, like so:
.generic-class {
background: black;
//Sizes #screen-sm and up
.MQ-min-sm({
background: transparent;
})
}
It doesn't work. Something to note, I'm trying to interpolate the size name into a variable name that would then output me a the px value of that variable into the #media query. Is something like this even possible?
Otherwise my compiler currently breaks on the start of the nested mixin (.MQ-min-#{sizeName} (#content) {) with the error:
Potentially unhandled rejection [2] Missing closing ')' in file ../mixins.less line no. 43
Is something like what I'm trying to achieve possible?
I think the simplest way for you to achieve this is by using a single parametric mixin like given below. This avoids the need for all those iterations, dynamic mixin creations etc.
#sizes: xxs, xs, sm, md, lg;
#screen-xxs: 100px;
#screen-sm: 200px;
.MQ(#content, #sizeName, #max-min) { /* get ruleset, size name and min/max as input */
#selector: ~"(#{max-min}-width: #{screen-#{sizeName}})"; /* form the media selector */
#media #selector { /* use it */
#content();
}
}
.generic-class {
background: black;
.MQ({
background: transparent;
}, /* ruleset */
sm, /* screen size */
max /* min/max */
);
}
If the mixins are for your own usage then this is all that you need. If it is for distribution as library then you may want to put some guards on #sizeName and #max-min variables to restrict invalid values.
Note: Less compiler always had a problem with the interpolation here - #media (min-width: #screen-#{sizeName}) also (I am not sure if it has been addressed) and that's why I created a temp variable.
Due an effect that splits the page and lets resize one of the containers. I have to add more styles for the responsive, So I add to this resizable container a class representing my current breakpoint (xs,sm,md,lg)
Like this
if ( ui.position.left <= 480 ) { /* It represent it's width, I am using this as the drag function of draggable */
clase = 'xs';
} else if ( ui.position.left <= 768 ) {
clase = 'sm';
} else if ( ui.position.left <= 992 ) {
clase = 'md';
} else {
clase = 'lg';
}
$('.element').removeClass('xs sm md lg').addClass(clase);
for example:
#media (max-width: 320px)
h2 {
font-size:12px;
}
}
and I now have to add:
.xs h2 {
font-size:12px
}
Is there any way not to have to duplicate the styles? (I have several blocks)
Something like this that I won't work
.xs, #media (max-width:320px) {
h2 {
font-size: 12px
}
}
You can use postcss and plugin https://github.com/hail2u/node-css-mqpacker. This easy and work fine. You can use postcss with SCSS.
When using media queries, you usually have a global default, and then you override the default in the query, if a certain predicate is true (e.g. window with is less than 320px).
In your example, you would like to use the same value as the global default and the overridden value in the media query. IMHO this makes no sense whatsoever.