迈向全栈开发学习(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中运用到的一些变量。今天就写到这里了，没什么重点难点的，只是个人巩固练习。
