⇶ FSCSS Wini MaMeth

∈∋

⇶ Wini MaMeth

Wow_I_use_this_script_to_get_m

ore_CSS_coding_shorthand_.❤️👍😃_

∈FSCSS∋ ⇶ Wini MaMeth

FSCSS is used to write CSS code in short and easy way. using shorthand methods. $...

shorthand Methods »

$ACS() method
example HTML <input type="text"> <input type="number"> <input type="button"> example $acs() shorthand $acs(type[ text{//CSS} number{//CSS} button{//CSS} ])

$G() method
example HTML <div></div> example $g() shorthand div{ $g(border: 2px solid #099; /-radius: 0.5rem; /-right: 0; |) }

$M() method
example HTML <div></div> example $m() shorthand div{ $m( background-color, outline-color, text-decoration-color [: #00f;]) $m(transform:rotate, filter:hue-rotate [(40deg);] }

$P() method
example HTML <div></div> example $p() shorthand div{ $p( background-color, outline-color, text-decoration-color [#00f]) }

$ method
example HTML <div></div> example $ shorthand :root{ $my-red: #f00; $my-blue: #00f; } div{ border: 1px solid $my-red!; background-color: $my-blue!; }

-*- method
example HTML <h1>Text</h1> example -*- shorthand h1{ -*-text-stroke:2px #0f0; }

#count method
example HTML <h1></h1> example $count shorthand h1:before{ content:''; animation: count 35s linear 1 forwards; } @keyframes count{ count('') }

To link this method to your HTML, Use MaMeth JS files examples /scripts/wini%20script%20.js or /scripts/fscssv3.1m.js or /scan/3.2/rel.js
HOW DO I LINK THIS TO MY HTML
Use This after the tag <script src ="https://winiss.tiiny.site/scripts/wini%20script%20.js"></script>

Or This <script src ="https://winiss.tiiny.site/scan/3.2/rel.js"></script>

Or <script src ="https://winiss.tiiny.site/scripts/fscssv3.1m.js"></script>
Examples ↓
<scanner> <style> //CSS </style> </scanner> <script src ="https://winiss.tiiny.site/scripts/wini%20script%20.js"></script>
Methods ↓
» $R()

$R( { })

$R() Is used instead of :root. e.g $R(body{ my variables })
» $G()

$G( / |);

$g() Is used for properties shorthands and in selectors e.g $G( animation: ; /-name: ; /-timing-function: ; /-delay: ; /-iteration-count: ; /-range: ; /-play-state: ; |); $G(body{ } / h1{ } / p{ } / div{ } |)

⇲

In $G() method the first property or selector is parent to those after the slash. ⁅ syntax ⁆ $g(parent children |). Example in properties: $g(border: 2px solid; /-radius: 1rem; /-color: #909; |) Output:   border:2px solid; border-radius: 1rem; border-color: #909; Example in selector: $g(body{ body style } / h1{ body h1 style } / p{ body p style } |) Output:   body{ body style} body h1{ body h1 style } body p{ body p style }

» $P()

$P( , [ ])

$p() Is used for properties multiplication e.g $p( border-color, outline-color, color, accent-color [#09f])

⇲

This method shared 1 value in ten (10) places, With colon (:) and semicolon (;). It shared 1 value to less than or complete ten properties. ⁅ syntax ⁆ $p(properties[value]) Example $p(A, B, C, D, E, F, G, H, I, J[⁑]) Output:   A:⁑; B:⁑; C:⁑; D:⁑; E:⁑; F:⁑; G:⁑; H:⁑; I:⁑; J:⁑;

» $ACS()

$ACS( [ ])

$acs() Is used in element selector e.g $acs(type[ text{//element type text style here} color{//element type color style here} time{//element type time style here} number{//element type number style here} ])
» $M()

$M( , [ ]);

$m() Is used for properties multiplication e.g $m( transform:rotate, filter:hue-rotate[(40deg);] )
Properties in $m() can`t be more than 18.

» %I()

%i( ,[ ])

%i() Is similar to $m().
The defference is that the properties in %i() can`t be more than 10. %i(border-color, outline-color, accent-color, text-decoration-color[:rgb(300,200,5.5,1);])

» %9()

%9( , [ ])

%9() Is similar to $m().
The defference is that the properties in %9() can`t be more than 9.

It count from %1() to %9() calculating accordingly.
The properties in %number() methods can`t be more than the given number,it shared the value to the given number. The number on it can't be less than 1, and it can't be greater than 9. You can use %i() instead of %10().

» $

$ : ; ≶ $ !

$ Is used for variable e.g $R(body{ $my-color:#00f; }) body{ color:$my-color!; } :root h1{ $red:#f00; $blue:#00f; $pink:#ff0; $green:#0f0; } h1{ color:$blue!; background:linear-gradient($red!, $pink!, $green!);
» #count()

#count(' '/' ')

#count() Is used instead of too much notes in @keyframes e.g h1:before{content:''; animation:h1 linear 1 forwards; } @keyframes h1{ #count() } h2:before{content:''; animation:h1 linear 1 forwards; } @keyframes h2{ 0%{content:'starting download';} #count('downloading...'/'%') 100%{content:'downloaded';} }
» IMP()

IMP({ }, )

imp() Is used instead of the <style></style> tag e.g <scanner> imp({ //CSS }, parse) imp({ body{color:#009;} }, !script ) </scanner>

Pens examples

∈∋

⇶ Wini MaMeth

∈FSCSS∋ ⇶ Wini MaMeth

⇲

⇲

⇲

⇲

⇲

Pens examples

∈MaMeth∋