使用mixins来改变变量值

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

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

一个例子可能更有意义：

$site-padding: 40px; 

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

我认为这将是超级有用的，但不能让它的工作...有一个可行的方法？

来源

2017-04-03 CharlyAnderson

即使@JinuKurian已经回答了，我想你应该看看范围的变量在青菜可以把你的另一路径上解决这些问题的排序。此外，请参阅[本主题]（http://stackoverflow.com/questions/5469931/sass-variable-default-scope）的答案以获取有关变量如何工作的更多详细信息（mixins和scoped变量）。 – Fahrenheit

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

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

来源

2017-04-03 20:25:40

网站填充如何转换为填充？是否有另一个mixin将其分解为添加'padding：20px'？我还没有遇到过这个与sass。 – gwally

填充问题与答案无关，但如果您需要一个mixin，您可以使用它来设置填充，在这里您可以使用。 @mixin padding-all（$ top，$ right，$ bottom，$ left）{ padding-top：$ top; padding-right：$ right; padding-bottom：$ bottom; padding-left：$ left; } –

谢谢您的澄清和示例。 – gwally

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

来源

2017-04-04 03:58:30

我不知道这是否是你寻找什么，但希望它让你走上正确的道路。声明混入：

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

在这个例子中，我设置了混入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(); 
    } 
}

来源

2017-04-04 04:43:43 disinfor

使用mixins来改变变量值

回答

相关问题