欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

sass+require实现侧边栏

程序员文章站 2022-04-13 07:51:50
...
一、效果图(如下)及使用的技术

sass+require实现侧边栏

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

二、sass

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

a、koala编译

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

sass+require实现侧边栏

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环境

sass+require实现侧边栏

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

sass+require实现侧边栏

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

 gem install sass

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

sass+require实现侧边栏

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

sass+require实现侧边栏

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

* 查看sass版本的命令行为

sass -v

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

sass -h

* 单文件转换命令

  sass style.scss style.css

* 单文件监听命令

sass --watch style.scss:style.css

* 文件夹监听命令

sass --watch sassFileDirectory:cssFileDirectory

三、require.js使用基础

新建一个目录,结构如下

sass+require实现侧边栏

目录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>requirejstitle>
 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   

四、功能实现

项目目录结构如下:

sass+require实现侧边栏

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

sass+require实现侧边栏

1、html部分:

  1 DOCTYPE html>
  2 html lang="en">
  3 head>
  4     meta charset="UTF-8">
  5     title>toolbartitle>
  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
  });
});

sass+require实现侧边栏

(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.speed
11     });
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:800
32   }
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:dest
21         },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:ScrollTo
41   }
42 });