DEV Community

Cover image for FSCSS
FSCSS tutorial for FSCSS tutorial

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.

FSCSS implementation

install fscss:

npm install fscss
Enter fullscreen mode Exit fullscreen mode

install fscss from npm via jsdelivr:

<head>
<script src='https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/exec.min.js' async=""></script>
</head>
<style>
//test FSCSS
</style>
Enter fullscreen mode Exit fullscreen mode

files:

  • /exec.min.js (from jsdelivr): This is likely a minified version of an executable JavaScript file. "Minified" means all unnecessary characters (like spaces and comments) have been removed to make the file smaller and faster to load. It's being delivered via jsDelivr, which is a popular Content Delivery Network (CDN). Using a CDN helps distribute the file quickly and efficiently to users worldwide.
  • /exec.js (original): This is probably the original, un-minified version of the executable JavaScript file. Developers work with this version because it's easier to read and debug. The minified version (exec.min.js) is then created from this file for deployment.
  • /index.js (npm default): This is a very common name for the main entry point of a JavaScript project, especially when using npm (Node Package Manager). When you run a project or use it as a package, index.js is often the first file that gets executed or imported.
  • /xfscss.min.js (for importation): This file name suggests it's a minified JavaScript file specifically designed to handle fscss functions, like processing fscss in javascript. It helps with dynamic CSS loading, styling operations within your JavaScript application.
  • /e/... (available on version 1.1.6 top, for developer friendly error handling and logs): This indicates a directory or module (/e/) that contains files related to error handling and logging. The note "available on version 1.1.6 top" suggests that these specific error handling features were introduced or finalized in version 1.1.6 of your project or a related library. The phrase "developer friendly" means it provides clear and helpful information to developers when things go wrong, making it easier to identify and fix issues.

FSCSS tutorial:

NPM:

npm intall fscss
Enter fullscreen mode Exit fullscreen mode

CDN LINK:

<script src='https://cdn.jsdelivr.net/npm/fscss@1.1.6/exec.min.js' async=""></script>
<style>
//test FSCSS
</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, 'content') 
Re(Massage:'Hello world!') 
Div:after{
alert:'Massage';
} 
Enter fullscreen mode Exit fullscreen mode

-*- method:

Div{
Font-size: 17px;
Font-weight: 700;
 -*-text-stroke: 2px red;
 -*-transform: skewX(9deg);
 -*-transform-style: preserve-3d;
} 
Enter fullscreen mode Exit fullscreen mode
How to Use FSCSS:

From External:

<script src='https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/exec.min.js' async=""></script>
<script>
new exec({
type: "URL", 
content: "part/to/your/styles/style.fscss"
});

</script>
Enter fullscreen mode Exit fullscreen mode

Inside HTML style tag:

<script src='https://cdn.jsdelivr.net/npm/fscss@1.6.6/e/exec.min.js' async=""></script>
<style>
/* fscss... */
</style>
Enter fullscreen mode Exit fullscreen mode

Learn more

Full documentation

FSCSS Image

visit the docs for more details, and version releases.

Top comments (0)