flazzarotto/sass-generator

CSS 和 Sourcemaps SCSS 编译服务及命令,适用于 Symfony3

0.2.0 2016-11-04 11:06 UTC

This package is auto-updated.

Last update: 2024-09-14 20:30:54 UTC


README

此 Symfony3 扩展使用 leafo/scssphpkoala-framework/sourcemaps 将目录中的所有 scss 文件编译到另一个目录的 css 文件中。您还可以生成 css sourcemaps。它主要由一个 sass 编译器/源映射生成服务和一个命令行工具组成。

## 配置

  1. 运行 composer require flazzarotto/sass-generator dev-master

  2. 修改 AppKernel.php

    $bundles = [
      // bunch of other bundles
      new Flazzarotto\SassGeneratorBundle\SassGeneratorBundle(), // <= add this line
    ];
  3. (可选) 您可以通过在 composer.json 中添加命令到 scripts > post-install-cmd/post-update-cmd/warmup 来自动化 sass 生成。有关 sass 生成服务及其命令行工具的更多详细信息,请参阅下文。

使用方法

此包的主要目标是生成从 symfony3 项目中 scss 文件列表编译出的 css 文件及其关联的 sourcemaps。如果您需要在像 Heroku 这样的云服务上发布项目,这将非常有用。使用此包有两种方法:

  1. 命令行: php bin/console sass:generate [输入文件夹:输出文件夹] [--source-maps] [--line-numbers] [--precision x] [--format myFormat]

    • 输入文件夹:输出文件夹 : 应该像 "web/[...]scssInputFolder:web/[...]cssOutputFolder" 这样的内容 - 默认值 : web/scss:web/css
    • source-maps : 如果设置,则将生成与 css 文件相同的文件夹中的源映射
    • line-number : 将生成包含原始 sass 行号的 CSS 文件
    • precision : 设置浮点数的精度(默认 sass 值为 5)
    • format : 以下想要的格式:compactcompressedcrunchedexpandednested

    示例

    • php bin/console sass:generate web/scss:web/css --source-maps 将生成压缩的 css 文件和 sourcemap 文件
    • php bin/console sass:generate web/scss:web/css --line-numbers 将仅生成包含原始 sass 行号的注释 CSS 文件(不能与压缩或压缩格式一起使用)
    • php bin/console sass:generate web/scss:web/css --format compressed 将仅生成最小化 CSS(不能与源映射选项一起使用)
  2. 服务

    如果您需要比命令行工具更灵活,或者打算创建自己的命令,可以使用此服务。以下是初始化服务的方法:

    // get the service inside a controller
    $sassGenerator = $this->get('sass_generator');
    
    $sassGenerator->init($sourceMaps, $lineNumbers, $precision, $format, "inputFolder:outputFolder");

    参数与命令行工具相同(将选项设置为 true 以获取相同的结果)。然后您可以使用以下方法

    // generate css files in output folder from all scss files found in input folder.
    $sassGenerator->compileAll();
    
    // get all scss files found in folder
    $files = $sassGenerator->getSourceFiles();
    
    // compile only one file in css
    $sassGenerator->compile($file[0]); // false on failure, path to css file on success
    
    // compile only one file in sourcemap - css must have been generated before 
    $sassGenerator->generateMap($file[0]); // false on failure, path to sourcemap file on success
    
    // get all warnings encountered during compilation or sourcemap generation
    $sassGenerator->getWarnings(); 
    
    // you can re-initialise the service at any time to compile another scss folder
    $sassGenerator->init(/*params*/);