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

也请参考 - Using Sass Variables with CSS3 Media Queries

Answer 2

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

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

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

使用mixins更改变量值

3 个答案: