https://github.com/raiyanu/hot-sass
hot-sass
https://github.com/raiyanu/hot-sass
Last synced: 3 months ago
JSON representation
hot-sass
- Host: GitHub
- URL: https://github.com/raiyanu/hot-sass
- Owner: raiyanu
- Created: 2025-03-05T08:56:43.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-03-05T09:26:40.000Z (3 months ago)
- Last Synced: 2025-03-05T09:30:25.742Z (3 months ago)
- Language: JavaScript
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📦 hot-sass Documentation
`hot-sass` is a **zero-configuration** SCSS/SASS compiler for vanilla JavaScript projects. It lets you use SCSS/SASS files directly in HTML using `` tags. It fetches, compiles, and injects the resulting CSS into your page — **no build tools required**.
Perfect for quick prototypes, demos, or small projects where you want to use SCSS without complex setups.
## 🚀 Features
- **Zero Config:** Drop in a script and link your SCSS files — done.
- **Live Compile:** Fetches and compiles SCSS/SASS files in the browser.
- **No Build Tools:** No npm, no Webpack, no bundlers needed.
- **Works Anywhere:** Works in plain HTML files or even inside frameworks.
- **CDN Ready:** Load directly from jsDelivr.
## 📥 Installation
Add the script to your HTML:
```html
```
---
## 📄 Usage
Example HTML:
```html
hot-sass Example
Hello, hot-sass!
```
### What this does
- Finds all `` or `` tags.
- Fetches and compiles those files.
- Injects the compiled CSS into the page.
## ⚙️ Optional: Use a Custom Version of `sass.js`
By default, `hot-sass` loads `sass.js` from:
```
https://cdn.jsdelivr.net/npm/sass.js@latest/dist/sass.sync.js
```
If you want to **use a specific version** of `sass.js` or host your own file, you can provide a `sass-url` attribute to the script tag like this:
```html
```
This allows full control over which version of `sass.js` is used.
## 📚 Manual Initialization (No `data-autorun`)
If you want to control when `hot-sass` runs (instead of automatically running), leave off `data-autorun` and call `HotSass()` manually:
```html
HotSass();
```
## 🔗 Supported Link Tags
- ``
- ``
## ⚠️ Important Notes
- This is **best for development** or quick demos. In production, pre-compiling SCSS is faster.
- It works in modern browsers that support `fetch` and `Promise` (basically all recent browsers).
- If using files from a different origin (e.g., CDN-hosted SCSS), ensure **CORS headers** are configured correctly.
## 🐞 Troubleshooting
| Problem | Solution |
|---|---|
| SCSS file not found | Check the `href` path in your `` tag. |
| Compilation fails | Check the browser console for error messages. |
| Nothing happens | Did you forget `data-autorun` or the manual `HotSass()` call? |
| Wrong Sass.js version | Double-check your `sass-url` value if using a custom version. |
## 📜 Example with Specific Sass.js Version
```html
```
## 📫 Author
Created by [raiyanu](https://github.com/raiyanu)
GitHub: [https://github.com/raiyanu/hot-sass](https://github.com/raiyanu/hot-sass)
## License
This work is licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0) License. To view a copy of this license, visit [http://creativecommons.org/licenses/by/4.0/](http://creativecommons.org/licenses/by/4.0/).