Refactor(App): Change sass to less

src/components/Playground/CodeEditor/Editor/editor.less

@@ -1,23 +1,16 @@
-@mixin keyframes($animationName) {
-  @-webkit-keyframes #{$animationName} {
-    @content
+.keyframes(@animationName, @content) {
+  animation-name: @animationName;
+  @-webkit-keyframes @animationName {
+    @content();
   }
-  @-moz-keyframes #{$animationName} {
-    @content
+  @-moz-keyframes @animationName {
+    @content();
   }
-  @-o-keyframes #{$animationName} {
-    @content
+  @-o-keyframes @animationName {
+    @content();
   }
-  @keyframes #{$animationName} {
-    @content
-  }
-}
-
-@mixin unique-keyframes {
-  $animationName: unique-id();
-  animation-name: $animationName;
-  @include keyframes($animationName) {
-    @content
+  @keyframes @animationName {
+    @content();
   }
 }
 
@@ -77,15 +70,13 @@
     width: 10px;
     height: 10px;
     border-radius: 50%;
-    border: {
-      top: 2px #666 solid;
-      bottom: 2px #ddd solid;
-      left: 2px #ddd solid;
-      right: 2px #ddd solid;
-    };
+    border-top: 2px #666 solid;
+    border-right: 2px #ddd solid;
+    border-bottom: 2px #ddd solid;
+    border-left: 2px #ddd solid;
     animation: .6s linear infinite;
 
-    @include unique-keyframes {
+    .keyframes(fUHD7o, {
       0% {
         transform: rotateZ(0);
       }
@@ -93,6 +84,6 @@
       100% {
         transform: rotateZ(360deg);
       }
-    }
+    });
   }
-}
+}

src/components/Playground/CodeEditor/Editor/index.tsx

@@ -1,6 +1,6 @@
 import { editor, Selection } from 'monaco-editor'
 import MonacoEditor, { Monaco } from '@monaco-editor/react'
-import '@/components/Playground/CodeEditor/Editor/editor.scss'
+import '@/components/Playground/CodeEditor/Editor/editor.less'
 import '@/components/Playground/CodeEditor/Editor/loader'
 import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared'
 import { fileNameToLanguage, tsconfigJsonDiagnosticsOptions } from '@/components/Playground/files'

src/components/Playground/CodeEditor/FileSelector/index.tsx

@@ -1,4 +1,4 @@
-import '@/components/Playground/CodeEditor/FileSelector/file-selector.scss'
+import '@/components/Playground/CodeEditor/FileSelector/file-selector.less'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import { IFiles } from '@/components/Playground/shared'

src/components/Playground/CodeEditor/index.tsx

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import '@/components/Playground/CodeEditor/code-editor.scss'
+import '@/components/Playground/CodeEditor/code-editor.less'
 import FlexBox from '@/components/common/FlexBox'
 import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared'
 import {

src/components/Playground/Output/Preview/Render.tsx

@@ -1,5 +1,5 @@
 import { ChangeEvent } from 'react'
-import '@/components/Playground/Output/Preview/render.scss'
+import '@/components/Playground/Output/Preview/render.less'
 import { COLOR_FONT_MAIN } from '@/constants/common.constants'
 import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw'
 import HideScrollbar from '@/components/common/HideScrollbar'

src/components/Playground/Output/Preview/index.tsx

@@ -1,4 +1,4 @@
-import '@/components/Playground/Output/Preview/preview.scss'
+import '@/components/Playground/Output/Preview/preview.less'
 import { IFiles, IImportMap } from '@/components/Playground/shared'
 import Compiler from '@/components/Playground/compiler'
 import Render from '@/components/Playground/Output/Preview/Render'

src/components/Playground/Output/Preview/render.less

@@ -1,5 +1,3 @@
-@use '@/assets/css/constants' as constants;
-
 [data-component=playground-output-preview-render] {
   border: none;
   height: 100%;

src/components/Playground/Output/Transform/index.tsx

@@ -1,6 +1,6 @@
 import MonacoEditor from '@monaco-editor/react'
 import { Loader } from 'esbuild-wasm'
-import '@/components/Playground/Output/Transform/transform.scss'
+import '@/components/Playground/Output/Transform/transform.less'
 import { IFile, ITheme } from '@/components/Playground/shared'
 import { cssToJsFromFile, jsonToJsFromFile } from '@/components/Playground/files'
 import Compiler from '@/components/Playground/compiler'

src/components/Playground/index.tsx

@@ -1,4 +1,4 @@
-import '@/components/Playground/playground.scss'
+import '@/components/Playground/playground.less'
 import { IFiles, IImportMap, ITsconfig } from '@/components/Playground/shared'
 import {
     ENTRY_FILE_NAME,