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")