DEV Community

FSCSS tutorials for FSCSS tutorials

Posted on

How to Use FSCSS in CSS

FSCSS can be written inside of any HTML style tag, but
You must import the FSCSS js file after the style tag as shown below

<style>
//FSCSS 
</style>
<script  src="https://winiss.tiiny.site/scripts/fscssv3.1m.js"></script>
Enter fullscreen mode Exit fullscreen mode

for additional methods such as copy(), repeat() etc, use this two external javascript.

<script  src="https://winiss.tiiny.site/scripts/fscssv3.1m.js"></script>
<script src="https://winiss.tiiny.site/scripts/m.js"></script>
Enter fullscreen mode Exit fullscreen mode

See example on codepen

Why Should I use FSCSS instead of CSS

I think FSCSS is using Shorthand methods instead of longhand methods,
And it makes you access to some simple method of writing CSS text,
Example:
1
CSS
-webkit-...
-moz-...
-ms-...
-o-...

FSCSS
-*-...
2
CSS
transform: rotate(50deg);
transform: skew(50deg);
filter: hue-rotate(50deg);

FSCSS
%3(transform: rotate,
transform: skew,
filter: hue-rotate[(50deg);])

3
CSS max-height: 500000000px;
FSCSS max-height: %8(5[0])px;
4
CSS color: rgba(100,100,100,0.8)
FSCSS color: rgba(%3([100,])0.8)
5
CSS var(--...)
FSCSS $...!
Continuation

FSCSS provides many built-in modules which contain useful functions.

ProFile ⇶



Follow up

❤️❤️❤️

Top comments (0)