常用方法#

align( ) 2.0.0 #

描述: 描述元素内容在横、纵方向上的对齐方式，默认为水平垂直居中对齐

源码位置: ./style/lib/core/classes/_align.scss:1

参数名 类型 描述 支持版本
$flexbox String 元素布局方式，可选值：flex | inline-flex，默认值：flex 2.0.0
$justify-content Keyword 元素内容的水平对齐方式，取值与`justify-content`属性一致，默认值：center 2.0.0
$align-items Keyword 元素内容的垂直对齐方式，取值与`align-items`属性一致，默认值：center 2.0.0

示例: 

.demo {
    @include align;
}

<div class="demo">
     <img alt="未知尺寸图片居中" />
</div>

calc( ) 1.7.0 #

描述: 四则运算(系统要求：iOS6.0+,Android4.4+)

源码位置: ./style/lib/core/classes/_calc.scss:1

参数名 类型 描述 支持版本
$property String 指定需要进行计算的CSS属性 1.7.0
$value String 与原生CSS语法一致，区别在于需要使用引号包裹表达式 1.7.0

示例: 

.calc {
    @include calc(width, "100% - 100px");
}

<div class="calc">四则运算</div>

clearfix( ) 1.0.0 #

描述: 清除浮动方案

源码位置: ./style/lib/core/classes/_clearfix.scss:1

参数名 类型 描述 支持版本
$type String 指定清除浮动的方式，包括：pseudo-element | bfc，默认值：pseudo-element 1.8.5

clearspace( ) 3.0.3 #

描述: 清除行内级元素间间隙方案

源码位置: ./style/lib/core/classes/_clearspace.scss:1

参数名 类型 描述 支持版本
$font-size Length 指定子元素字号，默认值：.14rem 3.0.3

示例: 

.demo {
    @include clearspace;
}

<div class="demo">
     <span class="item">1</span>
     <span class="item">2</span>
     <span class="item">3</span>
</div>

fixed-scale( ) 3.0.10 #

描述: 在自适应宽度情况下，确保内容元素的宽高比固定，比如：实现随屏幕大小而变化的正方形。

源码位置: ./style/lib/core/classes/_fixed-scale.scss:1

参数名 类型 描述 支持版本
$width Length 默认值：100%。用以指定内容元素的初始宽度，由于尺寸需动态变化，不要使用固定单位 3.0.10
$scale Length 默认值：1/1，即正方形。用以指定内容元素的宽度高比 3.0.10

fullscreen( ) 1.7.0 #

描述: 生成全屏方法

源码位置: ./style/lib/core/classes/_fullscreen.scss:1

参数名 类型 描述 支持版本
$z-index Integer 指定层叠级别 1.7.0
$position Keywords 指定定位方式，取除`static | relative`之外的值，默认值：absolute 1.8.5

overflow( ) 1.0.0 #

描述: 定义是否有滚动条

源码位置: ./style/lib/core/classes/_overflow.scss:1

参数名 类型 描述 支持版本
$overflow String 取值与最新原生语法一致，默认值：auto 1.0.0

responsive( ) 1.0.0 #

描述: 定义响应式方案

源码位置: ./style/lib/core/classes/_responsive.scss:1

参数名 类型 描述 支持版本
$media String 指定媒体查询条件，取值为`config`文件map `media-types`中的值 1.0.0

Animation#

animation( ) 1.0.0 #

描述: 定义动画

源码位置: ./style/lib/core/classes/_animation.scss:1

参数名 类型 描述 支持版本
$animation String 取值与原生语法一致 1.0.0

animation-name( ) 3.0.0 #

描述: 指定需要引用的动画名称

源码位置: ./style/lib/core/classes/_animation.scss:12

参数名 类型 描述 支持版本
$animation-name String 取值与原生语法一致 3.0.0

animation-duration( ) 3.0.0 #

描述: 指定动画运行一次所持续的时长

源码位置: ./style/lib/core/classes/_animation.scss:23

参数名 类型 描述 支持版本
$animation-duration String 取值与原生语法一致 3.0.0

animation-timing-function( ) 3.0.0 #

描述: 指定动画运行方式

源码位置: ./style/lib/core/classes/_animation.scss:34

参数名 类型 描述 支持版本
$animation-timing-function String 取值与原生语法一致 3.0.0

animation-delay( ) 3.0.0 #

描述: 指定动画延迟多久之后再开始

源码位置: ./style/lib/core/classes/_animation.scss:45

参数名 类型 描述 支持版本
$animation-delay String 取值与原生语法一致 3.0.0

animation-iteration-count( ) 3.0.0 #

描述: 指定动画循环几次

源码位置: ./style/lib/core/classes/_animation.scss:56

参数名 类型 描述 支持版本
$animation-iteration-count String 取值与原生语法一致 3.0.0

animation-direction( ) 3.0.0 #

描述: 指定动画的运动方向

源码位置: ./style/lib/core/classes/_animation.scss:67

参数名 类型 描述 支持版本
$animation-direction String 取值与原生语法一致 3.0.0

animation-play-state( ) 3.0.0 #

描述: 指定动画的运动状态

源码位置: ./style/lib/core/classes/_animation.scss:78

参数名 类型 描述 支持版本
$animation-play-state String 取值与原生语法一致 3.0.0

animation-fill-mode( ) 3.0.0 #

描述: 指定动画时间之外的状态

源码位置: ./style/lib/core/classes/_animation.scss:89

参数名 类型 描述 支持版本
$animation-fill-mode String 取值与原生语法一致 3.0.0

背景与边框#

gradient( ) 1.0.0 #

描述: 定义渐变色值

源码位置: ./style/lib/core/classes/_background.scss:1

参数名 类型 描述 支持版本
$type String 指定渐变的4种类型：linear, repeating-linear, radial, repeating-radial 1.0.0
$dir String 指定渐变方向，可选值：[left | right] || [top | bottom] | angle 2.0.0
$gradient String 指定渐变取值，与w3c最新原生语法一致 1.0.0

background-size( ) 1.4.0 #

描述: 定义背景图像缩放（AndroidBrowser2.3.*还需要厂商前缀）

源码位置: ./style/lib/core/classes/_background.scss:34

参数名 类型 描述 支持版本
$background-size Keywords | Length 指定背景图缩放值，取值与`background-size`属性一致 1.4.0

background-clip( ) 1.6.0 #

描述: 定义背景裁减（AndroidBrowser2.3.*还需要厂商前缀）

源码位置: ./style/lib/core/classes/_background.scss:45

参数名 类型 描述 支持版本
$background-clip Keywords 指定背景图缩放值，取值与`background-clip`属性一致 1.6.0

background-origin( ) 1.6.0 #

描述: 定义背景显示区域（AndroidBrowser2.3.*还需要厂商前缀）

源码位置: ./style/lib/core/classes/_background.scss:56

参数名 类型 描述 支持版本
$background-origin Keywords 指定背景图`background-position`属性计算相对的参考点，取值与`background-origin`属性一致 1.6.0

border-radius( ) 1.6.0 #

描述: 定义圆角，用于修复某些安卓机型上“圆角+边框+背景”，背景溢出的情况

源码位置: ./style/lib/core/classes/_border-radius.scss:1

参数名 类型 描述 支持版本
$border-radius Length 指定元素的圆角半径，取值与`border-radius`属性一致 1.6.0

border( ) 2.0.0 #

描述: 为元素添加边框（包括1px边框）

源码位置: ./style/lib/core/classes/_border.scss:1

参数名 类型 描述 支持版本
$border-width String 指定边框厚度（单位为px），默认值：1px，取值与`border-width`属性一致，不同方向代表边框位置 2.0.0
$border-color String 指定边框颜色 2.0.0
$border-style String 指定边框样式 2.0.0
$radius String 指定边框圆角半径，默认值：null 2.0.0

Flexbox#

flexbox( ) 1.0.0 #

描述: 定义显示类型为伸缩盒

源码位置: ./style/lib/core/classes/_flex.scss:1

参数名 类型 描述 支持版本
$flexbox String 默认值：flex，可选值：flex | inline-flex 1.0.0

flex( ) 1.0.0 #

描述: 定义伸缩盒子元素如何分配空间

源码位置: ./style/lib/core/classes/_flex.scss:34

参数名 类型 描述 支持版本
$flex Number 取值与`flex`属性一致，默认值：1 1.0.0
$direction String 默认值: row，可选值：row | column 1.5.0

order( ) 1.0.0 #

描述: 定义伸缩盒子元素的排版顺序

源码位置: ./style/lib/core/classes/_flex.scss:67

参数名 类型 描述 支持版本
$order Integer 取值与`order`属性一致，默认值：1 1.0.0

flex-flow( ) 2.0.0 #

描述: 定义弹性盒子元素流动方向及遇见边界时是否换行(要求系统：iOS7.0+, Android4.4+)

源码位置: ./style/lib/core/classes/_flex.scss:92

参数名 类型 描述 支持版本
$flex-flow String 取值与`flex-flow`属性一致，默认值：row nowrap 2.0.0

flex-direction( ) 1.0.0 #

描述: 定义伸缩盒子元素的流动方向

源码位置: ./style/lib/core/classes/_flex.scss:104

参数名 类型 描述 支持版本
$flex-direction String 取值与`flex-direction`属性一致，默认值：row 1.0.0

flex-wrap( ) 1.0.0 #

描述: 定义弹性盒子元素溢出后排版(要求系统：iOS7.0+, Android4.4+)

源码位置: ./style/lib/core/classes/_flex.scss:162

参数名 类型 描述 支持版本
$flex-wrap String 取值与`flex-wrap`属性一致，默认值：nowrap 1.0.0

justify-content( ) 1.0.0 #

描述: 定义弹性容器主轴对齐方式(其中`space-around`值需要iOS7.0+,Android4.4+)

源码位置: ./style/lib/core/classes/_flex.scss:175

参数名 类型 描述 支持版本
$justify-content String 取值与`justify-content`属性一致，默认值：center 1.0.0

align-content( ) 1.8.5 #

描述: 定义多行弹性容器侧轴对齐方式(要求系统：iOS7.0+,Android4.4+)

源码位置: ./style/lib/core/classes/_flex.scss:255

参数名 类型 描述 支持版本
$align-content String 取值与`align-content`属性一致，默认值：center 1.8.5

align-items( ) 1.0.0 #

描述: 定义单行弹性容器侧轴对齐方式

源码位置: ./style/lib/core/classes/_flex.scss:329

参数名 类型 描述 支持版本
$align-items String 取值与`align-items`属性一致，默认值：center 1.0.0

align-self( ) 1.0.0 #

描述: 定义弹性容器中子元素自身的在侧轴对齐方式(要求系统：iOS7.0+,Android4.4+)

源码位置: ./style/lib/core/classes/_flex.scss:383

参数名 类型 描述 支持版本
$align-self String 取值与`align-self`属性一致，默认值：center 1.0.0

形状#

rect( ) 1.0.0 #

描述: 生成矩形方法

源码位置: ./style/lib/core/classes/_shape.scss:1

参数名 类型 描述 支持版本
$width Length 定义矩形的长度 1.0.0
$height Length 定义矩形的高度 1.0.0

square( ) 1.0.0 #

描述: 生成正方形方法

源码位置: ./style/lib/core/classes/_shape.scss:14

参数名 类型 描述 支持版本
$size Length 定义正方形的边长 1.0.0

circle( ) 1.0.0 #

描述: 生成圆形方法

源码位置: ./style/lib/core/classes/_shape.scss:26

参数名 类型 描述 支持版本
$size Length 定义圆的半径长度 1.0.0
$radius Length 定义圆的圆角半径长度 1.0.0

文本#

描述: 链接处理方法

源码位置: ./style/lib/core/classes/_text.scss:1

参数名 类型 描述 支持版本
$color Color 定义链接颜色 1.0.0

wrap( ) 1.0.0 #

描述: 文本碰到边界是否换行

源码位置: ./style/lib/core/classes/_text.scss:16

参数名 类型 描述 支持版本
$is-wrap Boolean 定义文本是否换行，默认值：true 2.0.0

ellipsis( ) 1.0.0 #

描述: 单行文本溢出时显示省略号

源码位置: ./style/lib/core/classes/_text.scss:32

参数名 类型 描述 支持版本
$width Length 定义容器的宽度，默认值：null 2.0.0
$line-clamp Integer 定义需要显示的行数，默认值：1（即使用单行溢出的处理方案），需要注意的是本参数只支持webkit内核 2.1.2

texthide( ) 1.0.0 #

描述: 文字隐藏方案

源码位置: ./style/lib/core/classes/_text.scss:55

参数名 类型 描述 支持版本
$width Length 定义容器的宽度，默认值：null 2.0.0

Transform#

transform( ) 1.0.0 #

描述: 定义简单变换

源码位置: ./style/lib/core/classes/_transform.scss:1

参数名 类型 描述 支持版本
$transform String 取值范围与`transform`属性一致 1.0.0

transform-origin( ) 1.0.0 #

描述: 定义变换原点

源码位置: ./style/lib/core/classes/_transform.scss:12

参数名 类型 描述 支持版本
$transform-origin Length | Percentage | Keywords 取值范围与`transform-origin`属性一致 1.0.0

transform-style( ) 2.0.0 #

描述: 指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化

源码位置: ./style/lib/core/classes/_transform.scss:23

参数名 类型 描述 支持版本
$transform-style String 取值范围与`transform-style`属性一致 2.0.0

perspective( ) 2.0.0 #

描述: 指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生透视效果。「z>0」的三维元素比正常大，而「z<0」时则比正常小，大小程度由该属性的值决定。

源码位置: ./style/lib/core/classes/_transform.scss:34

参数名 类型 描述 支持版本
$perspective none | Length 取值范围与`perspective`属性一致 2.0.0

perspective-origin( ) 2.0.0 #

描述: 指定透视点的位置

源码位置: ./style/lib/core/classes/_transform.scss:45

参数名 类型 描述 支持版本
$perspective-origin Length | Percentage | Keywords 取值范围与`perspective-origin`属性一致 2.0.0

backface-visibility( ) 2.0.0 #

描述: 指定元素背面面向用户时是否可见

源码位置: ./style/lib/core/classes/_transform.scss:56

参数名 类型 描述 支持版本
$backface-visibility Keywords 取值范围与`backface-visibility`属性一致 2.0.0

Transition#

transition( ) 1.0.0 #

描述: 定义补间

源码位置: ./style/lib/core/classes/_transition.scss:1

参数名 类型 描述 支持版本
$transition String 取值与原生语法一致 1.0.0

用户界面#

filter( ) 1.7.0 #

描述: 定义使用何种滤镜

源码位置: ./style/lib/core/classes/_user-interface.scss:1

参数名 类型 描述 支持版本
$filter String 取值与`filter`属性一致 1.7.0

appearance( ) 1.0.0 #

描述: 定义UA默认外观

源码位置: ./style/lib/core/classes/_user-interface.scss:12

参数名 类型 描述 支持版本
$appearance String 取值与`appearance`属性一致，默认值：none 1.0.0

user-select( ) 1.0.0 #

描述: 定义如何选中内容

源码位置: ./style/lib/core/classes/_user-interface.scss:23

参数名 类型 描述 支持版本
$user-select String 取值与`user-select`属性一致，默认值：none 1.0.0

box-sizing( ) 1.0.0 #

描述: 定义盒模型

源码位置: ./style/lib/core/classes/_user-interface.scss:34

参数名 类型 描述 支持版本
$box-sizing String 指定盒模型类型，取值与`box-sizing`属性一致，默认值：border-box 1.0.0

List扩展函数#

first( ) 2.1.0 #

描述: 返回SassList中的第一项

源码位置: ./style/lib/core/function.scss:6

参数名 类型 描述 支持版本
$list String 指定一个Sass List 2.1.0

last( ) 2.1.0 #

描述: 返回SassList中的最后一项

源码位置: ./style/lib/core/function.scss:28

参数名 类型 描述 支持版本
$list String 指定一个Sass List 2.1.0

nth-last( ) 2.1.0 #

描述: 返回SassList中的倒数第几项

源码位置: ./style/lib/core/function.scss:50

参数名 类型 描述 支持版本
$list String 指定一个Sass List 2.1.0
$index Integer 指定需要返回的值在list中的倒数位置 2.1.0

remove( ) 2.1.0 #

描述: 移除SassList中的某个项目并返回新的List

源码位置: ./style/lib/core/function.scss:77

参数名 类型 描述 支持版本
$list String 指定一个Sass List 2.1.0
$value String 指定需要被删除的值 2.1.0

slice( ) 2.1.0 #

描述: 截取SassList中的某个部分并返回新的List

源码位置: ./style/lib/core/function.scss:104

参数名 类型 描述 支持版本
$list String 指定一个Sass List 2.1.0
$start Integer 指定需要截取的开始下标 2.1.0
$end Integer 指定需要截取的结束下标（不包括end），当该值缺省时默认为末尾下标 2.1.0

splice( ) 2.1.0 #

描述: 从SassList中添加/删除项目，然后返回新的List。

源码位置: ./style/lib/core/function.scss:134

参数名 类型 描述 支持版本
$list String 指定一个Sass List 2.1.0
$index Integer 指定需要移除的开始下标 2.1.0
$count Integer 指定需要移除的数量，不可以为负值，0表示不移除 2.1.0
$values String 指定需要添加的新值（可以是多个），如果该值缺省，则表示只移除不添加新值 2.1.0