Sandal

variables 文件

提供了全局的常用变量，大概包括字体，颜色，圆角，z-index等，具体请查看源码

media queries 文件

负责响应式断点判断的文件。来自paranoida的sass-mediaqueries，具体使用可以参考其站点，（安装除外）

animation 文件

提供6组简单实用动画：fade-in/out, shrink-in/out, up-in/out, down-in/out，left-in/out，right-in/out。默认不产生样式，通过@include调用，以fade-in/out为例：

@include animation-fade-in;
@include animation-fade-out;

.fade-in, .fade-out {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.fade-in {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-out {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

icons 文件

icons包括绘制icons及svg icons两种，对retina屏毫无压力。

绘制icons

• icon颜色一般使用currentColor颜色，可以方便设置标签的color颜色来改变
• 对于不变的icon，如radio & checkbox直接设置大小，而一些可变的icon，通过标签的伪元素来绘制，标签本身没有设置大小，可根据实际情况设置大小（设置大点可扩大点击范围），伪元素绘制的会保持水平垂直居中

svg icons

从icomoon提取了几个常用的svg图标，使用方法可参考ext/icons/icons.html，这里以home图标为例：

<svg class="icon icon-home"><use xlink:href="icons.svg#icon-home"></use></svg>

如需改变颜色，可以通过设置css的fill属性来定义

.icon-home{
    fill:#f00;
}

最后可根据实际需求对icons.svg进行增删改， 然后使用。

注：使用时请把icons.svg拷贝至images目录或其他目录，方便调用

grid 文件

移动端的网格系统，分为row和col，具体使用参考3分钟13行代码搭建sass版移动端网格系统

helper 文件

提供常用的基础class，具体请查看源码

page slide 文件

用于页面切换的动画class，共四个class，分两组：右进左出（页面进入）；左进右出（后退）,具体使用可参看移动端重构实战系列4——进入离开动画