開發環境架設(一) : Bootstrap 核心、SCSS架構

每日一談

嗨，大家好 ! 我是阿蘇
到了第20天啦 ，剩下的天數都會來分享關於正式開發 Side project 的實作技巧，首先先分享在第三階段 - 開發環境架設，當進入這階段其實有很多環境架構跟基礎設定要做，避免開發時手忙腳亂，所以在開發環境要先做好準備。

讓我們正式進入主題 看下去吧 !

開發環境架設(一)

• 選擇前端框架
• Bootstrap 核心
• SCSS 架構

選擇前端框架

這邊在開開發上我是以 bootstrap 為核心進行專案開發，所以後面教學都會以 bootstrap 為主，選擇使用框架原因是可以幫我們省下大量寫 class 時間，本身就有寫好的預設 class ，也有 RWD 響應式，所以當你熟悉 HTML/CSS 運用就可以進入到框架學習，開始學習正式開發我們會用到的知識。

框架特色
將 bootstrap 預設寫好class，套入標籤(不用在自己寫)、快速開發

Bootstrap 優點

• 節省開發時間，有寫好常見class
• 可自訂擴增樣式
• 預設的樣式，皆有支援響應式
• 多元化的元件、支援js

Bootstrap 缺點

• 有固定樣式，要照他的格式，不然無法顯示
• 覆蓋權重高，須了解覆蓋原理
• 自訂樣式不方便，須熟悉 variables、utilities 擴充運用

推薦網站
Bootstrap 六角文檔
這邊可以查詢到 bs 的 class寫法，及相關元件運用方式

如何查看文檔

npm 安裝 bootstrap

首先我們要先使用 npm 安裝 bootstrap

注意事項: 使用 npm 安裝 ，需安裝 node.js，
1.安裝node.js
官網版本有分穩定版、最新版，可以挑選喜歡的使用

2. vscode 開啟終端機
   

3. npm 安裝 bootstrap
   
   

恭喜你成功安裝了 ! 其他 npm 套件也是這樣安裝的喔 ，在使用套件常常會看到npm的安裝方式 ，學習起來吧 !

Bootstrap 核心

第二步，當我們成功安裝了bootstrap ，我們要把 Bootstrap variables(變數)、utilities(工具) 先複製出來，這樣我們之後就可自己設定調整 bootstrap 裡面樣式也可以自行擴增，後面會在提到並說明

1. 複製 variables.scss、utilities.scss
這兩個檔案是修改bs 參數的重要兩個檔案，務必要把它複製出來，這樣我們在開發上我們只需要去修改copy出來後的兩個檔案，就可以自訂參數、客製化(複製出來後可自訂名稱、修改資料夾路徑)

2. 引入 bootstrap 至 all.scss
要注意是，因為bs!deafult 特性，如果你有自訂樣式就會取代原本 bs樣式，我們可以利用這方式來調整自訂，所資料夾路徑讀取順序要正確，我們要讓copy出來的 variable、utilities 檔案在 bootstarp 讀取之前，

這樣我們基礎的 Bootstrap 就安裝完畢了 ，下一篇會在分享如何設定基礎設計稿參數

SCSS 架構

我應該如何去規劃我的 side project scss架構呢 ?
在開發環境架設時，我們會預先將scss檔案做架構，來讓我們的專題變得有條有理，在事後開發完畢後也較好維護

範例- scss 架構參考
[Sass 7-1 Pattern](Sass 7-1 Pattern)

常見架構

• layout 區塊
• base 基礎
• util 工具
• components 元件
• page 頁面

不妨可以從這些開始慢慢讓你的scss架構更完整，試著參考架構你的 Scss

開發環境架設今天就分享到這邊，在開發時先把環境架設起來吧 !