css - 如何将 scss 转换为 css-6ren

css - 如何将 scss 转换为 css

转载作者：可可西里更新时间：2023-11-01 13:23:07

<分区>

大家好，我找到了一个 html 代码，它使用 scss。当我尝试转换它时，我遇到了很多错误，任何人都可以为我转换它。我是 html 的初学者，我对 scss 一无所知 this is the code from the website

@function rndNumber($limit) {
  @return random($limit);
}

$globalSize: 400%;
$colorsList: ($white, $white, $white);
$bgDots: ();

$resultPosList: ();
$prevPosList: ();

$resultSizeList: ();
$prevSizeList: ();

$randomSize: 0;

@for $i from 1 through 16 {
    $thisColor: nth($colorsList, rndNumber(3));
    $bgDots: append($bgDots, radial-gradient($thisColor, $thisColor 70%, transparent 71%), 'comma');

    $resultPosList: append($resultPosList, (rndNumber(100) * 1%) (rndNumber(100) * 1%), 'comma');
    $prevPosList: append($prevPosList, 50% 50%, 'comma');

    $randomSize: rndNumber(3) * 2%;
    $resultSizeList: append($resultSizeList, $randomSize $randomSize, 'comma');
    $prevSizeList: append($prevSizeList, .25em .25em, 'comma');
}

.sparks {
    &:before {
        content: '';
        position: absolute;
        pointer-events: none;
        z-index: 1;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: $globalSize;
        height: $globalSize;

        background-image:       $bgDots;
        background-size:        $prevSizeList;
        background-position:    $prevPosList;
        background-repeat:      no-repeat;

        transition: all 0s ease-out;
        transition-delay:  0;
    }
}

.card {
    height: 15em;
    border-radius: 15em 15em 0 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-color: rgba($white, .2);
}

.rating {
    &__label {
        cursor: pointer;
        padding: 1em;
        display: flex;
        box-sizing: border-box;
        transition: all $fastDuration ease-in-out;
        border: 1px solid rgba($white, .2);
        margin-left: -1px;
        &__icon {
            z-index: 2;
            transition: fill $fastDuration ease-in-out;
        }
        @for $i from 1 through 5 {
            &:nth-of-type(#{5-$i}) .rating__label__icon {
                transition-delay: ($fastDuration / 4) * $i;
            }
        }
    }
    &__background {
        width: 100%;
        height: 100%;
        min-width: 20%;
        position: absolute;
        border-radius: 3em;
        z-index: -1;
        bottom: 0;
        left: 0;
        transition: width $fastDuration $bezier;
        background-color: $white;
    }
    [type='radio'] {
        display: none;
    }
    &__fx {
        &--0 {
            perspective: 20em;
            .rating__label {
                transform-style: preserve-3d;
                @for $i from 1 through 5 {
                    &:nth-of-type(#{5-$i}) {
                        transition-delay: ($fastDuration / 4) * $i;
                    }
                }
            }
            [type='radio'] {
                display: none;
                &:checked ~ .rating__label {
                    background-color: $white;
                    transform: rotateY(180deg);
                    .rating__label__icon {
                        fill: $coral;
                    }
                }
                &:first-of-type:checked + .rating__label:before {
                    background-size: $resultSizeList;
                    background-position: $resultPosList;
                    transition-duration:  $slowDuration;
                    transition-delay:  $fastDuration * 1.3;
                    opacity: 0;
                }
            }
        }
        &--1 {
            position: relative;
            @for $i from 1 through 24 {
                $thisColor: nth($colorsList, rndNumber(3));
                $bgDots: append($bgDots, radial-gradient($thisColor, $thisColor 70%, transparent 71%), 'comma');

                $resultPosList: append($resultPosList, (rndNumber(100) * 1%) (rndNumber(100) * 1%), 'comma');
                $prevPosList: append($prevPosList, 50% 50%, 'comma');

                $randomSize: rndNumber(3) * 2%;
                $resultSizeList: append($resultSizeList, $randomSize $randomSize, 'comma');
                $prevSizeList: append($prevSizeList, .25em .25em, 'comma');
            }
            .rating__label {
                transform-style: preserve-3d;
                border-left-color: transparent;
                border-right-color: transparent;
                &:first-of-type {
                    border-radius: 0 3em 3em 0;
                    border-right-color: rgba($white, .2);
                    position: relative;
                }
                &:last-of-type {
                    border-radius: 3em 0 0 3em;
                    border-left-color: rgba($white, .2);
                }
            }
            [type='radio'] {
                display: none;
                @for $j from 5 through 1 {
                    &:nth-of-type(#{$j}):checked ~ {
                        .rating__label {
                            .rating__label__icon {
                                fill: $coral;
                            }
                        }
                        .rating__background {
                            $thisColor: hsl((340 - ($j * 20)), 56%, 66%);
                            $thisPos: 20% * (6 - $j);
                            // background-color: saturate($thisColor, 55%);
                            width: $thisPos;
                        }
                    }
                }
                &:first-of-type:checked + .rating__label:before {
                    background-size: $resultSizeList;
                    background-position: $resultPosList;
                    transition-duration:  $slowDuration;
                    transition-delay:  $fastDuration;
                    opacity: 0;
                }
            }
        }
        &--2 {
            position: relative;
            @for $i from 1 through 18 {
                $thisColor: nth($colorsList, rndNumber(3));
                $bgDots: append($bgDots, radial-gradient($thisColor, $thisColor 70%, transparent 71%), 'comma');

                $resultPosList: append($resultPosList, (rndNumber(100) * 1%) (rndNumber(100) * 1%), 'comma');
                $prevPosList: append($prevPosList, 50% 50%, 'comma');

                $randomSize: rndNumber(3) * 2%;
                $resultSizeList: append($resultSizeList, $randomSize $randomSize, 'comma');
                $prevSizeList: append($prevSizeList, .25em .25em, 'comma');
            }
            .rating__label {
                transform-style: preserve-3d;
                .rating__label__icon {
                    fill: $coral;
                }
            }
            [type='radio'] {
                display: none;
                @for $j from 5 through 1 {
                    &:nth-of-type(#{$j}):checked ~ {
                        .rating__label {
                            .rating__label__icon {
                                fill: $white;
                            }
                        }
                    }
                }
                &:first-of-type:checked + .rating__label:before {
                    background-size: $resultSizeList;
                    background-position: $resultPosList;
                    transition-duration:  $slowDuration;
                    transition-delay:  $fastDuration;
                    opacity: 0;
                }
            }
        }
    }
}