- Why SCSSLEON?
- Features
- Getting started
- Usage Examples
- Showcase
- Documentation
- Contributing
- Thanks
- License

1. Install packages – run the following command in your project directory to install SCSSLEON + SASS:

``bash
npm i @nulllogic/scssleon sass
`

2. Initialize your project (if not already done). If your project doesn't have a package.json file, create one by running:

`bash
npm init -y
`

3. Update package.json file. Add following strings

`json
"scripts": {
"sass-dev": "sass --watch --update --style=expanded styles:assets/css --load-path=node_modules",
"sass-prod": "sass --no-source-map --style=compressed styles:assets/css --load-path=node_modules"
}
`

It will look like this :
`json
{
"dependencies": {
"@nulllogic/scssleon": "^1.0.5",
"sass": "^1.89.2"
},
"name": "test",
"version": "1.0.0",
"main": "index.js",
"devDependencies": {},
"scripts": {
"sass-dev": "sass --watch --update --style=expanded styles:assets/css --load-path=node_modules",
"sass-prod": "sass --no-source-map --style=compressed styles:assets/css --load-path=node_modules"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
`

4. Create app.scss inside your project in /styles directory

`scss
@use 'sass:map';
@use "sass:string";

@forward "@nulllogic/scssleon/scss/mixins";
@forward "@nulllogic/scssleon/scss/functions";

@use "@nulllogic/scssleon/scss/config.scss" as config with (
// This is main config, that you can tweak
$config: (
prefix: "xii",
enable: (
wrapper: false,
),
)
);

@use "@nulllogic/scssleon/themes/default.scss" as theme with (
$config : config.$config,
$theme: (
html : (
body : (
_colors: (
light : (
background : rgb(244, 244, 244),
color: rgb(28, 29, 31),
),
dark : (
background : rgb(5, 17, 4),
color: '#ccc'
)
)
)
)
)
);

$config: config.$config;
$theme: theme.$theme;
`

5. Create base.scss inside your project in /styles/components directory
`scss
// Loading your SCSS module with pre-defined config and theme
// ↓ Config
@use "../app.scss" as app;

// Loading modules and components
// ↓ Root
@use "@nulllogic/scssleon/scss/root" with (
$config: app.$config,
$theme: app.$theme
);

// Great reset
@use "@nulllogic/scssleon/scss/reset" with (
$config: app.$config,
$theme: app.$theme
);

// Base
@use "@nulllogic/scssleon/scss/base" with (
$config: app.$config,
$theme: app.$theme
);
`

6. Run node command at root / of your project to generate CSS code to /assets/css

`bash
npm run sass-dev
`

7. Profit – you have output at /assets/css` directory now 🙌