使用混合值更改变量值

Question

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

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

一个例子可能更有意义：

$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;
}

也参考这个 - 将 Sass 变量与 CSS3 媒体查询一起使用

Answer 2

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

Answer 3

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

@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();
     }
}