반응형 Scss3 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(../.. 2020. 1. 3. Sass 반복문 @while $i: 1; $gutter: 20px; @while $i 2019. 10. 23. @extend 대신 @mixin 사용하기 @extend를 언제 사용해야 할까? 먼저 @extend는 연관성을 형성한다는 것을 알아야한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 %brand-font { font-family: webfont, sans-serif; font-weight: 700; } h1 { @extend %brand-font; font-size: 2em; } .btn { @extend %brand-font; display: inline-block; padding: 1em; } .promo { @extend %brand-font; background-color: #BADA55; color: #fff; } .footer-message { @exten.. 2019. 9. 25. 이전 1 다음 반응형
