实现用sass实现页面中右侧固定侧边栏的样式,用require.js实现返回顶部的功能
二、sass
具体的sass的介绍就不多说了,大家可以参考sass官网介绍,下面说一下sass的两种编译方法;
a、koala编译
注:此种编译方法比较方便,只要下载koalo即可,新建*.scss文件,拖进工作区点击”完成“,即可,并且可以监控添加到工作区的文件,不用每次点击编译;
b、sass命令编译(推荐)
此方法需要进行以下步骤:
(1)因为sass依赖于ruby环境,所以装sass之前先确认装了ruby。官网下载:ruby;
在安装的时候,请勾选AddRubyexecutablestoyourPATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境
(2)安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开StartCommandPromptwithRuby
然后在命令行中直接输入:
下载之后放到ruby的安装目录下的gems文件夹中即可(如下图)
安装完成后可以在命令行中输入命令:
*查看sass版本的命令行为
*你也可以运行帮助命令行来查看你需要的命令
新建一个目录,结构如下
目录toolbar下有index.html、jquery-1.11.3js、main.js、require.js。require.js和jquery-1.11.3.js去各自官网下载即可。
index.html如下:
使用requirejs很简单,只需要在head中通过script标签引入它(实际上除了require.js,其它文件模块都不再使用script标签引入)。
细心的同学会发现script标签上了多了一个自定义属性:data-main="main",等号右边的main指的main.js。当然可以使用任意的名称。
这个main指主模块或入口模块,好比c或java的主函数main。
main.js如下
main.js中就两个函数调用require.config和require。
require.config用来配置一些参数,它将影响到requirejs库的一些行为。
require.config的参数是一个JS对象,常用的配置有baseUrl,paths等。
这里配置了paths参数,使用模块名“jquery”,其实际文件路径jquery-1.11.3.js(后缀.js可以省略)。
下载require.js的命令是:
四、功能实现
项目目录结构如下:
在命令行输入命令如下,对scss文件夹进行监听并将scss中的scss文件编译到css文件夹中;
1、html部分:
2、css&scss部分:
scss文件夹中的:
(1)_mixin.scss:scss可以像js一样,将一些公共的样式封装成函数,便于重复利用
(1)jquery-1.11.3.js和require.js是该项目的依赖,可从各自官网下载,也可以通过npm下载,html中只引入require.js即可