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>
FSCSS JS files:
- Recommended FSCSS4 CDN
https://cdn.jsdelivr.net/gh/Figsh/FSCSS@4.0.1/fscss_exec.jsnote: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>
variables:
//store
$bg-stack: #FF9955 url(image.png) No-repeat center;
$primary-color: midnightblue;
Div{
//get
Background: $bg-stack!;
Color: $primary-color!;
}
% 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]);
}
Repeat method:
Div:after{
Content: 'rpt(5, "_")';
}
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;
}
-*- method:
Div{
Font-size: 17px;
Font-weight: 700;
-*-text-stroke: 2px red;
}
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>
Inside HTML style tag:
<script src="https://cdn.jsdelivr.net/gh/Figsh/FSCSS@4.0.1/fscss_exec.js"></script>
<style>
/* fscss... */
</style>
Top comments (0)