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混合器
ellipsis
3.2 nowrap防止文本折行
nowrap混合器
nowrap
3.3 replace-text将图片转换为文字
replace-text混合器 replace-text-with-dimensions混合器(根据图片的宽高设定元素尺寸)
replace-text-with-dimensions("logo.png")