首页 / HTML / sass+require实现侧边栏
sass+require实现侧边栏
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了sass+require实现侧边栏，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8774字，纯文字阅读大概需要13分钟。
内容图文
一、效果图（如下）及使用的技术
实现用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.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 });
内容总结
以上是互联网集市为您收集整理的sass+require实现侧边栏全部内容，希望文章能够帮你解决sass+require实现侧边栏所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。