Compass排版模块

1. 超链接样式

1.1 导航链接

• 为链接配色

link-colors(a, :hover, :active, :visited, :focus)混合器

index.html

<ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">文章</a></li>
    <li><a href="#">标签</a></li>
    <li><a href="#">关于我</a></li>
</ul>

main.scss

@import "compass/typography";

a {
    @include link-colors(
        #333,
        $hover: #a00,
        $active: #a52,
        $visited: #555,
        $focus: #a52
    );
}

• hover-link设置悬停样式

hover-link混合器

main.scss

@import "compass/typography";

a {
    @include link-colors(
        #333,
        $hover: #a00,
        $active: #a52,
        $visited: #555,
        $focus: #a52
    );
    @include hover-link
}

1.2 文本中的链接

通过unstyled-link混合器设置隐性链接

index.html

<p class="content">学习Compass请来<a href="http://compass-style.org/">Compass官网</a></p>

main.scss

@import "compass/typography";

p.content a {
    @include unstyled-link
}

2. 列表样式

2.1 pretty-bullet装点列表

pretty-bullet混合器

index.html

<ul class="features">
    <li><a href="#">首页</a></li>
    <li><a href="#">文章</a></li>
    <li><a href="#">标签</a></li>
    <li><a href="#">关于我</a></li>
</ul>

main.scss

@import "compass/typography";

ul.features {
    @include pretty-bullets('pretty-bullet.png',
                    $padding: 20px,
                    $line-height: 22px
                )
}

如图：

2.2 去掉项目符号

no-bullet混合器
no-bullets混合器

index.html

<ul class="no-bullet">
    <li><a href="#">首页</a></li>
    <li><a href="#">文章</a></li>
    <li><a href="#">标签</a></li>
    <li><a href="#">关于我</a></li>
</ul>

main.scss

@import "compass/typography";

ul.no-bullet {
    @include no-bullets
}

2.3 横向排列

horizontal-list混合器，有两个参数$padding $direction.例如 horizontal-list(7px, right)

main.scss

@import "compass/typography";

ul.nav {
    @include horizontal-list
}

2.4 内联列表

delimited-list混合器 可以定制列表分隔符，比如dellimited-list("!")

index.html

<ul class="container">
    <li>PS切图</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<p>是Web工程师的基础必备技能。</p>

main.scss

@import "compass/typography";

ul.container {
    @include delimited-list("!")
}

效果如图

3. 文字/文本处理

3.1 省略号代表截断内容

ellipsis混合器

@include ellipsis

3.2 nowrap防止文本折行

nowrap混合器

@include nowrap

3.3 replace-text将图片转换为文字

replace-text混合器 replace-text-with-dimensions混合器(根据图片的宽高设定元素尺寸)

@include replace-text-with-dimensions("logo.png")