⇶ FSCSS TTR

∈∋

⇶ Wini MaMeth

coding_CSS_with_special_signs_and

_reducing_the_overall_use_of_it._❤️👍😃_

∈FSCSS∋ ⇶

Figured Shorthand CSS (FSCSS) Is used to write CSS code in short and easy methods.
FSCSS is a link to a js file that focus in Manipulating CSS source.
Figured: (technical) decorated with a small pattern.
Shorthand: (AmE also stenography)[U] a quick way of writing using special signs.
Cascading Style Sheet(CSS): language using in web design.
FSCSS reduces the overall use of CSS. FSCSS writing using JavaScript languages.

FS 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 style tag, Not before!. <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 ↓
<style> //CSS </style> <body> </body> <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 })

» copy()

copy(get-from, var-name);

copy() Is used for copying property value and can be accessed as a variable in other place. e.g: div:after{content:"rgb(199,0,0) is displaying (red) color I need blue" copy(12, my-color); color:$my-color!; background:#00f linear-gradient(#ffe,#f0f,#f00) copy(4, my-blue); border:1px solid $my-blue!; }

⇲

If the parameter is negative, the position is counted from the end of the value, else it count from the start. ⁅ syntax ⁆ copy(get-from, var-name). Example: The below code get #000 from the border property negatively: border:3px dotted #000 copy(-5, var-color); Output:   Example: The below code get rgb(300,340,0) that is inside the squar bracket from the content property:content:"My background color is [rgb(300,340,0)] but, I always like to use {hsl(200,40%,30%)}" copy([-], bg-color); Output:  

» $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';} }
» repeat()

repeat(count);

repeat()Is Used to create copies of a text in content property e.g div:after{ content:"Hello World! " repeat(5);}

⇲

If you omit the count, It means (auto). ⁅ syntax ⁆ repeat(count). Example: content:"Hello world! " repeat(); Output:  

» IMP()

IMP({ }, )

imp() don`t use this method.It 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∋ ⇶

⇲

⇲

⇲

⇲

⇲

⇲

⇲

Pens examples

∈MaMeth∋