将Sass变量用于CSS3媒体查询
我尝试将Sass变量的使用与@media查询结合使用，如下所示：
$base_width:1160px;
@media screen and (max-width: 1170px) {$base_width: 960px;}
@media screen and (min-width: 1171px) {$base_width: 1160px;}然后，在基于样式表宽度百分比的度量中的不同点定义$base_width，以生成流畅的布局。
当我这样做时，变量似乎可以正确识别，但媒体查询的条件却不能。例如，上面的代码生成1160px的布局，而不考虑屏幕宽度。如果我像这样翻转@media语句：
@media screen and (min-width: 1171px) {$base_width: 1160px;}
@media screen and (max-width: 1170px) {$base_width: 960px;}它产生一个960px的布局，同样与屏幕宽度无关。还要注意，如果我删除了$base_width: 1160px;的第一行，它将返回一个未定义变量的错误。知道我错过了什么吗？
回答 4
Stack Overflow用户
发布于 2012-02-03 23:17:28
这根本是不可能的。因为触发器@media screen and (max-width: 1170px)发生在客户端。
只有当SASS获取包含$base_width变量的样式表中的所有规则和属性并相应地复制/更改它们时，才有可能实现预期的结果。
因为它不会自动工作，所以你可以像这样手动完成：
@media screen and (max-width: 1170px)
$base_width: 960px // you need to indent it to (re)set it just within this media-query
// now you copy all the css rules/properties that contain or are relative to $base_width e.g.
#wrapper
width: $base_width
...
@media screen and (min-width: 1171px)
$base_width: 1160px
#wrapper
width: $base_width
...这不是真的干，但你能做的最好了。
如果每次的更改都是相同的，那么您还可以准备一个包含所有更改的值的混合，这样您就不需要重复了。此外，您可以尝试将mixin与特定的更改组合在一起。像这样：
@media screen and (min-width: 1171px)
+base_width_changes(1160px)
#width-1171-specific-element // additional specific changes, that aren't in the mixin
display: blockMixin看起来就像这样
=base_width_changes($base_width)
#wrapper
width: $base_widthStack Overflow用户
发布于 2015-03-11 20:35:57
与Philipp Zedler的答案类似，您可以使用mixin来完成此操作。这让你可以把所有的东西放在一个文件中。
@mixin styling($base-width) {
// your SCSS here, e.g.
#Contents {
width: $base-width;
}
}
@media screen and (max-width: 1170px) {
@include styling($base-width: 960px);
}
@media screen and (min-width: 1171px) {
@include styling($base-width: 1160px);
}Stack Overflow用户
发布于 2019-03-22 17:22:14
这在SASS中是不可能的，但在CSS变量(或CSS custom properties)中是可能的。唯一的缺点是浏览器支持-但实际上有一个PostCSS插件- postcss-css-variables -它“扁平化”了CSS变量的使用(这也为你提供了对旧浏览器的支持)。
下面的示例可以很好地使用SASS (并且对于postcss-css变量，您也可以获得对旧浏览器的支持)。
$mq-laptop: 1440px;
$mq-desktop: 1680px;
:root {
--font-size-regular: 14px;
--gutter: 1rem;
}
// The fact that we have to use a `max-width` media query here, so as to not
// overlap with the next media query, is a quirk of postcss-css-variables
@media (min-width: $mq-laptop) and (max-width: $mq-desktop - 1px) {
:root {
--font-size-regular: 16px;
--gutter: 1.5rem;
}
}
@media (min-width: $mq-desktop) {
:root {
--font-size-regular: 18px;
--gutter: 1.75rem;
}
}
.my-element {
font-size: var(--font-size-regular);
padding: 0 calc(var(--gutter) / 2);
}这将产生以下CSS。重复的媒体查询会增加文件大小，但我发现一旦web服务器应用gzip (它通常会自动执行)，增加的文件大小通常可以忽略不计。
.my-element {
font-size: 14px;
padding: 0 calc(1rem / 2);
}
@media (min-width: 1680px) {
.my-element {
padding: 0 calc(1.75rem / 2);
}
}
@media (min-width: 1440px) and (max-width: 1679px) {
.my-element {
padding: 0 calc(1.5rem / 2);
}
}
@media (min-width: 1680px) {
.my-element {
font-size: 18px;
}
}
@media (min-width: 1440px) and (max-width: 1679px) {
.my-element {
font-size: 16px;
}
}https://stackoverflow.com/questions/9122195
复制相似问题
腾讯云开发者
