How to add external .fscss file in HTML:
Step1:
create .fscss file, write in same FSCSS and CSS code
Example:
/* Variables */
$primary-color: midnightblue;
$bg-stack: #FF9955 url(image.png) No-repeat center;
$border: 1px solid #4CAF50;
$gradient: mx(#111, #222, #333, #444, #555,#000,'00f,');
/* body elem */
Body{
Background: linear-gradient(30deg, $gradient!#0f0);
color: $primary-color!;
}
/* Select by name */
$(name: foo){
Background: $bg-stack!;
Border: $border!;
%2(width, height[:200px;])
}
Step2:
Add it to your HTML Using the HTML link tag with type='text/fscss'.
Example:
<head>
<link href="style/style.fscss" rel="stylesheet" type='text/fscss'>
<script src="https://cdn.jsdelivr.net/gh/Figsh/FSCSS@4.0.1/fscss_exec.js" async=""></script>
</head>
<div name='foo'></div>
<style>
/* more style ... */
<style>
Check out this Example:
<head>
<link href="https://raw.githubusercontent.com/Figsh/FSCSS/refs/heads/main/test.fscss" rel="stylesheet" type='text/fscss'>
<script src="https://cdn.jsdelivr.net/gh/Figsh/FSCSS@4.0.1/fscss_exec.js" async=""></script>
</head>
<section id="box">
<div name=box></div>
<div name=box></div>
<div name=box></div>
<div name=box></div>
<div name=box></div>
<div name=box></div>
<div name=box></div>
<div name=box></div>
</section>
<style>
#box{
width: 350px;
height: 80px;
border: 2px solid red;
overflow-y: hidden;
overflow-x: scroll;
white-space: nowrap;
}
#box $(name: box){
display: inline-block;
}
</style>
Add external FSCSS to HTML using javascript
JavaScript:
(async function(){
let i = await import('https://cdn.jsdelivr.net/gh/Figsh/FSH@2.1.0/fshapi.js');
new i.exec(i.fromUrl, './styles/style.fscss');
})()
Test code:
<div name='card'></div>
<script>
(async function(){
let i = await import('https://cdn.jsdelivr.net/gh/Figsh/FSH@2.1.0/fshapi.js');
var fscss = i.fromUrl;
new i.exec((fscss), ('https://raw.githubusercontent.com/Figsh/style_sheet/refs/heads/main/style.fscss'));
})()
</script>
Same as:
<div name="card" class="card"></div>
<script src="https://cdn.jsdelivr.net/gh/Figsh/FSCSS@4.0.1/fscss_exec.js"></script>
<script>
var fscss = fromUrl;
exec((fscss), (`https://raw.githubusercontent.com/Figsh/style_sheet/refs/heads/main/style.fscss`));
</script>
Top comments (0)