npm package: @journeyapps-solutions/cc-pdf-sass
Description: Sass Framework for PDF styling
Author: Anton Van Zyl
Latest version: 2.0.4

# cc-pdf-sass
This is the styling framework for PDF's and DocX. This enables RocketPDF to style a pdf/docx and Cloud Code to compile the style.

The sass files are included in the lib and enable use in CC.

## Documentation
View the docs @ https://journeyapps-solutions.github.io/cc-pdf-sass/

## Installation

#### Per machine

```
yarn add @journeyapps-solutions/cc-pdf-sass --save
```

Note, if you are having issues related to the package not being found after install. Double check that the yarn bin or npm bin is added to your path environmental variables

* run ``` yarn global bin ``` to get the yarn path to use.
* run ``` npm bin ``` to get the npm bin path.

## Deploying

When a version is deployed, the documentation style is also updated.
```
yarn version
```

### API

Both PDF and DocX use the same API to generate the required styles.

```js
/**
 * Compiles the SASS to a string for use in CC handlebars
 * @param  {string|array} input Path to the directory/directories containing the variable.scss and custom.scss
 * @return {string} Compile CSS
 */
compileSass: async function (path) {...}

/**
 * Copy over the variable.scss and custom.scss files to the process path.
 * @param  {string} destination Destination folder path
 */
initSassFiles: async function (destination) {...}
```

### Usage 

index.js:

PDF Example:
```js
// make sure config.js has the relevant credentials
const config = require('./config');
const PDFSass  = require('@journeyapps-solutions/cc-pdf-sass');

export async function run() {

  //The directory where variable.scss and custom.scss exists
  let _css = await PDFSass.PdfSassCompiler.compileSass(__dirname); 

  let data = {}
  data.generated_at = new Date();
  data.css =  _css;

  // Generate HTML using handlebars
  const pdfHtml = _pdfTemplate(data);

  //Do something with the pdfHtml

}
```

DocX Example
```js
// make sure config.js has the relevant credentials
const config = require('./config');
const PDFSass  = require('@journeyapps-solutions/cc-pdf-sass');

export async function run() {

  //The directory where variable.scss and custom.scss exists
  let _css = await PDFSass.DocxSassCompiler.compileSass(__dirname); 

  let data = {}
  data.generated_at = new Date();
  data.css =  _css;

  // Generate HTML using handlebars
  const pdfHtml = _pdfTemplate(data);

  //Do something with the pdfHtml

}
```

```js
// make sure config.js has the relevant credentials
const config = require('./config');
const PDFSass  = require('@journeyapps-solutions/cc-pdf-sass');

export async function run() {

  //The directories where variable.scss and custom.scss exists
  let _css = await PDFSass.PdfSassCompiler.compileSass([__dirname, `${process.cwd()}/../shared`]); 

  let data = {}
  data.generated_at = new Date();
  data.css =  _css;

  // Generate HTML using handlebars
  const pdfHtml = _pdfTemplate(data);

  //Do something with the pdfHtml

}
```


### Printing Layout in OfflinePDF

Since we are using the native print function of the browser when printing offline, we need to add some css to correctly configure for this:
Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/@page

Portrait:
```
@page {
    size: 210mm 297mm;
    /* Chrome sets own margins, we change these printer settings */
    margin: 1mm 0mm 0mm 0mm;
    size: A4 portrait;
}
```

Landscape:
```
@page {
    size: 210mm 297mm;
    /* Chrome sets own margins, we change these printer settings */
    margin: 1mm 0mm 0mm 0mm;
    size: A4 landscape;
}
```


### Development

Commands:
* `yarn docs`  - Compile the documentation Sass
* `yarn serve` - Serve the documentation via `browser_sync`
* `yarn test`  - Run the Testing Suite



### Changelog

2020/02/02
* Added support for docx document generation
* Version break due to new syntax use, not backwards compatible

2018/09/03
* `container` now sets paddings based on the `page` tag
* Added formating variables for `<p>` (paragraph) tag
* Added Colors variables to the headings