SCSS 是一種流行的 CSS 預處理器，它為 CSS 提供了許多強大的功能，如變數、混入、繼承等。隨著現代前端開發框架（如 React 和 Vue）的興起，SCSS 也越來越多地用於這些框架中，為開發者提供更高效的樣式管理和組織方式。

來源:https://radixweb.com/blog/react-vs-vue

一、SCSS 在 React 中的應用

在 React 中使用 SCSS 的好處是可以利用組件化的特性，將樣式與組件結合在一起，實現更好的維護性。以下是如何在 React 中使用 SCSS 的步驟：

1.安裝 SCSS

支持 使用 Create React App 建立的項目，可以通過以下命令安裝 node-sass：

npm install node-sass

2.創建 SCSS 檔案

創建一個名為 styles.scss 的檔案，並在其中撰寫 SCSS 代碼：

$primary-color: #3498db;

.button {
  background-color: $primary-color;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

.button:hover {
  background-color: darken($primary-color, 10%);
}

3.導入 SCSS 檔案

在 React 組件中導入 SCSS 檔案：

import React from 'react';
import './styles.scss';

const App = () => {
  return (
    <button className="button">Click Me</button>
  );
};

export default App;

二、SCSS 在 Vue 中的應用

Vue 也支援 SCSS，可以在單文件組件中直接使用 SCSS。以下是如何在 Vue 中使用 SCSS 的步驟：

1.安裝 SCSS

支持 在 Vue CLI 創建的項目中，可以通過以下命令安裝 sass 和 sass-loader：

npm install sass sass-loader

2.使用 SCSS

在 Vue 單文件組件中 在 .vue 文件的 標籤中設置 lang 屬性為 scss：

<template>
  <button class="button">Click Me</button>
</template>

<script>
export default {
  name: 'App'
};
</script>

<style lang="scss">
$primary-color: #3498db;

.button {
  background-color: $primary-color;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;

  &:hover {
    background-color: darken($primary-color, 10%);
  }
}
</style>

總而言之，SCSS 在現代前端框架中得到了廣泛應用，特別是在 React 和 Vue 中，其組件化的特性讓樣式管理更加靈活喔!