saber

排版

clearfix()

清除浮动。

参考：A new micro clearfix hack

1
2
.container
    clearfix()

生成的 CSS：

1
2
3
4
5
6
7
8
.container:after,
.container:before {
    content: ' ';
    display: table;
}
.container:after {
    clear: both;
}

hide-text()

隐藏容器内的文字。

参考：Update CSS image replacement technique

1
2
.banner
    hide-text()

生成的 CSS：

1
2
3
4
5
.banner {
    color: transparent;
    font: 0/0 a;
    text-shadow: none;
}

ellipsis(line)

溢出文本显示省略号。

多行截断 仅在 webkit 内核下有生效，且要保证容器上下的 padding 为 0，否则本该被截断的文字会溢出。

1
2
3
4
.title
    ellipsis()
.desc
    ellipsis(3)

生成的 CSS：

1
2
3
4
5
6
7
8
9
10
11
12
.title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.desc {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

font-face: font-family, font-path, font-weight, font-style

快速引入本地路径的字体。

通过检测 font-path 对应的各种 字体格式 是否存在，生成最合适的配置。

若需要引入远程路径的字体，请直接手写 @font-face。

检测的字体格式有：

1
2
// 对应路径下有 ttf, woff 两种格式的字体
font-face('Open Sans', '../font/open-sans-bold', 700)

生成的 CSS：

1
2
3
4
5
6
7
@font-face {
    font-family: 'Open Sans';
    src: url("../font/open-sans-bold.woff") format('woff'),
         url("../font/open-sans-bold.ttf") format('truetype');
    font-weight: 700;
    font-style: normal;
}