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
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>
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
CDN LINK:
<script src='https://cdn.jsdelivr.net/npm/fscss@1.1.6/exec.min.js' async=""></script>
<style>
//test FSCSS
</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, 'content')
Re(Massage:'Hello world!')
Div:after{
alert:'Massage';
}
-*- method:
Div{
Font-size: 17px;
Font-weight: 700;
-*-text-stroke: 2px red;
-*-transform: skewX(9deg);
-*-transform-style: preserve-3d;
}
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>
Inside HTML style tag:
<script src='https://cdn.jsdelivr.net/npm/fscss@1.6.6/e/exec.min.js' async=""></script>
<style>
/* fscss... */
</style>
Top comments (0)