compass General 常用api学习[Sass和compass学习笔记]

简介: compass 中一些常用api 包括一些浏览器hack @import "compass/utilities/general" Clearfix Clearfix 是用来清除浮动 float 造成的内容问题,以前用clear 方法可以解决,通过查看Clearfix 的源码发现对与高版本的浏览...

compass 中一些常用api 包括一些浏览器hack

@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的hack

has-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($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()
}

才知道是这个效果

image

test
相关文章
|
5月前
|
存储 缓存 网络协议
dpdk课程学习之练习笔记二(arp, udp协议api测试)
dpdk课程学习之练习笔记二(arp, udp协议api测试)
160 0
|
JavaScript
Vue基础学习——Vue3的Options-API
Vue基础学习——Vue3的Options-API
127 0
|
2月前
|
人工智能 监控 安全
F5社区学习笔记:API和AI如何改变应用安全?
F5社区学习笔记:API和AI如何改变应用安全?
32 1
|
2月前
|
jenkins API 持续交付
jenkins学习笔记之十五:SonarSQube API使用
jenkins学习笔记之十五:SonarSQube API使用
|
5月前
|
Kubernetes 安全 API
Kubernetes学习-集群搭建篇(三) Node配置完善和API概述
Kubernetes学习-集群搭建篇(三) Node配置完善和API概述
Kubernetes学习-集群搭建篇(三) Node配置完善和API概述
|
3月前
|
存储 API Go
学习gin-vue-admin之创建api和swagger
学习gin-vue-admin之创建api和swagger
|
3月前
|
JavaScript 前端开发 Java
|
5月前
|
存储 Java API
【JAVA学习之路 | 提高篇】[内部类与常见API]String类
【JAVA学习之路 | 提高篇】[内部类与常见API]String类
|
5月前
|
存储 安全 机器人
【LLM】智能学生顾问构建技术学习(Lyrz SDK + OpenAI API )
【5月更文挑战第13天】智能学生顾问构建技术学习(Lyrz SDK + OpenAI API )
94 1
|
5月前
|
XML API 数据格式
【Qt 学习笔记】QWidget的enable属性 | API的介绍
【Qt 学习笔记】QWidget的enable属性 | API的介绍
142 0