建立專案

首先先在 GitHub 上建立起一個練習專案吧！

輸入好自己的專案資訊後，依照指令將 local 中建立的專案丟上去！

為了 demo 方便，這邊直接使用 react 的 creat-react-app 快速建立一個前端的專案內容～

這邊附上官方的快速安裝指令

npx create-react-app my-app
cd my-app
npm start

git 接上後，我們就擁有一個可以亂玩實作 sass 的專案囉！

安裝套件

因為目前習慣用 react 所以就使用 react 來搭配 sass 的實作，首先要做的是安裝～

yarn add node-sass

新增 SASS File

之後新增一個練習用的 sass 檔案在 src 資料夾中

在檔案中，我們先來個基本變數跟 sass 的樣式套用

$primaryColor: blue 
h1 
  color: $primaryColor

這邊用到了兩種方法

• 變數形式 $ ： sass 的寫法，讓我們得以在 css 中建立一種變數的方式去統一修改顏色。
• h1 套用變數顏色：在 h1 中的內容，就會依據 color 中所設定的變數顏色顯示。

再來我們要將這個 sass 檔案去套用到 App.js 中，使其生效，為了方便檢視效果，先在 App.js 中建立一個 h1 ，並且在上方 import './MyFirstSass.sass';

import logo from './logo.svg';
import './App.css';
import './MyFirstSass.sass';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1>this is blue h1</h1>
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

剛好遇到了版本問題，先關閉 node 並且更新 package

yarn upgrade

完成後再重新打開

yarn start

我們看到一個有藍色 h1 的字，恭喜你成功啦！

除此之外，也歡迎大家走走逛逛關於我們團隊夥伴的文章
lu23770127 - SASS 基礎初學三十天
10u1 - 糟了！是世界奇觀！
juck30808 - Python - 數位行銷分析與 Youtube API 教學
HLD - 淺談物件導向與Design Pattern介紹
SiQing47 - 前端？後端？你早晚都要全端的，何不從現在開始？