Lass

CSS with JavaScript superpowers. Zero runtime - compiles to static CSS.

Examples

Start with CSS

Any valid CSS works as-is:

.button {
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
}

.button-primary {
  background: #6366f1;
  border: 2px solid #6366f1;
  box-shadow: 0 2px 4px #6366f133;
}

.button-secondary {
  background: #8b5cf6;
  border: 2px solid #8b5cf6;
  box-shadow: 0 2px 4px #8b5cf633;
}

.button-danger {
  background: #ef4444;
  border: 2px solid #ef4444;
  box-shadow: 0 2px 4px #ef444433;
}
.button {
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
}

.button-primary {
  background: #6366f1;
  border: 2px solid #6366f1;
  box-shadow: 0 2px 4px #6366f133;
}

.button-secondary {
  background: #8b5cf6;
  border: 2px solid #8b5cf6;
  box-shadow: 0 2px 4px #8b5cf633;
}

.button-danger {
  background: #ef4444;
  border: 2px solid #ef4444;
  box-shadow: 0 2px 4px #ef444433;
}

With Lass

Generate button variants from a color map:

---
const colors = {
  primary: '#6366f1',
  secondary: '#8b5cf6',
  danger: '#ef4444',
};

---

.button {
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
}

{{ Object.entries(colors).map(([name, color]) => @{
  .button-{{ name }} {
    background: {{ color }};
    border: 2px solid {{ color }};
    box-shadow: 0 2px 4px {{ color }}33;
  }
}) }}

.button {
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
}

.button-primary {
  background: #6366f1;
  border: 2px solid #6366f1;
  box-shadow: 0 2px 4px #6366f133;
}
.button-secondary {
  background: #8b5cf6;
  border: 2px solid #8b5cf6;
  box-shadow: 0 2px 4px #8b5cf633;
}
.button-danger {
  background: #ef4444;
  border: 2px solid #ef4444;
  box-shadow: 0 2px 4px #ef444433;
}

Add a variant? One line in colors.

Documentation

Key Features

Installation

npm install @lass-lang/vite-plugin-lass --save-dev
// vite.config.js
import { defineConfig } from 'vite';
import lass from '@lass-lang/vite-plugin-lass';

export default defineConfig({
  plugins: [lass()]
});

Links

License

MIT