https://github.com/noticeable-app/sass-render
Render SASS into importable TypeScript files for Web Components.
https://github.com/noticeable-app/sass-render
cli lit-element lit-html render sass template watch web webcomponents
Last synced: about 1 year ago
JSON representation
Render SASS into importable TypeScript files for Web Components.
- Host: GitHub
- URL: https://github.com/noticeable-app/sass-render
- Owner: noticeable-app
- License: apache-2.0
- Created: 2020-07-05T11:43:33.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2025-01-20T21:01:55.000Z (over 1 year ago)
- Last Synced: 2025-03-21T12:05:28.909Z (over 1 year ago)
- Topics: cli, lit-element, lit-html, render, sass, template, watch, web, webcomponents
- Language: JavaScript
- Homepage:
- Size: 483 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SASS Render
This project makes your SASS modular, and importable by any Web Component libraries you want to use.
By default, this utility compiles SASS files to TypeScript style templates using
the [lit](https://lit.dev) `css` tag function.
Although this is quite opinionated, you can easily change the output template and the generated file extension.
## Installation
You can install `sass-render` as a dev dependency in your current project:
```
npm install @noticeable/sass-render --save-dev
```
```
yarn add @noticeable/sass-render --dev
```
or as a global package to have the command `sass-render` available everywhere:
```
npm install --global @noticeable/sass-render
```
```
yarn global add @noticeable/sass-render
```
## Usage & options
For a list of complete options, run `sass-render --help`.
### Simple usage
Rendering a `./src/components/button-css.ts` file:
```
sass-render ./src/components/button.scss
```
### Compile directory
Rendering all scss files in a directory, recursively:
```
sass-render ./src/**/*.scss
```
### Compile multiple files or directories
Rendering multiple scss files and directories, recursively:
```
sass-render ./src/**/*.scss ./lib/component.scss
```
### Watching
Use `-w` to watch for changes:
```
sass-render ./src/**/*.scss -w
```
Files will be outputted as `[name]-css.ts`.
### Custom template
Use `-t` to specify the file you'd like to use as a template. `sass-render` will replace `<% content %>` in the file with the generated output:
```
sass-render ./src/components/button-css.js -t css-template.js
```
### Expanded CSS
Use `-e` to enable expanded rendering of output CSS. Render SASS outputs CSS as 'compressed' by default, which may cause parsing errors for some projects.
```
sass-render ./src/components/button-css.js -t -e css-template.js
```
### Custom suffix
Files will be outputted as `[name]-css.ts`. If file is `button.scss`, outputted file will be `button-css.ts`. This can be changed with the `--suffix` option.
If you use a `-` (dash) in your suffix name, eg: `--suffix '-css.js'`, then quotation marks are needed around the suffix (to tell bash it's not another flag).
### Import custom libraries
By default, sass-render will include the `node_modules` relative to the current directory. Passing the `-i` allows you to include custom directories. You can include multiple directories by separating them with a comma:
```
sass-render ./src/**/*.scss -i '../sass-lib/'
sass-render ./src/**/*.scss -i '../sass-lib/, ../another-lib'
```
### Importing
Once your SASS files are converted into TypeScript or JavaScript files, you can use them inside a library like
`lit`. Here is a TypeScript example:
```typescript
import {CSSResult, LitElement, TemplateResult, html} from 'lit';
import {customElement} from 'lit/decorators.js';
import {styles} from './my-button-css.js';
@customElement('my-button')
export class MyButton extends LitElement {
static get styles(): CSSResult {
return styles;
}
protected render(): TemplateResult {
return html`Submit`;
}
}
```
## Credits
This project is inspired by [Google's Material Web Component Sass Render](https://github.com/material-components/material-components-web-components/tree/master/scripts/sass-render).
It has been expanded to make the code reusable for other projects and to support recursive directory parsing.
The original code is a fork of https://github.com/tristanMatthias/wc-sass-render/tree/dc4a15718a7e23532807f45bb09e20edfd10cedd.