I’m trying to standardize the sizes of the devices on my scss, based on this:
/** Extra small devices (phones, 600px and down) */
$extra-small-evices: "screen and (max-width: 600px)",
/** Small devices (portrait tablets and large phones, 601px to 768px) */
$small-devices = 'screen and (min-width: 601px) and (max-width: 768px)',
/** Medium devices (landscape tablets, 769px to 991px) */
$medium-devices = 'screen and (min-width: 769px) and (max-width: 991px)',
/** Large devices (laptops/desktops, 992px to 1200px) */
$large-devices = 'screen and (min-width: 992px) and (max-width: 1200px)',
/** Extra large devices (large laptops and desktops, 1201px and up) */
$extra-large-devices = 'screen and (min-width: 1201px)'
After this, less say that I want to create a media query which the target is the small devices and medium devices:
@media $small-devices,
@media $medium-devices{
....
}
But I’m getting the following error on the @media $small-devices, line:
[scss] media query expected
Environment: Visual studio code, nodejs, angular 6, gulp,
Any one knows how no solve this?
Вы должны сообщить SASS, что ваша строка не должна заключаться в кавычки и обрабатываться как обычный CSS:
@media #{unquote($small-devices)}{
// Your output here
}
Вы все еще можете использовать несколько таких:
@media #{unquote($small-devices)},
#{unquote($extra-small-devices)}{
// Your output here
}
Но, возможно, для стиля и элегантности вы можете подумать о создании миксина, который просто берет все строки, а затем создает медиа-запрос как таковой:
@mixin media( $selectors... ){
$selector: '';
@each $s in $selectors {
@if $selector == '' { $selector: $s; }
@else { $selector: $selector + ', ' + $s; }
}
@media #{unquote($selector)}{
@content;
}
}
А затем используйте его как таковое:
@include media( $extra-small-devices, $extra-large-devices ){
...
}
И вывод будет:
@media screen and (max-width: 600px), screen and (min-width: 1201px) {
...
}
I’m trying to standardize the sizes of the devices on my scss, based on this:
/** Extra small devices (phones, 600px and down) */
$extra-small-evices: "screen and (max-width: 600px)",
/** Small devices (portrait tablets and large phones, 601px to 768px) */
$small-devices = 'screen and (min-width: 601px) and (max-width: 768px)',
/** Medium devices (landscape tablets, 769px to 991px) */
$medium-devices = 'screen and (min-width: 769px) and (max-width: 991px)',
/** Large devices (laptops/desktops, 992px to 1200px) */
$large-devices = 'screen and (min-width: 992px) and (max-width: 1200px)',
/** Extra large devices (large laptops and desktops, 1201px and up) */
$extra-large-devices = 'screen and (min-width: 1201px)'
After this, less say that I want to create a media query which the target is the small devices and medium devices:
@media $small-devices,
@media $medium-devices{
....
}
But I’m getting the following error on the @media $small-devices, line:
[scss] media query expected
Environment: Visual studio code, nodejs, angular 6, gulp,
Any one knows how no solve this?
Answers of > Scss error “media query expected” — use multiple media queries — standardize the sizes of devices
You should tell SASS that your string is w3coded media error meant to be unquoted and treated like regular w3coded media error CSS:,
w3coded media error 1
w3coded media error
@RicardoRocha Drop w3coded media error the second @media, I just tested this: @media w3coded media error #{unquote($extra-small-evices)}, w3coded media error #{unquote($extra-large-devices)} {} and it w3coded media error works. Als, extra-small is missing the d for w3coded media error devices.
w3coded media error
– somethinghere
w3coded media error Nov 2 ’18 at 14:40
w3coded media error
w3coded media error
,
w3coded media error
w3coded media error
Thank you but w3coded media error it only solves one problem. If I join two media w3coded media error queries to the same code like this: @media w3coded media error #{unquote($small-devices)}, @media w3coded media error #{unquote($small-devices)} {}, I receive the w3coded media error same error but for the second media query
w3coded media error
– Ricardo Rocha
w3coded media error
Nov 2 ’18 at 14:39
w3coded media error
w3coded media error
w3coded media error
,After this, less say that I want to create w3coded media error a media query which the target is the small w3coded media error devices and medium devices:
You should tell SASS that your string is meant to be unquoted and treated like regular CSS:
@media #{unquote($small-devices)}{
// Your output here
}
You can still use multiple like this:
@media #{unquote($small-devices)},
#{unquote($extra-small-devices)}{
// Your output here
}
But maybe, for style and elegance, you might want to consider building a mixin that just takes all the strings and then build the media query as such:
@mixin media( $selectors... ){
$selector: '';
@each $s in $selectors {
@if $selector == '' { $selector: $s; }
@else { $selector: $selector + ', ' + $s; }
}
@media #{unquote($selector)}{
@content;
}
}
And then use it as such:
@include media( $extra-small-devices, $extra-large-devices ){
...
}
And the output will be:
@media screen and (max-width: 600px), screen and (min-width: 1201px) {
...
}
Current topics : Scss error “media query expected” — use multiple media queries — standardize the sizes of devices
Newly Added Questions
Перейти к контенту
I’m trying to standardize the sizes of the devices on my scss, based on this:
/** Extra small devices (phones, 600px and down) */
$extra-small-evices: "screen and (max-width: 600px)",
/** Small devices (portrait tablets and large phones, 601px to 768px) */
$small-devices = 'screen and (min-width: 601px) and (max-width: 768px)',
/** Medium devices (landscape tablets, 769px to 991px) */
$medium-devices = 'screen and (min-width: 769px) and (max-width: 991px)',
/** Large devices (laptops/desktops, 992px to 1200px) */
$large-devices = 'screen and (min-width: 992px) and (max-width: 1200px)',
/** Extra large devices (large laptops and desktops, 1201px and up) */
$extra-large-devices = 'screen and (min-width: 1201px)'
After this, less say that I want to create a media query which the target is the small devices and medium devices:
@media $small-devices,
@media $medium-devices{
....
}
But I’m getting the following error on the @media $small-devices, line:
[scss] media query expected
Environment: Visual studio code, nodejs, angular 6, gulp,
Any one knows how no solve this?
I’m trying to standardize the sizes of the devices on my scss, based on this:
/** Extra small devices (phones, 600px and down) */
$extra-small-evices: "screen and (max-width: 600px)",
/** Small devices (portrait tablets and large phones, 601px to 768px) */
$small-devices = 'screen and (min-width: 601px) and (max-width: 768px)',
/** Medium devices (landscape tablets, 769px to 991px) */
$medium-devices = 'screen and (min-width: 769px) and (max-width: 991px)',
/** Large devices (laptops/desktops, 992px to 1200px) */
$large-devices = 'screen and (min-width: 992px) and (max-width: 1200px)',
/** Extra large devices (large laptops and desktops, 1201px and up) */
$extra-large-devices = 'screen and (min-width: 1201px)'
After this, less say that I want to create a media query which the target is the small devices and medium devices:
@media $small-devices,
@media $medium-devices{
....
}
But I’m getting the following error on the @media $small-devices, line:
[scss] media query expected
Environment: Visual studio code, nodejs, angular 6, gulp,
Any one knows how no solve this?
Вы должны сообщить SASS, что ваша строка не должна заключаться в кавычки и обрабатываться как обычный CSS:
@media #{unquote($small-devices)}{
// Your output here
}
Вы все еще можете использовать несколько таких:
@media #{unquote($small-devices)},
#{unquote($extra-small-devices)}{
// Your output here
}
Но, возможно, для стиля и элегантности вы можете подумать о создании миксина, который просто берет все строки, а затем создает медиа-запрос как таковой:
@mixin media( $selectors... ){
$selector: '';
@each $s in $selectors {
@if $selector == '' { $selector: $s; }
@else { $selector: $selector + ', ' + $s; }
}
@media #{unquote($selector)}{
@content;
}
}
А затем используйте его как таковое:
@include media( $extra-small-devices, $extra-large-devices ){
...
}
И вывод будет:
@media screen and (max-width: 600px), screen and (min-width: 1201px) {
...
}
Я нашел способ сделать это, чтобы работать без необходимости указывать, если заявление для каждого типа носителя.
@mixin breakpoints($min-width, $max-width, $media-type: false) {
@if $media-type {
@media #{$media-type} and (min-width: $min-width) and (max-width: $max-width) {
@content;
}
} @else {
@media all and (min-width: $min-width) and (max-width: $max-width) {
@content;
}
}
}
ключ был в #{$media-type}. сейчас все работает, но я не знаю, насколько правильное мое решение.
Теперь я могу позвонить в Mixin с
@include breakpoints(400, 600, only screen)
а также
@include breakpoints(400, 600, 'only screen')
а также
@include breakpoints(400, 600)
который вернет ключевое слово all
Running Sass on an imported file that includes this line:
Sass reports:
error media-queries.sass (Line 8: Invalid CSS after «screen «: expected media query list, was «{«)
I’m pretty sure that’s valid though, you don’t have to include size or other terms, like the second example here: http://www.w3.org/TR/css3-mediaqueries/
I’m not sure what version of Sass you’re running, but using both Sass 3.2.12 and Sass 3.3.rc.2, the following compiles absolutely fine:
@media screen { .foo { content: bar; } }
3.2.12, but perhaps it makes a difference that it is in an import? I moved my media queres into another file (media-queries.sass) and imported that into the main file. Then I get the errors.
I took the error message too literally though, it doesn’t matter whether there are ‘and’ conditions, it seems to matter they are in an import though.
Having them in an imported file should not make a difference and does not make a difference when tested. My suggestion is to build a reduced example and add back in code until you find your error; I’m willing to bet you have a syntax error somewhere, not that @media screen doesn’t work.
I’m closing this, but I’ll re-open if you can provide a file or files that can consistently reproduce the error.
Has the nature of ‘watch’ changed when I wasn’t looking? A sass file of just this:
Then:
# sass —watch test.sass:test.css
Gives me:
error test.sass (Line 2: Invalid CSS after «0»: expected expression (e.g. 1px, bold), was «;»)
Is there a forum somewhere? This is really odd, it is CSS that’s working fine in the full SASS stylesheet. Need somewhere to ask questions…
That’s SCSS syntax, but your file uses the extension .sass, so Sass is trying to interpret it as the indented syntax and failing. Could that also be your problem with the media query?
Ah, yes, that’s why everything seems to be wrong when I import that.
Sorry, I have never used the indented syntax, so I have no idea why I put .sass on that!