Import FSCSS from javascript file.
In my javascript file I do something like this:
//fscss.js
//FSCSS4
async function styleWith(e){
let fscss = await import("https://cdn.jsdelivr.net/gh/Figsh/FSH@2.1.0/fshapi.js");
var e = fscss.write;
var text = (`
$rgb: %3([200,]);
$bg-color: #00F0F0;
.box{
%2(
Width,
Height[: 100px;])
background: $bg-color!;
Border: 4px solid rgb($rgb!1);
}
Re(animationSettings:'3s linear infinite alternate forwards')
$(@keyframes box, .box &[animationSettings]) {
0%{
Transform: rotateX(0);
}
100%{
Transform: rotateX(360deg);
}}
`);
fscss.exec(e, text);
}
styleWith(this);
Index.html:
<!--- index.html --->
<!DOCTYPE html>
<haed>
<title>JavaScript FSCSS</title>
</head>
<body>
<div class='box'></div>
<script src='scripts/fscss.js'></script>
</body>
Example:
<!DOCTYPE html>
<html>
<body>
<div class='box' name='box'></div>
<script src="https://cdpn.io/cpe/boomboom/pen.js?key=pen.js-4b571a79-5bd4-c6de-a17d-ef34f7c91e90"></script>
</body>
</html>
Demo:
Method 2
Test code:
<div contenteditable="true"></div>
<script>
(async function(){
let i = await import('https://cdn.jsdelivr.net/gh/Figsh/FSH@2.1.0/fshapi.js');
fscss = i.write;
new i.exec((fscss), (`
body{
background: #eefeee;
}
$(contenteditable){
border: 4px solid #7eeff7;
caret-color: red;
}
`));
})()
</script>
Top comments (0)