如何在view中使用scss

WY90800 的个人博客 / 74 / 1 / 创建于 1年前 / 更新于 1年前

简介

在开发过程中由于没有前后端分离，编写部分前端代码，其中编写css的时候各种class穿插，此时如果可以使用 scss 或者 less 将能大大方便 css 样式的编写。下面将实现在 blade 中使用 scss 做 css 的预处理。

思路

问题一: 如何使用更为优雅?

参照vue中，在完成各种预处理器的配置后，使用 scss 时需要在 style 标签中添加属性 lang="scss" 此处亦希望能达到该效果。

<style lang='scss'>
.body{
    .a{
    }
}
</style>

问题二: `scss`编译器

scss编译器是实现该功能的核心部分，很幸运的是有国外的朋友开发了基于php的scss编译器 scssphp 此处将使用该编译器完成scss的编译工作。

很幸运，到此已经具备了足够的条件，接下来将提供一种实现方案，供有需要的朋友参考

一. 安装scss

安装命令 :

composer require scssphp/scssphp

二. `app/Providers/AppServiceProvider.php`

<?php
namespace App\Providers;

use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
use ScssPhp\ScssPhp\Compiler;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {

        $this->app->singleton(Compiler::class,function($app){
            //创建编译器
            return new Compiler();
        });

    }


    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        //scss 预编译
        Blade::precompiler(function ($value) {
            return preg_replace_callback("/(<style[^>]*(lang\s*=\s*['\"]scss['\"])[^>]*>)(.*?)(<\/style>)/s", function ($matches) {
                /** @var Compiler $cc */
                $cc =  app()->make(Compiler::class);
                return str_replace($matches[2],"",$matches[1]) . $cc->compileString(trim($matches[3]))->getCss() . $matches[4];
            }, $value);
        });

    }
}

一切正常的情况下，此时已经可以像下面一样使用，

<style lang='scss'>
.body{
    .c{
        width: 100px;
    }
}
</style>

在访问view时，样式部分将会被预编译进模板文件的缓存中。

三. 进阶—注册scss内部函数

在scss的使用中，可能会使用到部分function，如：

<style lang="scss">

        @function calcWidth($bw){
            @return sqrt(pow($bw,2)*2)*cos(15*3.1415926/180);
        }

        $cWidth: calcWidth(80);

        .body{
            --def-width:  #{$cWidth}px;

            .c{
                width: var(---def-width);
            }
        }
</style>

此时非自带的function,如 sqrt pow cos 必须使用 registerFunction方法进行注册。

<?php
namespace App\Providers;

use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
use ScssPhp\ScssPhp\Compiler;

class AppServiceProvider extends ServiceProvider
{
...
    public function register()
    {

        $this->app->singleton(Compiler::class,function($app){
            //创建编译器
            $cc = new Compiler();
            //注册scss中的数学部分方法
            $cc->registerFunction('pow',function($args){
                list($n,$ex)=$args;
                return pow($n->getDimension(),$ex->getDimension());
            });
            $cc->registerFunction('sqrt',function($args){
                list($n)=$args;
                return sqrt($n->getDimension());
            });
            $cc->registerFunction('sin',function($args){
                list($n)=$args;
                return sin($n->getDimension());
            });
            $cc->registerFunction('cos',function($args){
                list($n)=$args;
                return cos($n->getDimension());
            });
            return $cc;
        });

    }
    ...
}