scss高级用法配合惊艳的css属性

$free-color:  #da1b1f, #34cc95, #16c6ec, #007aff;
@for $i from 1 through length($free-color) {  
     $item:nth($free-color, $i);  
    .bk-0#{$i} {    
        color: $item;  
    }
}

编译后：
.bk-01 {color: #da1b1f } .bk-02 {} .bk-03 {} .bk-04 {}

.random {color: rgb(floor(random()*255), floor(random()*255), floor(random()*255));}

@function randomNum($max, $min: 0, $u: 1) {  @return ($min + random($max)) * $u;}@function shadowSet($n, $size) {    $shadow : 0 0 0 0 #fff;    @for $i from 0 through $n {         $x: randomNum(350);        $y: randomNum(500);        $scale: randomNum($size) / 10;        $shadow: $shadow, #{$x}rpx #{$y}rpx 0 #{$scale}rpx rgba(255, 255, 255, .8);    }    @return $shadow;}.g-wrap {    position: relative;    ...    background: #0b1a3a;    overflow: hidden;        &::before {        content: "";        position: absolute;        width: 2rpx;        height: 2rpx;        border-radius: 50%;        box-shadow: shadowSet(10, 6);    }}



编译后：
.g-wrap::before {  content: "";  position: absolute;  width: 2rpx;  height: 2rpx;  border-radius: 50%;  box-shadow: 0 0 0 0 #fff, 222rpx 219rpx 0 0.5rpx rgba(255, 255, 255, 0.8), 5rpx 219rpx 0 0.1rpx rgba(255, 255, 255, 0.8), 331rpx 209rpx 0 0.5rpx rgba(255, 255, 255, 0.8), 157rpx 358rpx 0 0.4rpx rgba(255, 255, 255, 0.8), 284rpx 249rpx 0 0.2rpx rgba(255, 255, 255, 0.8), 200rpx 337rpx 0 0.2rpx rgba(255, 255, 255, 0.8), 58rpx 218rpx 0 0.3rpx rgba(255, 255, 255, 0.8), 314rpx 389rpx 0 0.3rpx rgba(255, 255, 255, 0.8), 6rpx 254rpx 0 0.5rpx rgba(255, 255, 255, 0.8), 10rpx 264rpx 0 0.5rpx rgba(255, 255, 255, 0.8), 159rpx 200rpx 0 0.5rpx rgba(255, 255, 255, 0.8);}

案例星空 🌃+ 极光  codepen.io/yoyochen/pe…

@function randomNum($max, $min: 0, $u: 1) {
	@return ($min + random($max)) * $u;
}

@function randomColor() {
    @return rgb(randomNum(255), randomNum(255), randomNum(255));
}

@function shadowSet($maxWidth, $maxHeight, $count) {
    $shadow : 0 0 0 0 randomColor();
    
    @for $i from 0 through $count {         
        $x: #{random(10000) / 10000 * $maxWidth};
        $y: #{random(10000) / 10000 * $maxHeight};

        
        $shadow: $shadow, #{$x} #{$y} 0 #{random(5)}px randomColor();
    }
    
    @return $shadow;
}

案例 星空穿梭 codepen.io/yoyochen/pe…

$speed: 8s;
$wordCount: 4;

.g-container {
    position: relative;
    ...
    filter: contrast(15);
}
.word {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: change $speed infinite ease-in-out;

    @for $i from 0 to $wordCount {
        &:nth-child(#{$i + 1}) {
            animation-delay: ($speed / ($wordCount + 1) * $i) - $speed;
        }
    }
}

@keyframes change {
    0%,
    5%,
    100% {
        filter: blur(0px);
        opacity: 1;
    }
    50%,
    80% {
        filter: blur(80px);
        opacity: 0;
    }
}
编译后：
.word:nth-child(1) {  -webkit-animation-delay: -8s;          animation-delay: -8s;}.word:nth-child(2) {  -webkit-animation-delay: -6.4s;          animation-delay: -6.4s;}.word:nth-child(3) {  -webkit-animation-delay: -4.8s;          animation-delay: -4.8s;}.word:nth-child(4) {  -webkit-animation-delay: -3.2s;          animation-delay: -3.2s;}

案例文字快闪  codepen.io/yoyochen/pe…