I'm facing an issue with my Sass/SCSS code where I'm trying to use a CSS custom property within a Sass/SCSS variable for a media query, but it doesn't seem to be working as expected. Here's the relevant part of my code:
我的Sass/SCSS代码遇到了一个问题,我试图在Sass/SCSS变量中使用一个css自定义属性来进行媒体查询,但它似乎没有像预期的那样工作。以下是我的代码的相关部分:
--primary-min-width: 768;
$primary-min-width: var(--primary-min-width);
@media (min-width: $primary-min-width + 1px) {
/* CSS properties here */
}
The intention is to use the value of --primary-min-width as the minimum width for the media query. However, despite checking the variable value and ensuring proper compilation, the media query doesn't seem to behave correctly.
目的是使用--PRIMARY-MIN-WIDTH的值作为媒体查询的最小宽度。然而,尽管检查了变量值并确保正确编译,但媒体查询似乎并未正确运行。
I've verified that:
我已经核实过了:
--primary-min-width is set to the intended value (768).
--PRIMARY-MIN-WIDTH设置为目标值(768)。
My Sass/SCSS code is compiled into CSS.
我的Sass/SCSS代码被编译成了css。
The media query is within the same scope as where the variable is
declared.
媒体查询与声明变量的范围相同。
Despite these checks, the code isn't producing the expected results. Can anyone spot what might be causing the issue or provide guidance on how to troubleshoot this problem?
尽管进行了这些检查,但代码并未产生预期的结果。任何人能否找出可能导致问题的原因或提供有关如何解决此问题的指导?
Any help or insights would be greatly appreciated!
如有任何帮助或见解,将不胜感激!
更多回答
After compilation, $primary-min-width
will be replaced with var(--primary-min-width)
and it would become an invalid CSS.
编译后,$PRIMARY-MIN-WIDTH将被替换为var(--PRIMARY-MIN-WIDTH),并且它将成为无效的css。
优秀答案推荐
For me the following code worked just fine:
对我来说,以下代码运行得很好:
$primary-min-width: 768px;
@media (max-width: $primary-min-width + 10px) {
.container {
background-color: yellow;
}
}
更多回答
:root { --primary-min-width: 768; } must use CSS custom properties (variables) @Leo Rossetti
:ROOT{--PRIMARY-MIN-WIDTH:768;}必须使用css自定义属性(变量)@Leo Rossetti
Do you know which Sass compiler are you using? Also, have you tried the code the way I passed (declaring the variable like this: $primary-min-width: 768px;) without the --?
您知道您使用的是哪种Sass编译器吗?另外,您是否尝试了我传递的代码(如下声明变量:$PRIMARY-MIN-WIDTH:768px;)而不使用--?
Possibly you need to declare the --primary-min-width variable inside the root, like this: ":root { --primary-min-width: 768; }" and then use it directly in the media query: "@media (max-width: var(--primary-min-width) + 10px)".
您可能需要在根目录中声明--PRIMARY-MIN-WIDTH变量,如下所示:“:ROOT{--PRIMARY-MIN-WIDTH:768;}”,然后直接在媒体查询中使用它:“@MEDIA(max-WIDTH:var(--PRIMARY-MIN-WIDTH)+10px)”。
我是一名优秀的程序员,十分优秀!