html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.7/sass.sync.min.js"></script>
<script src="https://gistcdn.githack.com/cv2k10/92cf0e3582897592b26885a570169c64/raw/b8455e59bf8d0b7ef205d8b11e014160bb25751b/sass-helper.js"></script>
</head>
<body>
</body>
<h3 class="test">Fireworks</h3>
<div class="fireworks">
<div class="fw"></div>
<div class="fw"></div>
<div class="fw"></div>
<div class="fw"></div>
<div class="fw"></div>
<div class="fw"></div>
<div class="fw"></div>
<div class="fw"></div>
<div class="fw"></div>
<div class="fw"></div>
<div class="fw"></div>
<div class="fw"></div>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {margin: 0;display: none;} /*On after scss compiled*/
/*</style>
<style type="scss">/**/
$fontStack: Helvetica, Arial, sans-serif;
$primaryColor: beige;
$primaryBg: #333;
$fontSizeBase: 24px;
@function pi() {
@return 3.14159265359;
}
@function pow($number, $exp) {
$value: 1;
@if $exp > 0 {
@for $i from 1 through $exp {
$value: $value * $number;
}
} @else if $exp < 0 {
@for $i from 1 through -$exp {
$value: $value / $number;
}
}
@return $value;
}
@function fact($number) {
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run