Home Explore Help
Sign In
lovecoding
/
VIP26
9
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

fix:day21

e 1 year ago
parent
e192022c9f
commit
04917d5a62
7 changed files with 170 additions and 0 deletions
Split View Show Diff Stats
  1. 48 0
      day21/css/demo.css
  2. 1 0
      day21/css/demo.min.css
  3. 84 0
      day21/css/demo.scss
  4. 4 0
      day21/css/reset.css
  5. 1 0
      day21/css/reset.min.css
  6. 5 0
      day21/css/reset.scss
  7. 27 0
      day21/html/sass.html

+ 48 - 0
day21/css/demo.css
View File 

@@ -0,0 +1,48 @@
 
+@charset "UTF-8";
 
+i {
 
+  font-weight: bold;
 
+  color: #f00;
 
+}
 
+
 
+p {
 
+  color: #00f;
 
+  font-size: 30px;
 
+  /*
 
+        多行注释
 
+    */
 
+}
 
+
 
+.box {
 
+  border: 10px double #f00;
 
+  color: #00f;
 
+  background-color: #ff0;
 
+  font-size: 30px;
 
+  width: 200px;
 
+  height: 100px;
 
+  margin-top: 20px;
 
+  border-radius: 20px;
 
+  box-shadow: 10px 10px 10px #0f0;
 
+}
 
+
 
+.newBox {
 
+  border: 10px double #f00;
 
+  color: #00f;
 
+  background-color: #ff0;
 
+  font-size: 30px;
 
+  width: 200px;
 
+  height: 100px;
 
+  margin-top: 20px;
 
+  border-radius: 20px;
 
+}
 
+
 
+#list {
 
+  width: 200px;
 
+  height: 200px;
 
+  background: #f00;
 
+}
 
+
 
+.mask {
 
+  width: 40px;
 
+  height: 50px;
 
+  background: yellow;
 
+}

+ 1 - 0
day21/css/demo.min.css
View File 

@@ -0,0 +1 @@
 
+i{font-weight:bold;color:#f00}p{color:blue;font-size:30px}.box{border:10px double red;color:#00f;background-color:#ff0;font-size:30px;width:200px;height:100px;margin-top:20px;border-radius:20px;box-shadow:10px 10px 10px lime}.newBox{border:10px double red;color:#00f;background-color:#ff0;font-size:30px;width:200px;height:100px;margin-top:20px;border-radius:20px}#list{width:200px;height:200px;background:#f00}.mask{width:40px;height:50px;background:#ff0}

+ 84 - 0
day21/css/demo.scss
View File 

@@ -0,0 +1,84 @@
 
+// @import url(reset.css);
 
+@import "./reset.scss";
 
+$bg: #00f;
 
+$ww: 30px !default;
 
+$a: bold;
 
+p {
 
+    color: $bg;
 
+    font-size: $ww;
 
+    $cc: #f00 !global;
 
+    //我的注释1
 
+    /*
 
+        多行注释
 
+    */
 
+}
 
+@mixin border($radius:20px,$style:double) {
 
+    border:10px $style #f00;
 
+    color: #00f;
 
+    background-color: #ff0;
 
+    font-size: 30px;
 
+    width: 200px;
 
+    height: 100px;
 
+    margin-top: 20px;
 
+    border-radius: $radius;
 
+    
+}
 
+@mixin bos($shadow...) {
 
+    box-shadow: $shadow;
 
+}
 
+.box {
 
+    @include border;
 
+    @include bos(10px 10px 10px #0f0)
 
+    // h1 {
 
+    //     .main {
 
+    //         color: aquamarine;
 
+    //     }
 
+    // }
 
+    // h2 {
 
+    //     color: #f00;
 
+    // }
 
+    // h3 {
 
+    //     color: blueviolet;
 
+    //     a {
 
+    //         font-size: 30px;
 
+    //         &:hover {
 
+    //             color: aqua;
 
+    //         }
 
+    //     }
 
+    // }
 
+}
 
+
 
+
 
+.newBox {
 
+    @include border;
 
+}
 
+
 
+#list {
 
+    width: 200px;
 
+    height: 200px;
 
+    background: #f00;
 
+}
 
+
 
+.newList {
 
+    // @extend .box;
 
+}
 
+
 
+%a1 {
 
+    color: #0f0;
 
+}
 
+
 
+.newList {
 
+    // @extend %a1;
 
+}
 
+
 
+
 
+@function fn1($aa) {
 
+    @return $aa*2;
 
+
 
+}
 
+
 
+.mask {
 
+    width: #{fn1(20)}px;
 
+    height: 50px;
 
+    background: #0f0 + #f00;
 
+}

+ 4 - 0
day21/css/reset.css
View File 

@@ -0,0 +1,4 @@
 
+i {
 
+  font-weight: bold;
 
+  color: #f00;
 
+}

+ 1 - 0
day21/css/reset.min.css
View File 

@@ -0,0 +1 @@
 
+i{font-weight:bold;color:#f00}

+ 5 - 0
day21/css/reset.scss
View File 

@@ -0,0 +1,5 @@
 
+$a: bold;
 
+i {
 
+    font-weight: $a;
 
+    color: #f00;
 
+}

+ 27 - 0
day21/html/sass.html
View File 

@@ -0,0 +1,27 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="../css/demo.css">
 
+</head>
 
+<body>
 
+    <p>我的</p>
 
+    <i>我我我</i>
 
+    <div class="box">
 
+        <!-- <h1> -->
 
+            主体
 
+        <!-- </h1> -->
 
+        <!-- <h2>h2</h2>
 
+        <h3>
 
+            <a href="">划过改变</a>
 
+        </h3> -->
 
+    </div>
 
+    <div class="newBox">
 
+        新的盒子
 
+    </div>
 
+    <div class="newList">wqwqw</div>
 
+    <div class="mask"></div>
 
+</body>
 
+</html>