chaos-sass v1.0.4

Chaos-Sass 🎭

A simple and lightweight SCSS utility library.

📦 Installation

To install Chaos-Sass, run:

npm install chaos-sass

🛠️ Usage

Once installed, include it in your main SCSS file.

🔹 Example: Using Chaos-Sass in Laravel 11

If you're using Laravel 11, update your resources/css/app.scss file:

@use "chaos-sass";

📌 Note: Laravel's default CSS folder is resources/css/. Make sure your file is renamed to app.scss instead of app.css to support SCSS syntax.

Then, ensure that Laravel Vite compiles SCSS correctly by adding app.scss to vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.scss', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Finally, import the SCSS in your JavaScript entry file (resources/js/app.js):

import "../css/app.scss";

Run Vite to compile everything:

npm run dev

📌 Features

Chaos-Sass provides a set of utility classes to simplify styling, including:

• 🎨 Flexbox utilities (.row, .column, .align-center, .justify-between, etc.)
• 🏗 Spacing utilities (.gap-sm, .gap-md, .gap-lg, .gap-xl)
• 🎛 Button styles (.btn)
• 🃏 Card components (.card)
• 🎯 Typography utilities (.clickable)

Example usage in HTML:

<div class="row justify-center align-center">
    <button class="btn">Click Me</button>
</div>

📌 Available Classes

Here is a short list of the available classes you can use. The names attempt to be self-explanatory but feel free to experiment:

.column .row .align-start .align-center .align-end .align-stretch .justify-start .justify-center .justify-end .justify-between .justify-around .justify-evenly .gap-sm .gap-md .gap-lg .gap-xl .wrap .nowrap .flex-1 .flex-auto .flex-none .btn .clickable .card

More to come!

🎯 Advanced SCSS Usage

You can also use SCSS mixins and variables from Chaos-Sass:

Using Variables (Not yet implemented)

@use "chaos-sass" as cs;

body {
    background-color: cs.$borderColor;
}

Using Mixins

@use "chaos-sass" as cs;

.card {
    @include cs.reset;
}

📌 Updating Chaos-Sass

If you need the latest version, simply update it with:

npm update chaos-sass

📜 License

This project is licensed under the MIT License.

🚀 Get Started with Chaos-Sass Today!

If you have any questions, feel free to reach out or contribute to the project. 🎉