Strona główna Odkrywaj Pomoc
Zaloguj się
lovecoding
/
W260426
8
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

sass

zheng 19 godzin temu
rodzic
1cf6d72216
commit
6e17102f49
4 zmienionych plików z 45 dodań i 6 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 8 3
      13.sass/index.css
  2. 2 0
      13.sass/index.html
  3. 1 1
      13.sass/index.min.css
  4. 34 2
      13.sass/index.scss

+ 8 - 3
13.sass/index.css
Wyświetl plik 

@@ -12,11 +12,16 @@
 
     @mixin 定义一个可以在整个样式表中重复使用的样式
 
     @include 调用
 
  */
 
+.vase {
 
+  font-size: 26px;
 
+  color: plum;
 
+}
 
+
 
 .box {
 
-  border: 3px solid #00f;
 
-  border-radius: 50px;
 
-  width: 500px;
 
+  width: 400px;
 
   height: 500px;
 
+  background: white;
 
+  border-radius: 50px;
 
   box-shadow: 5px 10px 10px red;
 
   /* 多行注释  编译后会出现在css中 */
 
 }

+ 2 - 0
13.sass/index.html
Wyświetl plik 

@@ -12,6 +12,8 @@
 
 
 <body>
 
     <div class="box">
 
+        <p>大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好</p>
 
+        <b>大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好</b>
 
         <h1>你好</h1>
 
         <ul>
 
             <li><a href="">你好</a></li>

+ 1 - 1
13.sass/index.min.css
Wyświetl plik 

@@ -1 +1 @@
 
-*{margin:0;padding:0;list-style:none;text-decoration:none;box-sizing:border-box}.box{border:3px solid #00f;border-radius:50px;width:500px;height:500px;box-shadow:5px 10px 10px red}.box h1{color:#ff0;font-size:70px}.box ul li a{color:red;font-size:30px;font-style:italic}.box ul li a:hover{color:#ff0}
 
+*{margin:0;padding:0;list-style:none;text-decoration:none;box-sizing:border-box}.vase{font-size:26px;color:plum}.box{width:400px;height:500px;background:#fff;border-radius:50px;box-shadow:5px 10px 10px red}.box h1{color:#ff0;font-size:70px}.box ul li a{color:red;font-size:30px;font-style:italic}.box ul li a:hover{color:#ff0}

+ 34 - 2
13.sass/index.scss
Wyświetl plik 

@@ -27,12 +27,44 @@ $b: 70 !default;
 
     box-shadow: $q;
 
 }
 
 
+
 
+@function size($p) {
 
+    @return $p * 4;
 
+}
 
+
 
+// 继承
 
+.vase {
 
+    font-size: 26px;
 
+    color: plum
 
+}
 
+
 
+// 占位符
 
+%www {
 
+    color: red;
 
+    font-style: italic
 
+}
 
+
 
 .box {
 
-    @include aaa;
 
+    // @extend .vase;
 
+    // @include aaa;
 
+    width: #{size(100)}px;
 
+    // height: 400px - 100px;
 
+    // height: 100px + 300px;
 
+    // height: 100px * 6;
 
+    height: (1000px / 2);
 
+    background: #00f + #ff0;
 
     @include bbb(50px);
 
-    @include ccc;
 
+    // @include ccc;
 
     @include ddd(5px 10px 10px red);
 
 
+    b {
 
+        // @extend %www;
 
+    }
 
+
 
+    p {
 
+        // @extend .vase;
 
+    }
 
+
 
     h1 {
 
         color: $a;
 
         font-size: $b + px;