SCSS Plugin

The SCSS plugin adds support for Sass stylesheets using sass-embedded. This lets you use variables, mixins, nesting, and other Sass features in your component styles.

Installation

The SCSS plugin is not enabled by default. Install it first:

npm install --save-dev sass-embedded

Basic Usage

Enable the plugin in your config:

import { defineConfig } from '@pencel/core';

export default defineConfig({
  plugins: [
    'scss'  // Enable SCSS support
  ]
});

Then use Sass in your components:

import { Component } from '@pencel/runtime';

const styles = `
  $primary: #007bff;
  $radius: 4px;

  button {
    background: $primary;
    border-radius: $radius;
    padding: 8px 16px;

    &:hover {
      opacity: 0.9;
    }
  }
`;

@Component({
  tag: 'my-button',
  styles  // Scss will be compiled to CSS automatically
})
export class MyButton extends HTMLElement {
  render() {
    return <button>Click me</button>;
  }
}

Features

✅ Variables – Reuse values with $variableName
✅ Mixins – Create reusable style blocks with @mixin
✅ Nesting – Organize styles hierarchically
✅ Functions – Use built-in Sass functions
✅ Imports – Split styles across files with @import

Configuration

Customize SCSS compilation:

import { defineConfig } from '@pencel/core';

export default defineConfig({
  plugins: [
    {
      name: 'scss',
      options: {
        enabled: true  // Enable/disable the plugin
      }
    }
  ]
});