DEV Community

FSCSS tutorials for FSCSS tutorials

Posted on • Edited 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 to your HTML head tag

<haed>
<script src='https://wbf.tiiny.site/scripts/0/FS/fs.ex25.js'></script>
</script>
</head>
<style>
//test FSCSS
</style>
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

❤️❤️❤️

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)