diff --git a/assets/_index.scss b/assets/_index.scss
new file mode 100644
index 0000000..6bc2f18
--- /dev/null
+++ b/assets/_index.scss
@@ -0,0 +1,41 @@
+$red: #ff0000;
+
+html,
+body {
+ width: 100%;
+}
+
+.border-right {
+ &::after {
+ position: absolute;
+ content: " ";
+ height: 100%;
+ width: 1px;
+ background-color: #fff;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+}
+
+.mg-auto {
+ margin: 0 auto;
+}
+
+.clearfix {
+ &::after {
+ content: "";
+ height: 0;
+ display: block;
+ clear: both;
+ }
+}
+
+// 字体或者什么的用em,距离用%
+@function em($v, $f:16) {
+ @return $v/$f+em;
+}
+
+$designWidth:1920px;
+@function per($v) {
+ @return $v/$designWidth+'%';
+}
diff --git a/assets/demo/index.css b/assets/demo/index.css
new file mode 100644
index 0000000..981a359
--- /dev/null
+++ b/assets/demo/index.css
@@ -0,0 +1,42 @@
+:root {
+ font-size: 16px;
+}
+
+html,
+body {
+ width: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+.border-right::after {
+ position: absolute;
+ content: " ";
+ height: 100%;
+ width: 1px;
+ background-color: #fff;
+ top: 50%;
+ -webkit-transform: translateY(-50%);
+ transform: translateY(-50%);
+}
+
+.mg-auto {
+ margin: 0 auto;
+}
+
+.clearfix::after {
+ content: "";
+ height: 0;
+ display: block;
+ clear: both;
+}
+
+.box1 {
+ width: 5.20833%;
+ margin-top: 2.23958%;
+ height: 0;
+ padding-bottom: 5.20833%;
+ font-size: 2rem;
+ background-color: red;
+}
+/*# sourceMappingURL=index.css.map */
\ No newline at end of file
diff --git a/assets/demo/index.css.map b/assets/demo/index.css.map
new file mode 100644
index 0000000..a634566
--- /dev/null
+++ b/assets/demo/index.css.map
@@ -0,0 +1,9 @@
+{
+ "version": 3,
+ "mappings": "AAEA,AAAA,KAAK,CAAA;EACH,SAAS,EAAE,IAAI;CAChB;;AACD,AAAA,IAAI;AACJ,IAAI,CAAC;EACH,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;CACX;;AAED,AACE,aADW,AACV,OAAO,CAAC;EACP,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,gBAAgB,EAAE,IAAI;EACtB,GAAG,EAAE,GAAG;EACR,SAAS,EAAE,gBAAgB;CAC5B;;AAGH,AAAA,QAAQ,CAAC;EACP,MAAM,EAAE,MAAM;CACf;;AAED,AACE,SADO,AACN,OAAO,CAAC;EACP,OAAO,EAAE,EAAE;EACX,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,IAAI;CACZ;;AAcH,AAAA,KAAK,CAAC;EACJ,KAAK,EAJG,QAA2B;EAKnC,UAAU,EALF,QAA2B;EAMnC,MAAM,EAAE,CAAC;EACT,cAAc,EAPN,QAA2B;EAQnC,SAAS,EAdD,IAAS;EAejB,gBAAgB,EAAE,GAAG;CACtB",
+ "sources": [
+ "index.scss"
+ ],
+ "names": [],
+ "file": "index.css"
+}
\ No newline at end of file
diff --git a/assets/demo/index.html b/assets/demo/index.html
new file mode 100644
index 0000000..89900d8
--- /dev/null
+++ b/assets/demo/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <title>Document</title>
+ <link rel="stylesheet" href="index.css">
+</head>
+<body>
+ <div class="box1">cxvccxvcxcvx</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/assets/demo/index.scss b/assets/demo/index.scss
new file mode 100644
index 0000000..337e99c
--- /dev/null
+++ b/assets/demo/index.scss
@@ -0,0 +1,56 @@
+$red: #ff0000;
+
+:root{
+ font-size: 16px;
+}
+html,
+body {
+ width: 100%;//62.5%;
+ margin: 0;
+ padding: 0;
+}
+
+.border-right {
+ &::after {
+ position: absolute;
+ content: " ";
+ height: 100%;
+ width: 1px;
+ background-color: #fff;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+}
+
+.mg-auto {
+ margin: 0 auto;
+}
+
+.clearfix {
+ &::after {
+ content: "";
+ height: 0;
+ display: block;
+ clear: both;
+ }
+}
+
+// 字体或者什么的用em
+@function em($v, $f:16) {
+ @return $v/$f+rem;
+}
+
+$designWidth:1920;
+// 距离用百分比
+@function per($v) {
+ @return percentage($v/$designWidth);
+}
+
+.box1 {
+ width: per(100);
+ margin-top: per(43);
+ height: 0;
+ padding-bottom: per(100);
+ font-size: em(32);
+ background-color: red;
+}