2
你好傢伙我發現了一個html代碼，它使用scss.when我試圖轉換它我有很多錯誤任何人都可以將它轉換爲我。我是一個在html中的初學者，我沒有在SCSS this is the code from the website如何轉換scss到css
@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;
}
}
}
}
}
想法謝謝您的幫助
我收到一個錯誤，說Undefined變量：「$ fastDuration」。 – Amal
@Amal這意味着，你需要更多的.scss文件，它的定義。 – Zydnar
您鏈接的CodePen示例包含了可能用於定義某些變量的其他SCSS文件。另外，您可以隨時訪問CodePen上的CSS窗格並直接查看編譯後的CSS。 – Terry