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') }} 来使用定义好的路由。

本文章首发在 Laravel China 社区