开发者社区> 互联网fans> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云 ESC7天实践训练营入门班 Class 5 学习笔记
今天学习的是如何安装ESC服务器的宝塔面板
433 0
阿里云 ESC7天实践训练营入门班 Class 3 学习笔记
本节课学会了如何简单的使用ESC服务器
191 0
css使用笔记
最近写一个前台页面,因为不用考虑太多兼容性问题,尝试了很多css3的东西,记录下。 1、渐变和边框阴影 最初的视觉稿,上面有很多地方颜色使用了渐变,为了不使用图片,用了很挫的方式来实现:从图片渐变开始、中间、结束部分,用gimp的吸管获取颜色,然后转换成css的渐变。不过因为渐变每个浏览器支持方
1406 0
compass reset和layout [Sass和compass学习笔记]
reset 可以重置浏览器的的html的默认样式,因为各个浏览器对有些元素解析差别很大 通过重置样式可以让样式的浏览器兼容 更简单 使用方法简单 @import "compass/reset" layout 有几个常见的布局函数,我觉得挺管用,其他的都是用来写组建非常常用的 Sticky Footer 该模块提供了需要布置你的页脚,它坚持到页面底部的工具。
871 0
css学习笔记
css学习   CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。 1.基本语法规范 分析一个典型CSS的语句: p {COLOR:#FF0000;BACKGROUND:#FFFFFF} ? 其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; ? 样式声明写在一对大括号"{}"中; ? COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; ? "#FF0000"和"#FFFFFF"是属性的值(value)。
750 0
+关注
互联网fans
迷失在大前端海洋中的孩子
172
文章
29
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载