按全局设定输出字体族设定。
<h3 class="est-heading">The Game of Thrones</h3>
<div class="est-text">When you play the game of thrones, you win or you die. There is no middle ground.</div>
<h3 class="est-heading">权力的游戏</h3>
<div class="est-text">你玩权利的游戏，结局要么赢、要么死。没有其他选择。</div>
<div class="est-code">alert('Hello world.');</div>
省略号样式，当文字超过容器宽度时，超出部分文字隐藏并显示省略号。提供单行省略号和多行省略号（只支持webkit内核）两种mixin。
<div class="est-ellipsis-3">
<div class="est-ellipsis">我在人民广场吃着炸鸡腿。</div>
那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子。我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说：“事已如此，不必难过，好在天无绝人之路！”
</div>
<style>
.est-ellipsis {
width: 50px;
.ellipsis();
background-color: #fee9cc;
}
.est-ellipsis-3 {
width: 300px;
.ellipsis(3);
}
</style>
用于阻止长字符串（例如url或无意义连续英文字符）打破布局
<div class="est-force-wrap">世界上最长的人名：Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</div>
<div>世界上最长的人名：Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</div>
<style>
.est-force-wrap {
.force-wrap();
background-color: #fee9cc;
}
</style>
`ide-text`是用于隐藏文字的mixin，一般在文字隐藏之后使用图片或其他方式替代显示。`invisible`则用于隐藏整个元素，一般处理那些仅仅用于增加可访问性的文字或元素。
<div>隐藏链接地址（inline-block）：<a href="#" class="est-hide-text">http://www.baidu.com</a></div>
<div>隐藏一段文字（block）：<div class="est-hide-text2">到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；”</div></div>
<div>隐藏整个元素：<a href="#" class="est-invisible">http://www.baidu.com</a></div>
<style>
.est-hide-text {
.hide-text();
.inline-block();
background-color: #fee9cc;
width: 100px; <!-- 如果是inline-block，则必须要加宽度 -->
}
.est-hide-text2 {
.hide-text();
display: block;
background-color: #fee9cc;
}
.est-hide-text:hover,
.est-hide-text2:hover {
text-indent: 0;
overflow: visible;
}
.est-invisible {
.invisible();
}
</style>
用图片替换文字，通常用作icon的样式。同时提供了一个简写`.ir`
<div class="est-img-replace">http://www.baidu.com</div>
<style>
.est-img-replace {
.inline-block();
.img-replace('http://www.baidu.com/img/bdlogo.gif', -106px, -30px);
width: 55px;
height: 60px;
}
</style>
`font-size-rem`与`font-size-em`用于辅助计算字体的em和rem值。他们都依赖于配置项`@default-font-size`，请确保`HTML`标签的字体大小与`@default-font-size`一致。他们输入的参数都是以像素为单位（可以不加任何单位）。
`.font-face`提供了一种更方便的书写font-face样式。
<div class="est-font-size-em">
http://www.baidu.com
<div class="est-font-size-rem">http://www.baidu.com</div>
</div>
<style>
.est-font-size-em {
.font-size-em(32px);
<!-- .font-size-em(32, 14); 参数2表示上下文的字体大小(px)，可以不加，默认为@default-font-size -->
}
.est-font-size-rem {
.font-size-rem(32); <!-- 参数可以不加单位 -->
}
.font-face('family-name', 'http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd');
</style>
`hover-link`用于实现链接默认无下划线，hover后有下划线的样式。`unstyled-link`用于将链接变成默认的文字样式。
<a href="#" class="est-hover-link">http://www.baidu.com</a>
<br/>
<a href="#" class="est-unstyled-link">http://www.baidu.com</a>
<style>
.est-hover-link {
.hover-link();
}
.est-unstyled-link {
.unstyled-link();
}
</style>
.body {
// 基础高度(px) = 行高 / 2 = 16px * 2 / 2 = 16px;
.rhythm(16px, 2); // 1*2 = 2
.foo {
// 辅助的mixin:
// 设置行高为 n*2*基础高度
.rhythm-line-height(); // 1*2 = 2
.rhythm-line-height(1); // 1*2 = 2
.rhythm-line-height(2); // 2*2 = 4
// 设置margin为 n*基础高度
.rhythm-margin(); // 上下margin都为 1*基础高度
.rhythm-margin(1); // 上下margin都为 1*基础高度
.rhythm-margin-top(); // 上margin都为 1*基础高度
.rhythm-margin-top(2); // 上margin都为 2*基础高度
.rhythm-margin-bottom(); // 下margin都为 1*基础高度
.rhythm-margin-bottom(2); // 下margin都为 2*基础高度
// 设置padding为 n*基础高度
.rhythm-padding(); // 上下padding都为 1*基础高度
.rhythm-padding(2); // 上下padding都为 2*基础高度
.rhythm-padding-top(); // 上padding都为 1*基础高度
.rhythm-padding-top(2); // 上padding都为 2*基础高度
.rhythm-padding-bottom(); // 下padding都为 1*基础高度
.rhythm-padding-bottom(2); // 下padding都为 2*基础高度
// 设置padding同时设置border
.rhythm-padding(2, 1px solid #CCC); // 上下padding都为 2*基础高度-1 , 上下border宽度为 1
.rhythm-padding-top(2, 4px solid #CCC); // 上padding都为 2*基础高度-4 , 上border宽度为 4
.rhythm-padding-bottom(2, 4px solid #CCC); // 下padding都为 2*基础高度-4 , 下border宽度为 4
.rhythm-padding(2, 1px); // 第二个值只写一部分，但是一定要先写宽度
}
}
而在排版中，若每個區塊間的距離符合固定比例，那麼這段文章看起來就會很有韻律感，版面整齊、好看以外，更增加了可閱讀性，讓讀者更願意花長時間閱讀。祕訣就在以「基本行距」為單位決定版面上各區塊的距離。
<div class="est-drop-cap-context">
<div class="est-drop-cap">
<a href="#">百度</a>（Nasdaq简称：BIDU）是全球最大的中文搜索引擎，2000年1月由李彦宏、徐勇两人创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。
</div>
<div class="est-drop-cap-2">
1999年底，身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨大发展潜力，抱着技术改变世界的梦想，他毅然辞掉硅谷的高薪工作，携搜索引擎专利技术，于2000年1月1日在中关村创建了百度公司。从最初的不足10人发展至今，员工人数超过18000人。如今的百度，已成为中国最受欢迎、影响力最大的中文网站。
</div>
<div>
<span class="est-drop-cap-inline">百度拥有数千名研发工程师</span>，这是中国乃至全球最为优秀的技术团队，这支队伍掌握着世界上最为先进的搜索引擎技术，使百度成为中国掌握世界尖端科学核心技术的中国高科技企业，也使中国成为美国、俄罗斯、和韩国之外，全球仅有的4个拥有搜索引擎核心技术的国家之一。
</div>
</div>
<style>
.est-drop-cap-context {
font-size: 1em;
line-height: 24px;
}
.est-drop-cap {
.drop-cap(24px); // 上下文行高为24px，首字下沉2行，右外边距为1em（相对于普通文字大小）
}
.est-drop-cap-2 {
.drop-cap(24px, 3, 10px); // 首字下沉3行，右外边距为10px
}
.est-drop-cap-inline {
.drop-cap-inline(24px, 2);
}
</style>