# 議題一、scss編譯討論內容如下（著重在開發文件的流程／檔案開立方式）：

---

# 【一、介紹】
- 前處理 ( 變數$、物件map-get()、陣列nth($name,index)、函式function、繼承@extend、混合@mixin 、巢狀屬性... ) => 邏輯式的開發
- 後處理(AutoPrefixer)

---

## 1.好處
- 結構化、模組化、提高重用性 => 加快開發速度
- 壓縮CSS體積
- 語法相容性

---

## 2.基礎語法
- [Sass Basics](https://sass-lang.com/guide)

---

## 3.進階語法
- [@function](https://sass-lang.com/documentation/at-rules/function/)
- [色彩函數](https://sass-lang.com/documentation/modules/color/#lighten)
- ...

lighten(#999,10%)// #999增加百分之10亮度
draken(#999,10%)// #999,減少百分之10亮度

---

# 【二、案例】

---

## 1.聚洋

---

檔案放置在 專案名稱/web/css/scss 裡面


---


---


---

變數命名：$XXX


---

巢狀結構

---

不要空白的時候使用 "&"

---

RWD寫法


---

編譯出來的檔案


---
瀏覽器除錯



---

## 2.菁英

/*---------------------- 基礎設定 ----------------------*/
/* 回頂端 */
/*按鈕*/
/*RWD編輯器表格(X捲軸)*/
/*IE瀏覽器*/
/* 共用樣式設定 */
/* 漸層 */
/* header */
/* 會員登入後 */
/* header__下拉選單 */
/* --共用設定 */
/* --共用:卷軸 */
/* --共用:輸入框設定 */
/* --共用:下拉選單 */
/* 輸入框(預設樣式) */
/*input radio/checkbox樣式*/
/* --共用:輪播箭頭設定 */
/* --共用:輪播點點設定 */
/* --共用:播放按鈕 */
/* --共用:tag */
/* -共用:按鈕 */
/* 第三方按鈕 */
/* -共用:線段 */
/* -共用:頁碼 */
/* -共用:流程 */
/* 自定義頁面 */
/* 關於協會 */
/* 共用-單元二階選單(常見問題、部落格單元使用) */
/*---------------------- 頁面開始 ----------------------*/
/*全頁佈局*/
/* 首頁 */
/* 首頁banner */
/* 標題 */
/* 首頁內容 */
/* 推薦課程 */
/* 課程卡片 */
/* 課程卡片-tag */
/* 課程卡片-進度條 */
/* 課程卡片-老師 */
/* 課程金額 */
/* 課程下方按鈕 */
/* 線上熱門課程 */
/* 企業內訊 */
/* 文章 */
/* 文章--item */
/* 本月精選 */
/* footer */
/* 課程總覽開始 */
/* 課程總覽__文字列表 */
/* 課程總覽__BN */
/* 課程總覽__六大學院 */
/* 課程總覽__六大學院__代表色 */
/* 課程總覽__六大學院__小類 */
/* 課程總覽__搜尋 */
/* 課程總覽__搜尋__預設 */
/* 課程總覽__工具列 */
/* 課程底層 */
/* 課程底層__上面 */
/* 麵包屑 */
/* 收藏 */
/* 分享 */
/* 課程底層__特色 */
/* 課程底層__介紹 */
/* 課程底層__介紹__錨點 */
/* 課程底層__介紹開始 */
/* 課程底層__右側常駐 */
/* 課程底層__右側常駐__ad */
/* 課程底層__介紹__編輯器 */
/* 課程底層__介紹__編輯器__標題按鈕樣式 */
/* 課程底層__介紹__老師 */
/* 課程底層__介紹__檔案下載 */
/* 課程底層__介紹__目錄一覽 */
/* 課程目錄清單 */
/* 課程底層__textarea */
/* 課程底層__留言板 */
/* 課程底層__其他課 */
/* 上課教室 */
/* 上課教室--試看 */
/* 上課教室--收合清單 */
/* 上課教室__播放清單 */
/* 上課教室--已買 */
/* 搜尋 */
/* -搜尋共用:上方 */
/* 會員 */
/* -會員共用:輸入框 */
/* 會員--登入 */
/* 會員等級 */
/* 會員資料填寫 */
/* 但書文字 */
/* 電子發票/收據 */
/* 註冊/付款完成 */
/* 註冊/付款完成動畫 */
/* 會員中心 */
/* 彈窗 */
/* 彈窗--會員 */
/* 彈窗--客服 */
/* 彈窗--輸入框 */
/* -會員中心共用:架構 */
/*  -會員中心共用:右邊視窗區塊 */
/* -會員中心共用:右邊視窗區塊--成為菁英會員享有更多優惠 */
/* -會員中心共用:右邊視窗區塊--課程觀看紀錄 */
/* -會員中心共用:右邊視窗區塊--注意事項提醒 */
/* 會員中心__側選單 */
/* 會員中心 */
/* 基本資料 */
/* 系統公告 */
/* 我的課程 */
/* 我的最愛 */
/* 訂單管理 */
/* 訂單__費用明細 */
/* 會籍管理 */
/* 折扣券 */
/* 子帳號管理 */
/* 黃金存摺 */
/* 講師介紹 */
/* 講師介紹__底層 */
/* 聯絡我們 */
/* 常見問題 */
/* 常見問題__搜尋 */
/* 常見問題__內文 */
/* 常見問題__底層 */
/* 相關連結 */
/* 部落格 */
/* 熱門列表 */
/* 社群分享列表 */
/* 購物車 */
/* -購物車共用:架構 */
/* 外部合作課程報名 */

-- 變數(顏色、字級、漸層...)
-- common(共用)
 |--共用樣式設定 (回頂端、IE瀏覽器相容、RWD編輯器表格(X捲軸)、卷軸)

-- layout(布局)
 |--header
    |-- header__下拉選單
 |--footer
    |-- copyright

-- 組件
 |-- 按鈕
 |-- 表單
 |-- 麵包屑
 |-- 編輯器
 |-- 留言板
 |-- 彈窗
 |-- 卡片樣式
 |-- 圖文列表
 |-- 卡片列表
 |-- 輪播
   |-- 共用:播放按鈕
   |-- 共用:輪播點點設定
  |-- 下拉選單 


(各別頁面/單元)
-- 會員
 |-- 會員登入
 |-- 會員登入後
 |-- 會員中心

-- 首頁
 |-- banner
 |-- 

-- 關於協會

-- ....

---

# 【三、Bootstrap】

---

- Bootstrap 使用，直接調整Bootstrap的SCSS檔案，=>客製化系統，減少純客製化
- [bootstrap scss](https://github.com/twbs/bootstrap/tree/main/scss)

---

## 情境一：全站按鈕改為直角

      $border-radius:               .25rem !default;
      $border-radius-sm:            .2rem !default;
      $border-radius-lg:            .3rem !default;

---

## 情境二：設計稿色彩定義

        $blue:    #0d6efd !default;
        $indigo:  #6610f2 !default;
        $purple:  #6f42c1 !default;
        $pink:    #d63384 !default;
        $red:     #dc3545 !default;
        $orange:  #fd7e14 !default;
        $yellow:  #ffc107 !default;
        $green:   #198754 !default;
        $teal:    #20c997 !default;
        $cyan:    #0dcaf0 !default;

        $primary:       $blue !default;
        $secondary:     $gray-600 !default;
        $success:       $green !default;
        $info:          $cyan !default;
        $warning:       $yellow !default;
        $danger:        $red !default;
        $light:         $gray-100 !default;
        $dark:          $gray-900 !default;

---

## 情境三：客製化卡片
＝＞[調整_card.scss](https://github.com/twbs/bootstrap/blob/main/scss/_card.scss)　

---

## 情境四：客製化自己的 Bootstrap 架構
1. 複製Bootstrap.scss新增成一支自己的SCSS，EX: cust.scss
3. 去找要調整的代碼，EX:[調整變數](https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss)

$body-color:                $gray-900 !default;
$body-bg:                   $white !default;

4. 複製需要的變數並貼上，修改其數值

// Required
@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-color: #111;
$body-bg: #000;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

---

## 情境五：移除不需要的元件
註解調不要編譯就可以了，[bootstrap.scss]()https://github.com/twbs/bootstrap/blob/main/scss/bootstrap.scss

@import "mixins/banner";
@include bsBanner("");


// scss-docs-start import-stack
// Configuration
@import "functions";
@import "variables";
@import "variables-dark";
@import "maps";
@import "mixins";
@import "utilities";

// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
// @import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";
// scss-docs-end import-stack

---

# 【四、安裝 SCSS 環境】

---

## 1. 安裝 插件
- Visual Studio Code => [Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass)

---

## 2. 引入專案設定檔(Visual Studio Code)
- 專案目錄新增 .vscode 資料夾
- 新增 settings.json 檔案

  {
    "liveSassCompile.settings.excludeList": ["**/node_modules/**", ".vscode/**"],
    "liveSassCompile.settings.generateMap": true,
    "liveSassCompile.settings.formats": [
      {
        "format": "compressed",
        "extensionName": ".min.css",
         "savePath": "/css/"
      }
    ],
    "liveSassCompile.settings.autoprefix": ["> 1%", "last 2 versions","ie >= 11"],
  }

---

## 3. chrome設定

---
---
---
---
---
---
---
---
---
---
---
---

# 議題三、開發內容增添更多前端迴圈／陣列作法

    $list=[
        ['101廳','102廳','103貴賓室'],
        ['2樓Lobby','201廳','202廳','203廳','205廳','207貴賓室','208貴賓室'],
        ['3樓Lobby','301廳','307貴賓室'],
        ['4樓Lobby','401廳','402廳','403廳','405廳','406貴賓室','407貴賓室','408貴賓室']
    ];

<div class="floorList">
    <?php for($i=0;$i<sizeof($list);$i++) {?>
        <div class="titBox">
            <h3 class="tit"><?php echo $i +1?>F</h3>
            <div class="line"></div>
        </div>
        <div class="item">
            <div class="textBox">
                <div class="linkBox">
                    <?php for($j=0;$j<sizeof($list[$i]);$j++){ ?>
                    <a href="information-detail.htm" class="bgLink"><?php echo $list[$i][$j]?></a>
                    <?php } ?>
                </div>
                <div class="notes">
                    <p>※<a href="#">一樓平面圖</a>下載 / <a href="#">場地價目表</a>下載</p>
                    <p>洽詢專線 : 02-7724-0109# 1/ 663 </p>
                </div>
                <a href="#" class="link noLine">場地洽詢</a>
            </div>
            <div class="picBox">
                <?php for($j=0;$j<sizeof($list[$i]);$j++){ ?>
                    <img  src="<?php echo $web_url; ?>images/information/<?php echo $i+1 ?>f/<?php echo $j?>.jpg" alt="">
                <?php } ?>
            </div>
        </div>
    <?php } ?>
</div>

- [效果畫面：台大會議_本機](http://192.168.173.64/nthcc/web/information)
- 檔案位置：T:\nthcc\web\information.php