css - 使用 mixins 更改变量值

Question

我通常对 sass 很陌生，只是想知道是否可以使用 mixins 定义一个新的变量值？

我认为最好使用一个变量来定义我正在构建的整个网站的填充大小。我的想法是我可以使用混合和媒体查询来定义新值。

一个例子可能更有意义:

$site-padding:  40px;

@include media-over-767 {
    $site-padding: 20px;
}

我认为这会非常有用，但无法让它发挥作用...是否有有效的方法？

Answer 1

您不能在断点内设置 sass 变量。

请参阅此问题 - https://github.com/sass/sass/issues/1227

你可以简单地做

$site-padding:  40px;
$site-padding-sm:  20px;

@include media-over-767 {
    padding: $site-padding-sm;
}

也引用这个 - Using Sass Variables with CSS3 Media Queries