SASS 彩虹背景简化

Posted 2023-02-16

【中文标题】SASS 彩虹背景简化

【英文标题】：SASS Rainbow Background simplified

【发布时间】：2018-05-08 13:11:35

【问题描述】：

有没有办法可以将它压缩得更多，所以我需要在这一行中添加：

background: linear-gradient(left, $rainbow-colors);

我需要在这里嵌套一些东西吗？

@mixin rainbow($colors...) 
    @each $color in $colors 
      .#$color 
            background: $color;  
    
  
$rainbow-red: red;
$rainbow-orange: orange;
$rainbow-yellow: yellow;
$rainbow-green: green;
$rainbow-blue: blue;

body 
  background: -webkit-linear-gradient(left, $rainbow-red, $rainbow-orange, $rainbow-yellow, $rainbow-green, $rainbow-blue);

【参考方案1】：

您不必将每种颜色指定为自己的变量。一个逗号分隔的列表就足够了。 （另外，你的代码应该写成to left，而不仅仅是left。）

body 
  $rainbow-colors: red, orange, yellow, green, blue;
  background: linear-gradient(to left, $rainbow-colors);