iT邦幫忙

2021 iThome 鐵人賽

DAY 4
1
Modern Web

SASS 基礎初學三十天系列 第 4

DAY 04 實作環境配置 - 1

建立專案

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

Untitled

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

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

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

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

Untitled

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

安裝套件

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

yarn add node-sass

Untitled

新增 SASS File

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

Untitled

在檔案中,我們先來個基本變數跟 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

Untitled

yarn upgrade

完成後再重新打開

yarn start

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

Untitled


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


上一篇
DAY 03 SCSS ? SASS ?
下一篇
DAY 05 實作環境配置 - 2
系列文
SASS 基礎初學三十天30

尚未有邦友留言

立即登入留言