zoukankan      html  css  js  c++  java
  • compass General 常用api学习[Sass和compass学习笔记]

    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

  • 相关阅读:
    css布局
    css笔记
    css笔记
    css笔记
    HttpServletResponse简单理解
    SpringCloud Zuul网关的简单理解
    SpringCloud Zuul网关超时
    notepad++实用技巧
    Json常用代码
    含有Date属性的对象转化为Json
  • 原文地址:https://www.cnblogs.com/qqloving/p/3773557.html
Copyright © 2011-2022 走看看