# CSS特效搜集1
# 参考资料
- fontawesome (opens new window)
- 32 CSS Glow Effects To Add Dimension And Mood To Your Design (opens new window)
# 特效列表
# 按钮类
# 加载类
# 交互类
# 霓虹灯类
# 展示类
# 第三方编译
上面的有些例子使用了第三方编译，比如coffee，scss，pug，stylus。这里就记录下它们的使用过程，真的是五花八门。
# SASS
它的官网地址为：SASS官网 (opens new window)。
sass是css的一种预处理器，基于ruby语言开发的，需要先安装Ruby，安装完后，更换源并安装：
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
gem update --system
gem install sass
gem install compass
1
2
3
4
2
3
4
下面是转换sass为css:
sass input.scss output.css
1
# stylus
stylus也是一个css的预处理器，它的官网为stylus (opens new window)
安装stylus只需要一条命令：
npm install stylus -g
1
通过下面的命令可以生成css文件：
stylus GlowButton2.styl
1
# PUG
pug是html的一套模板引擎，它的官网为：pug (opens new window)。
通过npm来安装它：
npm install pug -g
1
通过nodejs来对它进行解析：
const pug = require('pug');
// 编译并使用一组数据渲染 template.pug
console.log(pug.renderFile('GlowButton2.pug'))
1
2
3
4
2
3
4
# coffee
coffee是js的一套模板引擎。可通过npm安装，并把coffee文件转换为js文件：
npm install -g coffee-script
coffee --compile --output lib/ src/
1
2
2