邁向全棧開發學習(3)

  久違的一文了，有一個多月沒有更新我這個博文了，太懶了；今天忽然想起來就把這一文寫了。上回簡單說了下ES6的語法，這回我就作了一個sass的綜合項目練習，我用sass寫了一個頁面。只是一個頁面佈局的練習，沒怎麼運用到js。先貼個代碼先：

 1 require(`./sass/style.scss`);
 2 import $ from 'jquery';
 3 
 4 $(function() {
 5     var portfolioItems = $('.portfolio-box').find('.item');
 6     for (var i = 0; i < portfolioItems.length; i++) {
 7         var item = $(portfolioItems[i]);
 8         item.mouseover(function() {
 9             $(this).addClass('select');
10         });
11         item.mouseout(function() {
12             $(this).removeClass('select');
13         });
14     }
15 
16     $('#top').click(function() {
17         document.documentElement.scrollTop = document.body.scrollTop = 0;
18     });
19 });

這個app.js的代碼。

 1 @mixin maragin-top($value:10px) {
 2     margin-top: $value;
 3 }
 4 
 5 @mixin padding-top-bottom($value:10%) {
 6     padding-top: $value;
 7     padding-bottom: $value;
 8 }
 9 
10 @mixin last-no-margin {
11     &:last-child {
12         margin-bottom: 0px;
13     }
14 }
15 
16 @mixin row-item($type:0) {
17     $item-height: 200px;
18     .item {
19         font-size: 15px;
20         width: (100%/4);
21         display: inline-block;
22         color: $deputy-light-color;
23         zoom: 1;
24         text-align: center;
25         height: $item-height;
26         line-height: $item-height;
27         position: relative;
28         cursor: pointer;
29         @if $type==0 {
30             &:nth-child(odd) {
31                 background-color: $nth-color;
32             }
33             &:nth-child(even) {
34                 background-color: $eth-color;
35             }
36         }
37         @else {
38             &:nth-child(odd) {
39                 background-color: $eth-color;
40             }
41             &:nth-child(even) {
42                 background-color: $nth-color;
43             }
44         }
45     }
46     @keyframes selectAnimation {
47         from {
48             height: 0px;
49         }
50         to {
51             height: $item-height;
52         }
53     }
54     .select {
55         &:after {
56             content: " ";
57             animation: selectAnimation 1s;
58             background-color: $decorate-color;
59             height: $item-height;
60             width: 100%;
61             position: absolute;
62             left: 0px;
63         }
64     }
65 }

這個 function.scss，在sass中運用到的一些邏輯處理方法，查看demo請戳這裏。

style.scss 是最主要的樣式文件，variate.scss裏寫的是scss中運用到的一些變量。今天就寫到這裏了，沒什麼重點難點的，只是我的鞏固練習。

項目源碼地址：https://github.com/codeyoyo/Full-stack-development