Compass排版模块

1. 超链接样式

1.1 导航链接

• 为链接配色

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

index.html

    
首页
    
文章
    
标签
    
关于我

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

学习Compass请来Compass官网

main.scss

@import "compass/typography";

p.content a {
    @include unstyled-link
}

2. 列表样式

2.1 pretty-bullet装点列表

pretty-bullet混合器

index.html

    
首页
    
文章
    
标签
    
关于我

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

    
首页
    
文章
    
标签
    
关于我

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

    
PS切图
    
HTML
    
CSS
    
JavaScript

是Web工程师的基础必备技能。

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