compass General 常用api学习[Sass和compass学习笔记]
2014-06-06 20:03
1171 查看
compass 中一些常用api 包括一些浏览器hack
@import "compass/utilities/general"
用overflow 就可以了
而对于低版本的浏览器 例如ie6 还是需要clear的
compass 提供了api pie-clearfix 来解决这个问题
调用 api 即可
float($side)
has-layout($approach) 参数为 zoom 或 block
bang-hack($property, $value, $ie6-value) 这个是写给ie6css 属性的快捷方式
@import "compass/utilities/general/reset"
我试了试
才知道是这个效果
![](https://oscdn.geek-share.com/Uploads/Images/Content/202001/27/9170be0b3c3af411e55ead4b5dc32781.png)
@import "compass/utilities/general"
Clearfix
Clearfix 是用来清除浮动 float 造成的内容问题,以前用clear 方法可以解决,通过查看Clearfix 的源码发现对与高版本的浏览器其实已经可以不用了@mixin clearfix { overflow: hidden; @include has-layout; }
用overflow 就可以了
而对于低版本的浏览器 例如ie6 还是需要clear的
compass 提供了api pie-clearfix 来解决这个问题
@mixin pie-clearfix { &:after { content: ""; display: table; clear: both; } @include has-layout; }
Float
float 提供 相关的hack 例如ie下双倍浮动间距问题调用 api 即可
float($side)
Hacks
这里准备了一些常用的准对浏览器的bug的hackhas-layout($approach) 参数为 zoom 或 block
bang-hack($property, $value, $ie6-value) 这个是写给ie6css 属性的快捷方式
@mixin bang-hack($property, $value, $ie6-value) { @if $legacy-support-for-ie6 { #{$property}: #{$value} !important; #{$property}: #{$ie6-value}; } }
Minimum
这里准备了最小宽度和最小高度min-height(
$value
)min-width([code]$value
)
有很多人可能对span div 设置min-width 不起作用 设置 display: inline-block; 后即可
Reset
重置浏览器默认样式@import "compass/utilities/general/reset"
Tag Cloud
这个坑爹的名字 根本就不知道干啥的我试了试
<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>
.mycloudtag{ @include tag-cloud() }
才知道是这个效果
![](https://oscdn.geek-share.com/Uploads/Images/Content/202001/27/9170be0b3c3af411e55ead4b5dc32781.png)
相关文章推荐
- compass typography 排版 常用排版方法[Sass和compass学习笔记]
- 学习Sass 的基本语法规则[Sass和compass学习笔记]
- SASS+COMPASS 自适应 学习笔记
- Java基础班学习笔记(11)API常用类(二)
- 黑马学习笔记_常用API总结(三)
- Drools5学习笔记1-最常用API
- 黑马学习笔记_常用API总结(二)
- Activiti学习笔记5 — 常用API解析
- 黑马程序员--Java基础学习笔记【正则表达式、常用API】
- java学习笔记——API中的常用类和StringBuffer
- Sass学习笔记 -- 在Windows系统中安装Sass和Compass
- compass color 颜色 对比色[Sass和compass学习笔记]
- Java学习笔记之常用API学习笔记2
- compass reset和layout [Sass和compass学习笔记]
- Sass&Compass学习笔记(一)
- pthread学习笔记(二)--pthread常用API及简单介绍
- compass tables 表格 表格常见样式[Sass和compass学习笔记]
- IOS 学习笔记 2015-03-24 OC-API-常用结构体
- Java学习笔记之常用API学习笔记1
- sass和compass学习笔记2(compass)