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,

src/components/common/Card.tsx

@@ -1,5 +1,5 @@
 import { DetailedHTMLProps, HTMLAttributes } from 'react'
-import '@/assets/css/components/common/card.scss'
+import '@/assets/css/components/common/card.less'
 
 type CardProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
 

src/components/common/FitCenter.tsx

@@ -1,5 +1,5 @@
 import { DetailedHTMLProps, HTMLAttributes } from 'react'
-import '@/assets/css/components/common/fit-center.scss'
+import '@/assets/css/components/common/fit-center.less'
 
 interface FitCenterProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     vertical?: boolean

src/components/common/FitFullscreen.tsx

@@ -1,5 +1,5 @@
 import { DetailedHTMLProps, HTMLAttributes } from 'react'
-import '@/assets/css/components/common/fit-fullscreen.scss'
+import '@/assets/css/components/common/fit-fullscreen.less'
 
 interface FitFullscreenProps
     extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {

src/components/common/FlexBox.tsx

@@ -1,5 +1,5 @@
 import { DetailedHTMLProps, HTMLAttributes } from 'react'
-import '@/assets/css/components/common/flex-box.scss'
+import '@/assets/css/components/common/flex-box.less'
 
 interface FlexBoxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     direction?: 'horizontal' | 'vertical'

src/components/common/FullscreenLoadingMask.tsx

@@ -1,5 +1,5 @@
 import Icon from '@ant-design/icons'
-import '@/assets/css/components/common/fullscreen-loading-mask.scss'
+import '@/assets/css/components/common/fullscreen-loading-mask.less'
 import { COLOR_FONT_MAIN } from '@/constants/common.constants'
 import FitFullscreen from '@/components/common/FitFullscreen'
 

src/components/common/HideScrollbar.tsx

@@ -6,7 +6,7 @@ import {
     HTMLAttributes,
     UIEvent
 } from 'react'
-import '@/assets/css/components/common/hide-scrollbar.scss'
+import '@/assets/css/components/common/hide-scrollbar.less'
 
 interface HideScrollbarProps
     extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {

src/components/common/Indicator.tsx

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import '@/assets/css/components/common/indicator.scss'
+import '@/assets/css/components/common/indicator.less'
 
 interface IndicatorProps {
     total: number

src/components/common/LoadingMask.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
-import '@/assets/css/components/common/loading-mask.scss'
+import '@/assets/css/components/common/loading-mask.less'
 import { COLOR_FONT_MAIN } from '@/constants/common.constants'
 
 interface LoadingMaskProps extends PropsWithChildren {

src/components/common/Sidebar/index.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
-import '@/assets/css/components/common/sidebar.scss'
+import '@/assets/css/components/common/sidebar.less'
 import { getLocalStorage, setLocalStorage } from '@/util/browser'
 import Item from '@/components/common/Sidebar/Item'
 import ItemList from '@/components/common/Sidebar/ItemList'

src/components/common/UrlCard.tsx

@@ -1,7 +1,7 @@
 import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
 import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
-import '@/assets/css/components/common/url-card.scss'
+import '@/assets/css/components/common/url-card.less'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
 

src/components/dnd/DragHandle.tsx

@@ -1,6 +1,6 @@
 import { HandleContextInst } from '@/components/dnd/HandleContext'
 import Icon from '@ant-design/icons'
-import '@/assets/css/components/dnd/drag-handle.scss'
+import '@/assets/css/components/dnd/drag-handle.less'
 
 interface DragHandleProps {
     padding?: string | number

src/components/dnd/DropMask.tsx

@@ -1,4 +1,4 @@
-import '@/assets/css/components/dnd/drop-mask.scss'
+import '@/assets/css/components/dnd/drop-mask.less'
 import Icon from '@ant-design/icons'
 
 const DropMask = () => {

src/components/system/SettingCard.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
-import '@/assets/css/components/system/setting-card.scss'
+import '@/assets/css/components/system/setting-card.less'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
 import Permission from '@/components/common/Permission'

src/components/system/StatisticsCard.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
-import '@/assets/css/components/system/statistics-card.scss'
+import '@/assets/css/components/system/statistics-card.less'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
 import LoadingMask from '@/components/common/LoadingMask'

src/components/tools/LoadMoreCard.tsx

@@ -1,6 +1,6 @@
 import VanillaTilt from 'vanilla-tilt'
 import Icon from '@ant-design/icons'
-import '@/assets/css/components/tools/load-more-card.scss'
+import '@/assets/css/components/tools/load-more-card.less'
 import FlexBox from '@/components/common/FlexBox'
 import Card from '@/components/common/Card'
 

src/components/tools/RepositoryCard.tsx

@@ -1,6 +1,6 @@
 import { DetailedHTMLProps, HTMLAttributes } from 'react'
 import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
-import '@/assets/css/components/tools/repository-card.scss'
+import '@/assets/css/components/tools/repository-card.less'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
 import Draggable from '@/components/dnd/Draggable'
@@ -24,7 +24,6 @@ interface RepositoryCardProps
 
 const RepositoryCard = ({
     style,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     ref,
     icon,
     toolName,

src/components/tools/StoreCard.tsx

@@ -2,7 +2,7 @@ import { DetailedHTMLProps, HTMLAttributes, MouseEvent } from 'react'
 import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
 import protocolCheck from 'custom-protocol-check'
 import Icon from '@ant-design/icons'
-import '@/assets/css/components/tools/store-card.scss'
+import '@/assets/css/components/tools/store-card.less'
 import { COLOR_BACKGROUND, COLOR_MAIN, COLOR_PRODUCTION } from '@/constants/common.constants'
 import { checkDesktop, omitText } from '@/util/common'
 import { getLoginStatus, getUserId } from '@/util/auth'
@@ -35,7 +35,7 @@ interface StoreCardProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement
 
 const StoreCard = ({
     style,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
     ref,
     icon,
     toolName,