迈向全栈开发学习(3)

2018-06-24 00:36:47来源：未知阅读 ()

久违的一文了，有一个多月没有更新我这个博文了，太懒了；今天突然想起来就把这一文写了。上回简单说了下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 }