标签：style class blog code http color
compass 中一些常用api 包括一些浏览器hack
@import "compass/utilities/general"
Clearfix 是用来清除浮动 float 造成的内容问题,以前用clear 方法可以解决,通过查看Clearfix 的源码发现对与高版本的浏览器其实已经可以不用了
|
1
2
3
4 |
@mixin clearfix { overflow: hidden; @include has-layout;} |
用overflow 就可以了
而对于低版本的浏览器 例如ie6 还是需要clear的
compass 提供了api pie-clearfix 来解决这个问题
|
1
2
3
4
5
6
7
8 |
@mixin pie-clearfix { &:after { content: ""; display: table; clear: both; } @include has-layout;} |
float 提供 相关的hack 例如ie下双倍浮动间距问题
调用 api 即可
这里准备了一些常用的准对浏览器的bug的hack
has-layout($approach) 参数为 zoom 或 block
bang-hack($property, $value, $ie6-value) 这个是写给ie6css 属性的快捷方式
|
1
2
3
4
5
6 |
@mixin bang-hack($property, $value, $ie6-value) { @if
$legacy-support-for-ie6 { #{$property}: #{$value} !important; #{$property}: #{$ie6-value}; }} |
这里准备了最小宽度和最小高度
min-height($value)
min-width($value)
有很多人可能对span div 设置min-width 不起作用 设置 display: inline-block;
后即可
重置浏览器默认样式
@import "compass/utilities/general/reset"
这个坑爹的名字 根本就不知道干啥的
我试了试
|
1
2
3
4
5
6
7
8 |
<div class="mycloudtag"> <span class="xxs">1</span> <span class="xs">2</span> <span class="s">3</span> <span class="l">4</span> <span class="xl">5</span> <span class="xxl">6</span></div> |
|
1
2
3 |
.mycloudtag{ @include tag-cloud()} |
才知道是这个效果
compass General 常用api学习[Sass和compass学习笔记],布布扣,bubuko.com
compass General 常用api学习[Sass和compass学习笔记]
标签：style class blog code http color
原文地址：http://www.cnblogs.com/qqloving/p/3773557.html
