使用 mixins 更改变量值答案

【问题标题】：Use a mixins to change variable value使用 mixins 更改变量值
【发布时间】：2017-08-28 19:25:30
【问题描述】：

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

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

举个例子可能更有意义：

$site-padding:  40px;

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

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

【问题讨论】：

即使@JinuKurian 已经回答了，我认为你应该看看 sass 中的作用域变量，这可能会让你走上另一条解决这类问题的道路。另外，请参阅this thread 的答案，了解有关变量如何工作（混合和作用域变量）的更多详细信息。

标签： css sass

【解决方案1】：

@mixin site-padding{
   $site-padding: 20px;
}

@include media-over-767 {
    @include site-padding;
}

【讨论】：

站点填充如何转换为填充？是否有另一个 mixin 可以将其分解为添加 padding: 20px？我以前没有遇到过 sass。
填充问题与答案无关，但如果你需要一个mixin，你可以使用它来设置填充，你去吧。 @mixin padding-all($top, $right, $bottom, $left) { padding-top: $top; padding-right: $right;填充底部：$底部；填充左：$left； }
感谢您的澄清和示例。

【解决方案2】：

您不能在断点内设置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

【讨论】：

【解决方案3】：

我不确定这是否正是您想要的，但希望它能让您走上正确的道路。声明 mixin：

@mixin site-padding($padding:40px) {
    padding: $padding;
}

在该示例中，我将 mixin site-padding 设置为默认值 40px。

你的 SASS 看起来像这样：

.element {
     // Small screens
     @include site-padding(20px);

     // Over 767px
     @media screen and (min-width: 768px) {
        // Defaults to 40px. 
        @include site-padding();
     }
}

【讨论】：