DEV Community

FSCSS tutorials for FSCSS tutorials

Posted on • Edited on

FSCSS

Figured Shorthand Cascading Style Sheets (FSCSS) is a shorthand technique designed to simplify CSS coding by reducing repetition and making the code more concise. It introduces methods like $(...) and % to group multiple properties and values, making it easier to write and maintain CSS.

How to Link FSCSS to HTML

<head>
<script src='https://cdn.jsdelivr.net/gh/Figsh/FSCSS@4.0.1/fscss_exec.js' async=""></script>
</head>
<style>
//test FSCSS
</style>
Enter fullscreen mode Exit fullscreen mode

FSCSS JS files:

  • Recommended FSCSS4 CDN https://cdn.jsdelivr.net/gh/Figsh/FSCSS@4.0.1/fscss_exec.js note:some FSCSS methods may not WORK such as copy(), $count() %7,%8,%9 methods, if you access FSCSS4 through this link.

FSCSS4 tutorial:

CDN: https://cdn.jsdelivr.net/gh/Figsh/FSCSS@4.0.1/fscss_exec.js

In used:

<script src='https://cdn.jsdelivr.net/gh/Figsh/FSCSS@4.0.1/fscss_exec.js' async=""></script>
<style>
//test FSCSS4
</style>
Enter fullscreen mode Exit fullscreen mode

variables:

//store 
$bg-stack: #FF9955 url(image.png) No-repeat center;
$primary-color: midnightblue;
Div{ 
//get
Background: $bg-stack!;
Color: $primary-color!;
} 
Enter fullscreen mode Exit fullscreen mode

% method: mx, mxs, $p, $m, %1, %2, %3, %4, %5 and %6

Div{
mxs(width, height,'80px')
%3(, border-, outline-[color: #292;])
Background: linear-gradient(mx(#111, #222, #333, #444, #555, #,'0f0,')#05fea0);
Color: %5(#,f,[0]);

}
Enter fullscreen mode Exit fullscreen mode

Repeat method:

Div:after{
Content: 'rpt(5, "_")';
} 
Enter fullscreen mode Exit fullscreen mode

Replacement method:

Re(alert:i:'content') 
Re(Massage:'Hello world!') 
Re(e+:'re(tWidth+px:i:'80px')')
Div:after{
Alert:'Massage';
Width: e+twidth+px;
} 
Enter fullscreen mode Exit fullscreen mode

-*- method:

Div{
Font-size: 17px;
Font-weight: 700;
 -*-text-stroke: 2px red;
} 
Enter fullscreen mode Exit fullscreen mode
How to Use FSCSS:

From External:

<script src="https://cdn.jsdelivr.net/gh/Figsh/FSCSS@4.0.1/fscss_exec.js"></script>
<script>
var fscss = fromUrl;
exec((fscss), (`./styles/your_style.fscss`));
</script>
Enter fullscreen mode Exit fullscreen mode

Inside HTML style tag:

<script src="https://cdn.jsdelivr.net/gh/Figsh/FSCSS@4.0.1/fscss_exec.js"></script>
<style>
/* fscss... */
</style>
Enter fullscreen mode Exit fullscreen mode

Learn more

FSCSS SYNTAX HIGHLIGHTS

FSCSS Image



Ninety percent FSCSS twenty percent CSS

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)