#sasshat

简单易用的SASS库 The simple and easy sass library

---

这是个sass库，专为sass语言，如果你用的是LESS，请移步这个LESS高大上的库 lesshat.com

##DEMO 先看做的几个 ###DEMOs

###下面是几个gif是某app内hybrid形式嵌入去网页内动画截图

##代码使用例子 ####风骚的 sass 写法

div 
	+box-shadow(1px 1px 2px #000)

####或保守的 scss 写法

div{
	@include box-shadow(1px 1px 2px #000);
}

####编译结果

// Results
div{
	-webkit-box-shadow: 1px 1px 2px black;
    -moz-box-shadow: 1px 1px 2px black;
    -ms-box-shadow: 1px 1px 2px black;
    box-shadow: 1px 1px 2px black;
}

##Get Started 1、新建一个以.sass或.scss结尾的文件如： demo.sass或demo.scss

2、在文件中引入如：@import '_sasshat.sass'

3、现在可以开始写你自己的sass了

##特点

• 书写css3更方便
• 特别适合手机web页面
• “多米诺”动画让animation动画更酷

##“多米诺”动画 多米諾骨牌，即碰倒第一枚骨牌，其余的骨牌就会产生连锁反应，依次倒下。 “多米诺”动画即引申自多米诺骨牌，即让一连串的HTML元素延时依次逐个完成相应的动画效果。

DEMOs

sasshat多米诺动画具体的CSS3动画其实是集成自**animate.css** 动画库。所以在编写多米諾动画时实现一些常见的效果已经不需要你去编写keyframes动画帧了，直接调用已经编写好的keyframes名称就可以.

为了减小css体积，请只导入要使用到的动画模块。 全部的动画模块已改成scss后缀，文件来源于animate.css项目

####编写“多米诺”动画的写法

1、先设置某个动画变量为true

2、导入_sasshat.sass文件和要用到的动画.scss文件

@import '_animate.scss','_sasshat.sass'
@import "animate/fading_entrances/fadeInUp.scss"

3、调用多米诺动画函数

+dominoAnimation(".lomo",fadeInUp, 1, 6)

#####Results

// 编译后就会生成以下内容，形成元素逐个按延时长短形成动画
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px); }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }
@-moz-keyframes fadeInUp {
  0% {
    opacity: 0;
    -moz-transform: translateY(20px); }

  100% {
    opacity: 1;
    -moz-transform: translateY(0); } }
@-o-keyframes fadeInUp {
  0% {
    opacity: 0;
    -o-transform: translateY(20px); }

  100% {
    opacity: 1;
    -o-transform: translateY(0); } }
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px); }

  100% {
    opacity: 1;
    transform: translateY(0); } }
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  -moz-animation-name: fadeInUp;
  animation-name: fadeInUp; }

.lomo:nth-child(1) {
    -webkit-animation: fadeInUp 0.5s 0.1s ease;
    -moz-animation: fadeInUp 0.5s 0.1s ease;
    -ms-animation: fadeInUp 0.5s 0.1s ease;
    animation: fadeInUp 0.5s 0.1s ease; }
  .lomo:nth-child(2) {
    -webkit-animation: fadeInUp 0.5s 0.2s ease;
    -moz-animation: fadeInUp 0.5s 0.2s ease;
    -ms-animation: fadeInUp 0.5s 0.2s ease;
    animation: fadeInUp 0.5s 0.2s ease; }
  .lomo:nth-child(3) {
    -webkit-animation: fadeInUp 0.5s 0.3s ease;
    -moz-animation: fadeInUp 0.5s 0.3s ease;
    -ms-animation: fadeInUp 0.5s 0.3s ease;
    animation: fadeInUp 0.5s 0.3s ease; }
  .lomo:nth-child(4) {
    -webkit-animation: fadeInUp 0.5s 0.4s ease;
    -moz-animation: fadeInUp 0.5s 0.4s ease;
    -ms-animation: fadeInUp 0.5s 0.4s ease;
    animation: fadeInUp 0.5s 0.4s ease; }
  .lomo:nth-child(5) {
    -webkit-animation: fadeInUp 0.5s 0.5s ease;
    -moz-animation: fadeInUp 0.5s 0.5s ease;
    -ms-animation: fadeInUp 0.5s 0.5s ease;
    animation: fadeInUp 0.5s 0.5s ease; }
  .lomo:nth-child(6) {
    -webkit-animation: fadeInUp 0.5s 0.6s ease;
    -moz-animation: fadeInUp 0.5s 0.6s ease;
    -ms-animation: fadeInUp 0.5s 0.6s ease;
    animation: fadeInUp 0.5s 0.6s ease; }
  .lomo {
    -webkit-animation-fill-mode: both !important;
    -moz-animation-fill-mode: both !important;
    -ms-animation-fill-mode: both !important;
    animation-fill-mode: both !important; }

####CSS3动画的优点（具体需要看浏览器实现） 1.不占用js主线程

2.可利用硬件加速

3.浏览器可对动画做优化(元素不可见时不动画, 减少对FPS的影响)

dominoAnimation函数

#####写法可以有以下几种，根据实际HTML结构选择使用

+dominoAnimation(li,scaleIn, 1, 4, .5s)
+dominoAnimation(li,scaleIn, 4, 1, .5s)
+dominoAnimation($loopElement:li,$frameName:fadeInLeft, $start:1, $end:4, $applyElement:'.type')

API文档:

---

混合函数列表:

1. align-content flexbox
2. align-items flexbox
3. align-self flexbox
4. animation
5. animation-delay
6. animation-direction
7. animation-duration
8. animation-fill-mode
9. animation-iteration-count
10. animation-name
11. animation-play-state
12. animation-timing-function
13. appearance
14. backface-visibility
15. background-clip
16. background-origin
17. background-size
18. blur filter
19. border-bottom-left-radius
20. border-bottom-right-radius
21. border-radius
22. border-top-left-radius
23. border-top-right-radius
24. box-shadow
25. box-sizing
26. brightness filter
27. calc
28. column-count
29. column-gap
30. column-rule
31. column-width
32. columns
33. contrast filter
34. display flexbox
35. drop-shadow filter
36. filter
37. flex flexbox
38. flex-wrap flexbox
39. font-face
40. grayscale filter
41. hue-rotate filter
42. justify-content flexbox
43. keyframes
44. opacity
45. order
46. perspective
47. perspective-origin
48. placeholder
49. rotate transform
50. rotate3d transform
51. rotateX transform
52. rotateY transform
53. rotateZ transform
54. scale transform
55. scale3d transform
56. scaleX transform
57. scaleY transform
58. scaleZ transform
59. selection
60. sepia filter
61. size width, height
62. skew transform
63. skewX transform
64. skewY transform
65. transform
66. transform-origin
67. transform-style
68. transition
69. transition-delay
70. transition-duration
71. transition-property
72. transition-timing-function
73. translate transform
74. translate3d transform
75. translateX transform
76. translateY transform
77. translateZ transform
78. user-select

---