VQH-cmd/sassolith

CSS utility using SASS & SCSS

Sassolith

• 📦 Toolkit: Sassolith
• 🏗️ Version: 2.0.0
• 👨‍💻 Author: VQH-cmd

---

[01]: Description

• CSS utility using SASS & SCSS.
• Customize CSS classes with your own style.

---

[02]: Quick Start

• This package is only implanted in Convergence ζ for now !

---

[03]: Import

// style.sass
@import "<LOCATION_NAME>/_theme"
@import "<LOCATION_NAME>/_misc"
@import "<LOCATION_NAME>/_breakpoint"

@import "@vqh-cmd/sassolith"

// style.scss
@import "<LOCATION_NAME>/_theme";
@import "<LOCATION_NAME>/_misc";
@import "<LOCATION_NAME>/_breakpoint";

@import "@vqh-cmd/sassolith";

🗃️ Global Files:

• <LOCATION_NAME>/_theme
• <LOCATION_NAME>/_misc
• <LOCATION_NAME>/_breakpoint

If using node-sass-json-importer

// style.sass
@import "<LOCATION_NAME>/theme.json"
@import "<LOCATION_NAME>/misc.json"
@import "<LOCATION_NAME>/breakpoint.json"

@import "@vqh-cmd/sassolith"

// style.scss
@import "<LOCATION_NAME>/theme.json";
@import "<LOCATION_NAME>/misc.json";
@import "<LOCATION_NAME>/breakpoint.json";

@import "@vqh-cmd/sassolith";

🗃️ Global Files:

• <LOCATION_NAME>/theme.json
• <LOCATION_NAME>/misc.json
• <LOCATION_NAME>/breakpoint.json

---

[04]: Global Files

theme

• scss | json

misc

• scss | json

breakpoint

• scss | json

---

[05]: Config

Basic

@include Sassolith((
	"class": (
		box-border,
		box-content,
	),
	"style": box-sizing,
	"value": (
		border-box,
		content-box,
	),
	"data": (
		"active": true,
		"important": false,
		"responsive": true,
		"state": (
			":required",
			":active",
			":hover",
			":visited",
		),
	),
));

Color

@include Sassolith((
	"class": co,
	"style": color,
	"value": false,
	"data": (
		"active": true,
		"important": false,
		"responsive": true,
		"isColor": true,
		"state": (
			":hover",
		),
	),
));

Formula

@include Sassolith((
	"class": w,
	"style": width,
	"value": false,
	"data": (
		"active": true,
		"important": false,
		"responsive": true,
		"formula": (
			"unit": (
				"class": "vw",
				"value": "vw",
			),
			"ratio": calc(1/10),
			"min": 0,
			"max": 1000,
			"step": 50,
		),
		"state": (
			":hover",
		),
	),
));

Font Face

@include SassolithFont((
	"family": "Roboto",
	"name": "font1",
	"weight": (100, 200, 300, 400, 500, 600, 700, 800, 900),
	"style": (normal, italic),
	"src": "../fonts/",
	"format": (ttf, otf),
));

Examples

---

[06]: Utility Function & Mixin

Get $name from theme.

• theme » default » category » color
• theme » default » category » gradient

co($name)

// 📟 scss
.co-m1 {color: co(m1);}

// 👉 output
.co-m1 {color: #0EF7D0;}

coTint($name, $percent)

// 📟 scss
.co-m1-t80 {color: coTint(m1, 80);}

// 👉 output
.co-m1-t80 {color: #cffdf6;}

coShade($name, $percent)

// 📟 scss
.co-m1-t80 {color: coShade(m1, 80);}

// 👉 output
.co-m1-t80 {color: #03312a;}

gra($name)

// 📟 scss
.grad-gra1 {background-color: gra(gra1);}

// 👉 output
.grad-gra1 {background-color: linear-gradient(90deg, #0EF7D0 0%, #6f9 100%);}

Get $media from breakpoint.

res($media)

// 📟 scss
.fs-main {
	font-size: 24px;
	@include res(sm) {font-size: 20px;}
	@include res(xs) {font-size: 16px;}
}

// 👉 output
.fs-main {font-size: 24px;}
@media screen and (max-width: 800px) {
	.fs-main {font-size: 20px;}
}
@media screen and (max-width: 600px) {
	.fs-main {font-size: 18px;}
}

---

Copyright © 2023, VQH-cmd.