{LUSS}

Warning

With version 2.0, the library installation has undergone changes. For more information, visit the Installation section

💻 Author

Sanalzio (me)

💬 Description

A CSS framework that enables you to easily organize the style of a web page.

✔ Installation

The library has been modularized for use in JavaScript as well.

Paste this tag into the head tag in your html code:

<script defer src="https://rawcdn.githack.com/sanalzio/-LUSS-/master/luss.js" type="module"></script>

🚀 Usage

Create a new <style> tag in the following format and write the code inside it:
```
<style luss>
/* Codes */
</style>
```
Or, use the link tag in the following format to import an external file:
```
<link rel="luss" href="./style.luss">
```

✨ Functions

Variable assignment

$text-color: #f2f2f2
$bg-color: black

body{
    color: $text-color;
    background: $bg-color;
}

Math

img {
    width: $[1em + 2px];
}

random integer

body{
    padding: random(1, 3)rem;
}

date

p::after{
    content: "date(day):date(month):date(year)";
}
article::after{
    content: "date()";
}

if

$color-scheme: light
@if ("$color-scheme"=="light")
p{
    color: black;
}
end

Warning

Each condition statement must be followed by "end" or "###" to avoid including other operations in the condition. And if using a string in a condition, enclose it in double quotes ("").

else

$color-scheme: light
@if ("$color-scheme"=="light")
p{
    color: black;
}
@else
p{
    color: white;
}
end

js

p::after{
    content: "@js{(new Date().getMinutes()).toString()}"
}

inline if

$color-scheme: light
p{
    color: ("$color-scheme" == "light" ? "black" : "white");
}

Usage: (<condition> ? <if condition true reutrn this> : <else return this>)

get style

p{
    color: gs$ #div1 (color);
}

random color

body {
    color: $randomColor;
}

rgb to hex

body {
    color: #rgb(255, 0, 0);
}

each

$tags: h1:hover | p
each($tags {
    color: orange;
})
each(p:hover | a:active {
    color: red;
})

interval

interval(body $1000 {
    color: $randomColor;
})

New Pseudo-classes

inner

a::inner{
    content: "<p>Hello</p>";
    color: $randomColor;
}

outer

a::outer{
    content: "<body><p>Hello</p></body>";
    color: $randomColor;
}

String Functions

upper, lower

a::after{
    content: "lower(HELLO) upper(world)";
}

escape

Escapes the string within the quotation marks.

a::after{
    content: "e('Hello World')";
}

For JavaScript

luss function

It adds the 'luss' style to the page.

import { luss } from "https://rawcdn.githack.com/sanalzio/-LUSS-/master/luss.js"
luss(`

$success: green

body{
    color: $success;
}

`);

lussmain function

It compiles the specified 'luss' code and returns the compiled CSS code.

import { lussmain } from "https://rawcdn.githack.com/sanalzio/-LUSS-/master/luss.js"
console.log(lussmain(`

$success: green

body{
    color: $success;
}

`));