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 协议》，转载必须注明作者和本文链接