Question

我的scss文件中有以下变量

$flat-blue: #42a5f5;
$flat-green: #26a69a;
$flat-orange: #ffa727;
$flat-red: #ef5350;
$flat-purple: #c561d6;

我找到了一个可以改变两个数字之间随机值的codepen here，它看起来效果很好。

我的疑问是，有没有办法随机使用这个函数来选择我的一个变量？

我的css：

.avatar {
    width: 43px;
    height: 43px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
    position: relative;
    background: $flat-green; //here should be the result of this function
    float: left;
    text-align: center;
    line-height: 43px;
    font-size: 20px;
    color:white;
    font-weight: lighter;
    text-transform: uppercase;
  }

我的html结构：

<article data-value="<%= subscriber[:id] %>"
       data-status="<%= subscriber[:status] %>"
       data-user="<%= subscriber[:subscriber][:user_id] %>"
       data-profile="<%= subscriber[:profile_id] %>">
<div class="bg">
    <div class="avatar">
        <%= avatar_url(subscriber.profile.user.avatar, subscriber[:subscriber][:name]) %>
    </div>
</div>
</article>

Answer 1

这不是“随机”，但它将采用您在sass中定义的颜色列表，并将.avatar:nth-child(n)指定给该列表中的第n种颜色。因此，只要您定义至少与具有化身的颜色一样多的颜色，每个颜色将获得独特的颜色。如果你有更多的化身而不是颜色，这将反复循环显示颜色。

$avatarBgColors: #42a5f5, #26a69a, #ffa727, #ef5350, #c561d6;

@for $i from 1 through length($avatarBgColors) {
  .avatar:nth-child(#{length($avatarBgColors)}n + #{$i}) {
    background-color: nth($avatarBgColors, $i);
  }
}

这编译成：

.avatar:nth-child(5n + 1) {
  background-color: #42a5f5;
}
.avatar:nth-child(5n + 2) {
  background-color: #26a69a;
}
.avatar:nth-child(5n + 3) {
  background-color: #ffa727;
}
.avatar:nth-child(5n + 4) {
  background-color: #ef5350;
}
.avatar:nth-child(5n + 5) {
  background-color: #c561d6;
}

使用函数random（）和sass来选择随机变量

1 个答案: