Wesbos 的 CSS Grid 課程筆記第二天，至於為什麼沒有第一天是因為課程內容的第一天， Wesbos 在簡單介紹此課程，至於第二天的則是環境設定、工具介紹等。

Demo | Github

編輯器

可以參考 Wesbos 的 Editor + Terminal ，文字編輯器有很多選擇 Atom、Brackets、SublimeText 或是 Visual Studio Code

編輯器之外，尚有編輯器的擴充功能，此處提到的是 emmet ，此功能可以快速建置 html 頁面，假如使用 Visual Studio Code 則是已經內建在編輯器功能中了
，使用方式相當簡易，直接在 html 頁面上輸入如下語法後，會顯示智能提示訊息

1	.container1>.item3

上述語法會轉換為

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Firefox 開發者版本

此次主題是 CSS Grid ，由於 Firefox 內建的開發工具有支援 grid 的呈現，其他瀏覽器的開發工具對於 grid 的支援度較不完整，所以此次建議使用 Firefox 瀏覽器，至於是否使用開發者版本則見仁見智

Node.js

開發前端大部分都會使用到的 Node.js ，安裝後，即可透過 npm 安裝 browser-sync ，其 package.json 如下所示，瀏覽器路徑請按照各自安裝路徑調整

{
  "name": "css-grid",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "run-script-os",
    "start:win32": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' --directory --port 7777 --browser \"C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe",
    "//": "Hello! If you are having trouble running this command. Try changing Firefox Developer Edition to FirefoxDeveloperEdition",
    "start:darwin:linux": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' --directory --port 7777 --browser 'Firefox Developer Edition'"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.13",
    "run-script-os": "^1.0.3"
  }
}

建立好 package.json 後，直接輸入以下指令，安裝套件

npm i

筆記與備註事項

CSS 變數

CSS變量是由CSS作者定義的實體，其中包含要在整個文檔中重複使用的特定值。使用自定義屬性來設置變量名，並使用特定的var()來訪問。（比如color: var(–main-color) ;）。
資料來源 - MDN

ShunNien's Blog

CSS Grid 筆記 02-Starter Files and Tooling Setup

編輯器

Firefox 開發者版本

Node.js

筆記與備註事項

CSS 變數

參考資料