Laravel Web 實戰入門每章課程總結 - 4.優化頁面

本章問題：

Bootstrap 前端框架的基本介紹與使用；
Laravel Mix 前端工作流；
Sass 語法的基本使用；
區域性檢視的定義和引用；
命名路由的使用；

嘗試自我解答：

Sass語法的基本使用：

1. 定義變數：可在sass檔案中定義變數並使用，如：

   $header-color: #fff;
   header {
    color: $header-color;
   }

2. 巢狀使用：書寫語法上，同一個父標籤可以用巢狀的寫法，更簡便：

   body header {
    color: #fff;
   }
   body footer {
    color: #555;
   }

   可以寫成：

   body {
    header {
      color: #fff;
    }
    footer {
      color: #555;
    }
   }

3. 引用：類似於巢狀

   body {
    a {
      color: #777;
    }
    a:hover {
      color: #555;
    }
   }

   可以寫為：

   body {
    a {
      color: #777;
      &:hover {
        color: #555;
      }
    }
   }

區域性檢視定義

以 _ 為字首的檔案為檢視檔案的區域性檢視。通過 @include() 來引用區域性檢視檔案；

命名路由的使用

在 route/web.php 檔案中定義路由；

Route::get('help`, 'StaticPagesController@help')->name('help');

在檢視檔案中使用 {{ route('name') }} 來使用定義好的路由。

本作品採用《CC 協議》，轉載必須註明作者和本文連結