Syntax

It takes only 3 minutes to learn this

.

By default, class names behave like inline styles Multiple styles or other attributes are also freely applicable in basic syntax
Box

The default unit is applied to styles such as width and height Default Unit
Box

You can abbreviate and use properties with shorthands Shorthand for Properties
Box

Because class names use spaces( ) as delimiters, values that contain spaces should use underscores(_) instead of spaces A colon(:) can be included in the class name, but can be replaced by an equal sign(=) depending on your preference
Box

You can abbreviate and use value too with shorthands Shorthand for Values
Box

When you use minus(-) or plus(+) in the calc function, spaces are automatically added
Box

Values starting with two hyphens automatically wrap the var function
Box

Classes that start with special characters applied selectors and use slash (/) to distinguish between selectors and styles
1
2
3
4

The pseudo class is also applied in the same way as the selector
:active

If you add an exclamation point (!) after the class name, you can change the style's priority using the selector priority instead of important 
	[class] * 6 { color: purple }
	[class] * 5 { color: navy }
	[class] * 4 { color: blue }
	[class] * 3 { color: green }
	[class] * 2 { color: yellow }
	[class] { color: orange }
	{ color: red }

Classes that begin with an at (@) apply media queries and use the second at to separate styles from media queries
Red? Blue? Red? Blue?

Media queries also provide some shorthands Shorthand for Media Condition 
	Red? Blue?
	Red? Blue?
	Red? Blue?
	Red? Blue?
	Red? Blue?

If you use two at (@), the query does not have media as a prefix
Red? Blue?

Dark Mode

The dark mode transition of CSS Lube is applied using media queries.
In light theme, dark mode styles are disabled with FALSE(0) 
<script>
	// if THEME is not DARK and true, light theme is applied
	localStorage.setItem("THEME", "LIGHT")
	window.cssLube() // update style sheet
</script>

<style css-lube="v2.3.0">
	.c\=red{color:#000}
	@media (0){
		.\@dark\@c\=blue{color:#fff}
	}
</style>
In dark theme, dark mode styles are applied with TRUE(color) 
<script>
	// if THEME is DARK, dark theme is applied
	localStorage.setItem("THEME", "DARK")
	window.cssLube() // update style sheet
</script>

<style css-lube="v2.3.0">
	.c\=red{color:red}
	@media (color){
		.\@dark\@c\=blue{color:blue}
	}
</style>
In system theme, the dark mode style is applied as a media query 
<script>
	// if THEME is false, theme is follow system settings
	localStorage.removeItem("THEME")
	window.cssLube() // update style sheet
</script>

<style css-lube="v2.3.0">
	.c\=red{color:red}
	@media (prefers-color-scheme:dark){
		.\@dark\@c\=blue{color:blue}
	}
</style>