This is kind of simple, when compiling the following code fails with the error:
Line 6 of media.scss: Invalid CSS after "...ia (min-width: ": expected expression (e.g. 1px, bold), was "$desktop
Here is the code (as simple as possible):
$desktop: 1920px;
$tablet: 1024px;
$phone: 480px;
// Style adjustments for desktop size
#media (min-width: $desktop) {
}
// Style adjustments for tablet size
#media (min-width: $tablet) and (max-width: $desktop) {
}
// Style adjustments for phone size
#media (max-width: $phone) {
}
Is this a bug? Maybe it's not possible to use variables in media queries with SASS.
No problem with the code. Variables are possible in SASS 3.2. Link
Related
I created a simple mixin for dealing with some media queries that I have working but would love to output the min and max values with whats in the map. I am having trouble with the max width as it should be the value after the first and so on. I currently have it working without the #each loop and using a get map value function. I might be over complicating this.
For example
#media (min-width:first val in map) and (max-width:next val in map)
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px
);
#mixin breakpoint($point) {
#each $breakpoint in $breakpoints {
#media (min-width:nth($breakpoint, 2)) and (max-width:next-size)) { #content; }
}
}
The output css should be:
#media (min-width: 0) and (max-width: 640px) {}
#media (min-width: 640px) and (max-width: 1024px) {}
any suggestions would be greatly appreciated.
You will have to first get the key of the next breakpoint inside the each loop and then get the value by using map-get
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px
);
#mixin breakpoint() {
#each $breakpoint in $breakpoints {
$i: index($breakpoints, $breakpoint);
#if $i < 3 {
$nextKey: nth(map-keys($breakpoints), $i+1);
#media (min-width:nth($breakpoint, 2)) and (max-width:map-get($breakpoints,$nextKey)) { #content; }
}
}
}
#include breakpoint() {
width: 50%;
}
CSS compiles the following mixin code:
#mixin message ($color, $background-color: lighten ($color, 20%) ) {
color: $color;
background-color: $background-color;
}
.message-danger { #include message(red); }
to this
.message-danger {
color: red;
background-color: lighten red, 20%;
}
Obviously you can see that CSS did not compile the lighten( ) function properly. I tried to change the color to a hex code color but that made no difference. I thought the problem was from my code editor, but when I tried the code on sassmeister it gave me the same result. Please help.
I need my page to adapt from portrait to landscape for Iphone X without having to reload the page.
Here are the media Queries I use:
// Screen size variables
$screen-sm-min: 576px; // Small tablets and large smartphones (landscape view)
$screen-lg-min: 992px; // Tablets and small desktops
//$screen-lg-min: 1024px;
$screen-xl-min: 1200px; // Large tablets and desktops
// Mixins
#mixin xs { #media (max-width: #{$screen-sm-min}),
(min-device-width : 375px) and (max-device-width : 667px),
(min-device-width : 414px) and (max-device-width : 736px),
(min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3)
{#content;} } // Tiny devices
#mixin md { #media (max-width: #{$screen-lg-min}), (min-device-width : 768px) and (max-device-width : 1024px),
(min-device-height : 1024px) and (max-device-width : 1366px)
{#content;} } // Medium devices
And here is a link to the page:
http://dev2.lemeilleurducbd.com/location_etu/home.html
I have looked on Google but I could not find an answer to this issue.
Thanks for your help
CSS solution
You can use orientation in media queries.
landscape rules apply when the browser window width is greater than height:
#media (orientation: landscape) {
...
}
portrait rules apply when browser window height is greater than width:
#media (orientation: portrait) {
...
}
JS solution (Source)
Note: Unfortunately this feature is not supported in safari.
You can listen to the orientationChange event for when the orientation changes, and read screen.orientation when you need to know the current orientation.
screen.addEventListener("orientationchange", function () {
console.log("screen orientation: " + screen.orientation);
});
Another option would be to listen to window resizes and compare the ratio of width and height.
if (width/height > 1) { //landscape } else { portrait }.
I recommend throttling the window resize listener.
I put a piece of javascript on the body tag, that was adapting the body width according to the windowWith, this is what was preventing to go on landscape mode without reloading the page..
I am not 100% clear on how to implement images for mobile only view that are different than the ones I have for desktop view
So for example, if I have this image for desktop:
&.card {
.card-image {
#include background-helper('gallery/old-pic.jpg', center, contain, no-repeat);
}
}
which comes from the mixin file where I have this code:
#mixin background-helper($image: false, $position: center, $size: contain, $repeat: no-repeat){
#if $image {
background-image: asset-url($image);
background-repeat: $repeat;
background-size: $size;
background-position: $position;
}
}
Not sure what logic to add that would tell my application to render something other than old-pic.jpg if the user is viewing it on a mobile phone.
It seems you have to use media queries.
for example:
$break-small: 320px;
$break-large: 1200px;
.card-image {
#media screen and (max-width: $break-small) {
#include background-helper('gallery/mobile-pic.jpg', center, contain, no-repeat);
}
#media screen and (min-width: $break-large) {
#include background-helper('gallery/old-pic.jpg', center, contain, no-repeat);
}
}
Gulp watch yields errors related to code between /* and */ in my scss file, although I've read that this is a regular way of commenting in SASS. Any idea why I have this problem?
[EDIT]
Error:
Error: Undefined variable: "$sm-breakpoint".
on line 42 of assets/styles/core/_media-queries.scss
>> /*
^
[23:30:48] Finished 'styles' after 14 ms
Content of my scss file:
$screen: "only screen";
$landscape: "#{$screen} and (orientation: landscape)";
$portrait: "#{$screen} and (orientation: portrait)";
/* Breakpoints */
$mq_600: "#{$screen} and (max-width: 600px)";
$mq_768: "#{$screen} and (max-width: 768px)";
$mq_1000: "#{$screen} and (max-width: 1000px)";
$mq_1024: "#{$screen} and (max-width: 1023px)";
$mq_1200: "#{$screen} and (max-width: 1200px)";
$mq_1300: "#{$screen} and (max-width: 1300px)";
$mq_1400: "#{$screen} and (max-width: 1400px)";
$mq_1500: "#{$screen} and (max-width: 1500px)";
$mq_1460: "#{$screen} and (max-width: 1460px)";
#mixin mq_600 {
#media #{$mq_600} {#content}
}
#mixin mq_768 {
#media #{$mq_768} {#content}
}
#mixin mq_1000 {
#media #{$mq_1000} {#content}
}
#mixin mq_1024 {
#media #{$mq_1024} {#content}
}
#mixin mq_1200 {
#media #{$mq_1200} {#content}
}
#mixin mq_1300 {
#media #{$mq_1300} {#content}
}
#mixin mq_1400 {
#media #{$mq_1400} {#content}
}
#mixin mq_1500 {
#media #{$mq_1500} {#content}
}
/* Up - mobile fist approach */
/*
$sm-up: "#{$screen} and (min-width: #{$sm-breakpoint + 1})";
$md-up: "#{$screen} and (min-width: #{$md-breakpoint + 1})";
$lg-up: "#{$screen} and (min-width: #{$lg-breakpoint + 1})";
$xlg-up: "#{$screen} and (min-width: #{$xlg-breakpoint + 1})";
#mixin sm-up {
#media #{$sm-up} {#content}
}
#mixin md-up {
#media #{$md-up} {#content}
}
#mixin lg-up {
#media #{$lg-up} {#content}
}
#mixin xlg-up {
#media #{$xlg-up} {#content}
}
*/
SCSS has two kinds of comments:
[SCSS] supports standard multiline CSS comments with /* */, which are preserved where possible in the output. These comments can have whatever formatting you like; Sass will do its best to format them nicely.
SCSS also uses // for comments that are thrown away
Especially, SCSS interprets interpolated expressions (#{..}) within /* */. If you place the $sm-xx definitions into // style comments, the file will compile. (Note that you cannot nest comments. The // lines must be outside of the /* */ block.)
Explaination
Sass supports standard multiline CSS comments with /* */, as well as single-line comments with //. The multiline comments are preserved in the CSS output where possible, while the single-line comments are removed. For example:
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body { color: black; }
// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }
is compiled to:
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body {
color: black; }
a {
color: green; }
Another example
$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */
is compiled to:
/* This CSS is generated by My Snazzy Framework version 1.2.3. */
Source: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#comments
Answer
this is why its trying to resolve variables inside your /* */ and giving errors. to avoid this, use // instead.