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

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs