npm package: @getkist/action-sass
Description: SASS/SCSS compilation with PostCSS processing actions for kist build tool
Author: kist
Latest version: 1.0.9

# @getkist/action-sass

SASS/SCSS compilation with PostCSS processing for [kist](https://github.com/getkist/kist) build tool.

[![npm version](https://img.shields.io/npm/v/@getkist/action-sass.svg)](https://www.npmjs.com/package/@getkist/action-sass)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## Features

- **SASS/SCSS Compilation** - Modern SASS compilation using Dart Sass
- **PostCSS Integration** - Automatic PostCSS processing with autoprefixer
- **Compression Support** - Expanded and compressed output styles
- **CSS Optimization** - Built-in cssnano for minification
- **Node Package Importer** - Import from node_modules directly

## Installation

```bash
npm install --save-dev @getkist/action-sass
```

## Usage

### Basic Style Compilation

Add to your `kist.yml`:

```yaml
pipeline:
    stages:
        - name: styles
          steps:
              - name: compile-styles
                action: StyleProcessingAction
                options:
                    inputFile: ./src/styles/main.scss
                    outputFile: ./dist/styles/main.css
                    styleOption: compressed
```

### Expanded Output

```yaml
pipeline:
    stages:
        - name: dev-styles
          steps:
              - name: compile-dev-styles
                action: StyleProcessingAction
                options:
                    inputFile: ./src/styles/app.scss
                    outputFile: ./dist/styles/app.css
                    styleOption: expanded
```

## Action: StyleProcessingAction

Compiles SCSS files to CSS with PostCSS transformations.

### Options

| Option        | Type   | Required | Description                              |
| ------------- | ------ | -------- | ---------------------------------------- |
| `inputFile`   | string | Yes      | Path to the input SCSS file              |
| `outputFile`  | string | Yes      | Path for the output CSS file             |
| `styleOption` | string | Yes      | Output style: 'expanded' or 'compressed' |

### Features

**Expanded Mode:**

- Readable, formatted CSS output
- Autoprefixer for browser compatibility
- Ideal for development

**Compressed Mode:**

- Minified CSS with cssnano
- Autoprefixer for browser compatibility
- Optimized for production

### PostCSS Plugins

- **autoprefixer** - Automatically adds vendor prefixes
- **cssnano** - CSS minification (compressed mode only)

## Examples

### Multiple Style Files

```yaml
pipeline:
    stages:
        - name: compile-all-styles
          steps:
              - name: main-styles
                action: StyleProcessingAction
                options:
                    inputFile: ./src/styles/main.scss
                    outputFile: ./dist/styles/main.css
                    styleOption: compressed

              - name: admin-styles
                action: StyleProcessingAction
                options:
                    inputFile: ./src/styles/admin.scss
                    outputFile: ./dist/styles/admin.css
                    styleOption: compressed
```

### Development vs Production

```yaml
pipeline:
    stages:
        - name: dev-build
          steps:
              - name: dev-styles
                action: StyleProcessingAction
                options:
                    inputFile: ./src/styles/app.scss
                    outputFile: ./dist/dev/app.css
                    styleOption: expanded

        - name: prod-build
          steps:
              - name: prod-styles
                action: StyleProcessingAction
                options:
                    inputFile: ./src/styles/app.scss
                    outputFile: ./dist/prod/app.css
                    styleOption: compressed
```

## TypeScript Types

```typescript
import { StyleProcessingAction } from "@getkist/action-sass";

const action = new StyleProcessingAction();
```

### StyleProcessingActionOptions

```typescript
interface StyleProcessingActionOptions {
    inputFile: string;
    outputFile: string;
    styleOption: "expanded" | "compressed";
}
```

## Requirements

- Node.js >= 18.0.0
- kist >= 0.1.0

## Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md) for contribution guidelines.

## License

MIT © kist

## Links

- [GitHub Repository](https://github.com/getkist/kist-action-sass)
- [npm Package](https://www.npmjs.com/package/@getkist/action-sass)
- [kist Build Tool](https://github.com/getkist/kist)
- [Issue Tracker](https://github.com/getkist/kist-action-sass/issues)