-
Notifications
You must be signed in to change notification settings - Fork 4
typography
前端小尚 edited this page Mar 2, 2015
·
1 revision
文字排版相关功能。
##$font-family() 调用预设样式设定文字的字体组。
div{
$font-family(code);
}
/*编译后*/
div {
font-family: Monaco, Consolas, monospace;
*font-family: Monaco, Consolas, monospace;
}
##ellipsis() 省略号样式，当文字超过容器宽度时，超出部分文字隐藏并显示省略号。 传入数字参数，代表限定最多显示的行数，超出部分隐藏并显示省略号。(ps:只在 WebKit 内核浏览器下有效。)
div{
width: 120px;
$ellipsis();
}
/*编译后*/
div {
width: 120px;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
}
##$force-wrap() 阻止长字符串（例如url或无意义连续英文字符）打破布局。
div{
$force-wrap();
}
/*编译后*/
div {
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: -moz-pre-wrap;
white-space: -hp-pre-wrap;
word-wrap: break-word;
}
##$hide-text()
用于隐藏元素内文字，一般在文字隐藏之后使用背景图片替代显示。如果使用此 mixin 的元素是 inline-block 元素，请确保为其设置宽度。
div{
$hide-text();
}
/*编译后*/
div {
text-indent: -9999px;
overflow: hidden;
text-align: left;
}
##$invisible() 用于隐藏整个元素，一般处理那些仅仅用于增加可访问性的文字或元素。
div{
$invisible();
}
/*编译后*/
div {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
*clip: rect(1px 1px 1px 1px);
}
##font-size-rem()
用于将 px 单位的字体大小转换为 rem 单位。依赖于 $default-font-size，请确保 <HTML> 标签的字体大小与 default-font-size 一致。
div{
$font-size-rem(32px);
}
/*编译后*/
div {
font-size: 32px;
font-size: 2rem;
}
##$font-face() 用来方便地使用 @font-face 定义 web 字体。
div{
$font-face('FamilyName', '/some/font/url');
}
/*编译后*/
div {
font-family: 'FamilyName';
src: url("/some/font/url.eot");
src: url("/some/font/url.eot?#iefix") format("embedded-opentype"), url("/some/font/url.woff") format('woff'), url("/some/font/url.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
##$hover-link() 用于实现链接默认无下划线，hover后有下划线的样式。
div{
$hover-link();
}
/*编译后*/
div {
text-decoration: none;
}
div:hover {
text-decoration: underline;
}
##$unstyled-link() 用于将链接变成默认的文字样式。
div{
$unstyled-link();
}
/*编译后*/
div {
color: inherit;
text-decoration: inherit;
cursor: inherit;
}
div:active,
div:focus {
outline: none;
}
##$centered-line() 用于设置单行文本垂直居中。
div{
$centered-line(24px);
}
/*编译后*/
div {
height: 24px;
line-height: 24px;
}