Sass数组随机

2020-07-3034次阅读sass

Sass数组随机需要用到length、nth列表函数。

  • length($list):返回一个列表的长度值;
  • nth($list, $n):返回一个列表中指定的某个标签值
//定义数组,数组元素用逗号或空格隔开
$option:-584px,-668px,-756px,-840px,-926px,-1012px,-1102px;

@for $i from 1 through 7{
	.nav#{$i}{
		background:url(../images/mallActIcon.png) no-repeat 0 nth($option,random(length($option)));
	}
}
.nav1 {
  background: url(../images/mallActIcon.png) no-repeat 0 -926px; }

.nav2 {
  background: url(../images/mallActIcon.png) no-repeat 0 -1012px; }

.nav3 {
  background: url(../images/mallActIcon.png) no-repeat 0 -1102px; }

.nav4 {
  background: url(../images/mallActIcon.png) no-repeat 0 -1102px; }

.nav5 {
  background: url(../images/mallActIcon.png) no-repeat 0 -668px; }

.nav6 {
  background: url(../images/mallActIcon.png) no-repeat 0 -1012px; }

.nav7 {
  background: url(../images/mallActIcon.png) no-repeat 0 -1012px; }

 

上一篇: webpack处理html中img图片引入问题  下一篇: cross-env跨平台地设置及使用环境变量的工具  

Sass数组随机相关文章