Scss random 함수

scss의 내장함수 중에 random() 함수가 있습니다.

random()을 사용하면 0 ~ 1사이의 수를 반환합니다.

숫자를 지정하면 0 부터 지정한 수까지 반환합니다.

 

// scss
.box {
  height: random() + px;
}

.box1 {
  height: random(300) + px;
}

// css로 변환
.box {
  height: 0.6770711576px;
}

.box1 {
  height: 190px;
}

 

이런 식으로 해서 background-image도 랜덤으로 사용할 수 있습니다.

 

// scss
$imgKey: random(3);
$list: (bg1, bg2, bg3);
$nth: nth($list, $imgKey);

#wrap {
  background-image: url(../image/#{$nth}.jpg)
}

// css
#wrap {
  background-image: url(../image/bg2.jpg);
}

 

랜덤으로 생성된 수는 컴파일 할 때 발생되므로 새로고침을 해도 이미지는 변하지 않습니다.

이미 컴파일되고 캐시된 css를 표시합니다.