你的位置:首页 > 网页设计

[网页设计]sass+require实现侧边栏


 

一、效果图(如下)及使用的技术

    实现用sass实现页面中右侧固定侧边栏的样式,用require.js实现返回顶部的功能

二、sass

    具体的sass的介绍就不多说了,大家可以参考sass官网介绍,下面说一下sass的两种编译方法;

    a、koala编译

      koala 是一款桌面程序,支持 less 、 sass 、 coffeescript 即时编译。下载地址:http://koala-app.com/

      

     koala可以直接对scss进行编译,不需要敲命令,并且可以对scss进行监控,具体使用方法见:http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html

   注:此种编译方法比较方便,只要下载koalo即可,新建*.scss文件,拖进工作区点击”完成“,即可,并且可以监控添加到工作区的文件,不用每次点击编译;

  b、sass命令编译(推荐)

    此方法需要进行以下步骤:

    (1)因为sass依赖于ruby环境,所以装sass之前先确认装了ruby。官网下载:ruby;

            在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境

            

      (2)安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby

            

          然后在命令行中直接输入:

 gem install sass

          按回车安装,如果安装不成功,可以直接在http://www.w3cplus.com/sassguide/install.html 中下载图中的“sass安装文件”

          

     下载之后放到ruby的安装目录下的gems文件夹中即可(如下图)

 

     

 

     安装完成后可以在命令行中输入命令:

       * 查看sass版本的命令行为

sass -v

 

       * 你也可以运行帮助命令行来查看你需要的命令

sass -h

       * 单文件转换命令

 sass style.scss style.css

      * 单文件监听命令

sass --watch style.scss:style.css

       * 文件夹监听命令

sass --watch sassFileDirectory:cssFileDirectory


三、require.js使用基础

       新建一个目录,结构如下

       

       目录toolbar下有index.html、jquery-1.11.3js、main.js、require.js。require.js和jquery-1.11.3.js去各自官网下载即可。

       index.html如下:

 1 <!doctype html> 2 <html> 3   <head> 4     <title>requirejs</title> 5     <meta charset="utf-8"> 6     <script data-main="js/main" src="js/require.js"></script> 7   </head> 8   <body> 9   10   </body>11 </html>12   

 


      使用requirejs很简单,只需要在head中通过script标签引入它(实际上除了require.js,其它文件模块都不再使用script标签引入)。

      细心的同学会发现script标签上了多了一个自定义属性:data-main="main",等号右边的main指的main.js。当然可以使用任意的名称。

      这个main指主模块或入口模块,好比c或java的主函数main。

      main.js如下

1 require.config({2   paths: {3     jquery: 'jquery-1.11.3'//此处用不用添加.js后缀,否则执行的时候会报错4   }5 });6 7 require(['jquery'], function($) {8   alert($().jquery);9 });

 


     main.js中就两个函数调用require.config和require。

     require.config用来配置一些参数,它将影响到requirejs库的一些行为。

     require.config的参数是一个JS对象,常用的配置有baseUrl,paths等。

     这里配置了paths参数,使用模块名“jquery”,其实际文件路径jquery-1.11.3.js(后缀.js可以省略)。

 

     注:有些同学习惯用npm 来下载相关文件,在这里有一点需要注意的是:

     下载require.js的命令是:

npm install requirejs

     而不是( 注 意 )

npm install require.js   

 

四、功能实现

      项目目录结构如下:

      

      在命令行输入命令如下,对scss文件夹进行监听并将scss中的scss文件编译到css文件夹中;

     

1、html部分:

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4   <meta charset="UTF-8"> 5   <title>toolbar</title> 6   <link rel="stylesheet" href="css/index.css"> 7  8 </head> 9 <body> 10 <div class="toolbar"> 11   <a href="javascript:;" class="toolbar-item toolbar-item-weixin"> 12     <span class="toolbar-layout"></span> 13   </a> 14   <a href="javascript:;" class="toolbar-item toolbar-item-feedback"></a> 15   <a href="javascript:;" class="toolbar-item toolbar-item-app"> 16     <span class="toolbar-layout"></span> 17   </a> 18   <a id="backTop" href="javascript:;" class="toolbar-item toolbar-item-top"> 19     <span class="toolbar-btn"></span> 20   </a> 21 </div> 22 <!--下面部分是为了使页面出现滚动条,方便测试--> 23 <p>测试</p> 24 <p>测试</p> 25 <p>测试</p> 26 <p>测试</p>    ...119 <p>测试</p>120 <p>测试</p>121 <p>测试</p>122 <p>测试</p>123 <script src="js/require.js" data-main="js/main"></script>124 </body>125 </html>

 

 2、css & scss部分:   

   scss文件夹中的:

         (1) _mixin.scss: scss可以像js一样,将一些公共的样式封装成函数,便于重复利用

 1 @mixin opacity($opacity){ 2  opacity: $opacity; 3  filter: opacity($opacity * 100); 4 } 5 @mixin transform-origin ($transform-origin){ 6  transform-origin: $transform-origin; 7  -webkit-transform-origin: $transform-origin; 8  -o-transform-origin: $transform-origin; 9  -ms-transform-origin: $transform-origin;10  -moz-transform-origin: $transform-origin;11 }12 @mixin scale($scale){13  transform: scale($scale);14  -webkit-transform: scale($scale);15  -o-transform: scale($scale);16  -ms-transform: scale($scale);17  -moz-transform: scale($scale);18 }19 @mixin transition($transition){20  transition: $transition;21  -webkit-transition: $transition;22  -o-transition: $transition;23  -ms-transition: $transition;24  -moz-transition: $transition;25 }

     (2) toobar.scss : 该模块中的自有样式(只在自个模块中使用的)

     

 1 @import "mixin"; 2 @mixin toolbar-item($pos,$hoverPos){ 3  background-position: 0 $pos; 4  &:hover { 5   background-position: 0 $hoverPos; 6  } 7  8 } 9 $toolbar-size: 52px;10 11 .toolbar-item, .toolbar-layout {12  background-image: url(../img/toolbar.png);13  background-repeat: no-repeat;14 }15 .toolbar {16  position: fixed;17  left: 50%;18  bottom: 100px;19  margin-left: -$toolbar-size / 2;20 }21 .toolbar-item {22  position: relative;23  display: block;24  width: $toolbar-size;25  height: $toolbar-size;26  margin-top: 1px;27 28  @include transition(background-position 1s);29  &:hover {30   .toolbar-layout {31    @include opacity(1);32    @include scale(1);33    @include transition(all 1s);34   }35  }36 37 }38 .toolbar-layout {39  position: absolute;40  right: $toolbar-size - 5;41  bottom: 0;42  width: 172px;43  @include transform-origin(95% 95%);44  @include opacity(0);45  @include scale(0.01);46  @include transition(all 1s);47 48 }49 .toolbar-item-weixin {50  @include toolbar-item(-798px, -860px);51 52  .toolbar-layout {53   height: 212px;54   background-position: 0 0;55  }56 }57 58 .toolbar-item-feedback {59  @include toolbar-item(-426px,-488px);60 61 }62 .toolbar-item-app {63  @include toolbar-item(-550px,-612px);64 65  .toolbar-layout {66   height: 194px;67   background-position: 0 -222;68  }69 }70 .toolbar-item-top {71  @include toolbar-item(-674px,-736px);72  73 }

    (3) index.scss: 该项目引入的样式文件,编译后为index.css,在html中只引入index.css,便于文件管理

    

1 @import "toolbar";

  3、js部分:

   (1)jquery-1.11.3.js和require.js是该项目的依赖,可从各自官网下载,也可以通过npm下载,html中只引入require.js即可

   (2)main.js是项目的入口文件

require.config({ paths:{  jquery:"./jquery-1.11.3" }});require(['jquery',"backtop"],function ($,backTop) { var backTop = new backTop.BackTop($("#backTop"),{//构造函数实例化  mode:"move",  dest:0,  speed:500 });});

  (3)backtop.js:

 1 define(["jquery","scrollTo"],function($,scrollTo){ 2  3  function BackTop(el,opts){ 4  5   this.opts = $.extend({},BackTop.defaults,opts); 6   this.$el =$(el); 7  8   this.scroll = new scrollTo.ScrollTo({ 9    dest: 0,10    speed:this.opts.speed11   });12 13   if(this.opts.mode === "move"){14    this.$el.on("click", $.proxy(this._move,this));//改变this指向15 16   }else {17    this.$el.on("click", $.proxy(this._go,this));//改变this指向18 19   }20 21   this._checkPosition();22   $(window).on("scroll",$.proxy(this._checkPosition,this));23 24  };25 26 27 28  BackTop.defaults = {29   mode:'move',//返回顶部的方式,直接返回还是动画返回30   pos:$(window).height(),//返回顶部按钮显示隐藏的初始值31   speed:80032  }33 34  BackTop.prototype._move = function(){35   this.scroll.move();36  }37  BackTop.prototype._go = function(){38   this.scroll.go();39  }40  BackTop.prototype._checkPosition = function(){41 42   var $el = this.$el;43 44   if($(window).scrollTop() > this.opts.pos){45 46    $el.fadeIn();47   }else {48    $el.fadeOut();49   }50  };51 52  return {BackTop:BackTop}53 54 });

(4)scrollTo.js

 1 define(["jquery"],function($){ 2  3  function ScrollTo(opts){ 4  5   this.opts = $.extend({},ScrollTo.defaults,opts); 6  7   this.$el = $("html,body"); 8  9  };10 11  ScrollTo.prototype.move = function(){12   var opts = this.opts;13   var dest = opts.dest;14   //防止动画未结束多次执行动画15   if($(window).scrollTop() != dest){//判断是否到达目的地16 17    if(!this.$el.is(":animated")){//判断是否在运动18 19     this.$el.animate({20      scrollTop:dest21     },opts.speed);22    }23   }24 25  };26  ScrollTo.prototype.go = function(){27 28   var dest = this.opts.dest;29 30   if($(window).scrollTop() != dest){31    this.$el.scrollTop(dest);32   }33 34  };35  ScrollTo.defaults = {36   dest: 0,//目的地37   speed:800//滚动速度38  };39  return {40   ScrollTo:ScrollTo41  }42 });