Почетна Преглед Помоћ
Пријавите се
lovecoding
/
W260426
8
0
Креирај огранак 0
Датотеке Дискусије 0 Захтеви за спајање 0 Вики
Преглед изворни кода

sass

zheng пре 15 часа
родитељ
1cf6d72216
комит
6e17102f49
4 измењених фајлова са 45 додато и 6 уклоњено
Подељен поглед Покажи статистику Diff
  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
Прегледај датотеку 

@@ -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
Прегледај датотеку 

@@ -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
Прегледај датотеку 

@@ -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
Прегледај датотеку 

@@ -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;