Html 在SASS中创建随机背景色

我试图有一个滚动效果有1-3个不同的颜色在Sass。我该怎么做？这是我到目前为止的代码

input[type=submit] {
    font-size:1.3em;
    padding:5px;
    font-family:$paragraphFont;
    width:400px;
    border:1px solid #888;
    box-sizing:border-box;
    margin-top:15px;
    cursor:pointer;
    transition:background-color .2s ease-in-out;

    &:hover {
        cursor:pointer;
        background-color:#3cde77;
    }
}

<form>
    <p>Name:</p><input type="text" />
    <p>Email:</p><input type="text" />
    <p>Message:</p><textarea></textarea>
    <input type="submit" value =" Send Message" />
</form>

input[type=submit]{
字体大小：1.3em；
填充物：5px；
字体系列：$paragraphFont；
宽度：400px；
边框：1px实心#888；
框大小：边框框；
边缘顶部：15px；
光标：指针；
过渡色：背景色。2容易进出；
&：悬停{
光标：指针；
背景色：#3cde77；
}
}
姓名：

电邮：

信息：

我想象你可以用random（）函数把我的颜色分配给一个数字，但我不知道怎么做

---

伙计们，有什么想法吗？

我可以用JS来做这件事。每次将鼠标悬停在“发送消息”按钮上时，它都会随机选择3种不同的颜色。然后它会恢复为初始的灰色

var send=document.querySelector（'.send'）；
send.addEventListener（“mouseover”，function（））{
var colors3=[“红色”、“绿色”、“蓝色”]；
var randomColor=colors3[Math.floor（Math.random（）*3）]；
this.style.backgroundColor=randomColor；
});
send.addEventListener（“mouseout”，function（））{
this.style.backgroundColor=“darkgrey”；
});
input[type=submit]{
字体大小：1.3em；
填充物：5px；
字体系列：$paragraphFont；
宽度：400px；
边框：1px实心#888；
框大小：边框框；
边缘顶部：15px；
光标：指针；
过渡色：背景色。2容易进出；
背景色：暗灰色；
}

姓名：

电邮：

信息：

这不是一个完整的解决方案，我相信这不是一个好的解决方案，但它是一个纯CSS解决方案：

这样做的目的是让你的按钮通过CSS关键帧动画不断循环背景色，但隐藏在遮罩后面。悬停时，将移除遮罩并暂停动画，从而根据鼠标进入按钮时的循环位置拾取“冻结”颜色

HTML:

<button><span>Hover me</span></button>

目前，这并不是在3种规定的颜色之间清晰地选择-显示了一些中间颜色。这取决于关键帧动画和按钮上的
步骤
声明-我确信可以完成，但需要微调

最后一条警告——这比使用javascript选择颜色更需要大量资源——如果一个页面上同时有两个以上的元素，那么它会变得非常沉重。
您可以做的是使用SCS的随机函数

 $repeat: 10; // 10 iterations
 input[type=submit]{
 @for $i from 1 through $repeat{
      &:nth-child(#{$i}) {
            background-color: rgb(random(255),random(255),random(255));            
      }
    }
  }

每次悬停时，或者每次编译时，随机颜色都会改变吗？如果是在编译过程中，那么@DeepakYadav提到的链接将非常有效。否则你会想使用JS。我有一个网站，我正在使用三种不同的颜色。我想这些颜色中的每一个都是背景，随机地在提交按钮上悬停。在Deepak给出的示例中，rgb（随机（256）-1，随机（256）-1，随机（256）-1）；256代表什么？背景色：N（红绿蓝，随机（3））；
 $repeat: 10; // 10 iterations
 input[type=submit]{
 @for $i from 1 through $repeat{
      &:nth-child(#{$i}) {
            background-color: rgb(random(255),random(255),random(255));            
      }
    }
  }