SASS+Compass基本使用，结合JavaScript实现随机点名小系统

SASS+Compass基本使用，以一个随机点名demo为例
demo 源码：https://github.com/XieTongXue/call-over，效果请看(5)，代码解释请看源码。
（1）SASS、Compass是什么？为什么要用它？
SASS是一种“CSS预处理器”，是一款强化CSS的辅助工具，在CSS语法基础上增加了变量(variables)、嵌套(nested rules)、混合(mixins)等高级功能，使得CSS更强大。
Compass是一个Sass的样式库，有助于更好地组织管理样式文件，使得开发更高效。
（2）SASS、Compass安装
sass基于Ruby语言开发，安装sass前需要安装ruby，mac自带ruby，不需要重新安装
安装过程可参考：https://blog.csdn.net/sanchan/article/details/47751401
安装成功测试：

（3）使用创建compass项目

创建出的目录如下

（4）sass编译与css文件的引用
进入项目根目录，运行compass compile, 会将sass子目录中的.scss文件编译成.css文件，保存在stylesheets子目录中，新建html文件引入其中的css文件即可。
index.html源码：

style.scss源码：

运行compass compile后的项目目录

style.css源码及解释：

这部分是由于引入了compass的reset模块，此模块的作用是重置浏览器的默认属性，使元素不设置样式时在各个浏览器下也显示同样的效果。

这部分是因为引入了compass的css3模块并使用了圆角功能，使用@include border-radius(50%)后，compass会在编译时自动生成兼容各大浏览器的代码。
简单demo运行效果：

（5）SASS+Compass稍微复杂一些的demo实现
demo功能：随机点名
实现效果：

源码地址：https://github.com/XieTongXue/call-over

SASS+Compass基本使用，结合JavaScript实现随机点名小系统相关推荐

原生JavaScript实现随机点名
原生JavaScript实现随机点名一,HTML代码 <div id="center"><div id="showname">O_O ...
Python wxpython篇 | Python生态库之图形用户界面开发库 “wxPython “ 的安装及使用（附. 使用pyinstaller 库打包Python随机点名小程序程序.exe文件）
全文目录 wxPython 图形用户界面 PyCharm 中安装 wxPython库 PyCharm中将程序打包成 .exe 可执行文件 wxPython 的使用第一个wxPython 程序自定义 ...
随机点名小程序 tkinter
随机点名小程序源码见github: https://github.com/linli1724647576/Random_roll_call 问题描述随机点名程序(越不来上课的人,被点中的概率越高, ...
Tkinter模块GUI界面化编程实战（四）——随机点名小程序（含详解及完整源码、完整程序下载链接）
[上期回顾:Tkinter模块GUI界面化编程实战(三)--2048小游戏] 这篇博客介绍了如何用Python Tkinter模块编写一个界面化的随机点名小程序,在博客下面有完整的源码,源码中有超详 ...
html中自动随机点名的程序,JavaScript实现随机点名程序
本文实例为大家分享了js实现随机点名程序的具体代码,供大家参考,具体内容如下效果: 录制的gif效果图没那么理想,其实速度是比这个快的思路: 1.定义一个数组,存放名单 2.启动定时器,设定间隔时 ...
[Electron]仿写一个课堂随机点名小项目
自从前几个月下了抖音,无聊闲暇时就打会打开抖音,因为打开它有种莫名其妙打开了全世界的感觉... 无意中看到这个小视频:随机点名于是仿写了一个课堂点名小项目,算是对Electron的一个简单的认识,有 ...
Excel制作随机点名小程序
在Excel工作表中,通过空间命令按钮和VBA代码,可以省略很多简单重复的工作,例如点名.只要名单上有名字,就不需要人工拿着花名册挨个点名,在这里Excel就可以充当你的智能小助手. 一.按Alt+F ...
【JS】随机点名小案例
一.html <h2>随机点名</h2><div class="box"><span>名字是:</span><di ...
javascript实现随机点名
1.math随机数方法获取一个数,再根据这个随机数找到相应数组的索引,把索引对应的值取出来,进行展示,中间再利用setInterval()计时器实现循环,紧接着再利用settimeout()计时器只执 ...

SASS+Compass基本使用，结合JavaScript实现随机点名小系统

SASS+Compass基本使用，结合JavaScript实现随机点名小系统相关推荐

最新文章

热门文章