Compass General Utilities学习笔记

Published on:
Tags: CSS, Compass, Compass Utilities, Web

Hacks

  • Configurable Variables $default-has-layout-approach zoom # default has layout property, another is ‘block’

  • Mixins

    • has-layout($approach) # “hasLayout” property in internet explorer @if $legacy-support-for-ie {

        @if $approach == zoom {
    @include has-layout-zoom;
  } @else if $approach == block {
    @include has-layout-block;
  } @else {
    @warn "Unknown has-layout approach: #{$approach}";
    @include has-layout-zoom;
  }
}
      @mixin has-layout-zoom { 
      @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
  *zoom: 1;
}

      }

      @mixin has-layout-block {

      @if $legacy-support-for-ie {
  // This makes ie6 get layout
  display: inline-block;
  // and this puts it back to block
  & { display: block; }
}

      }

      what is has-layout in IE sample: @include has-layout;

                =>
      { 
        *zoom: 1;

      }

    • bang-hack($property, $value, $ie6-value) @if $legacy-support-for-ie6 {

        #{$property}: #{$value} !important;
  #{$property}: #{$ie6-value};

      }

      “bang-hack” just for resolve IE6 min-width/min-height problem sample: @include bang-hack(width, auto, 100px);

                 =>
      { 
        width: auto !important;
  width: 100px;

      }

Comments

Compass Helpers学习笔记

Published on:
Tags: CSS, Compass

opposite-position($position)

opposite-position(left)         => right
opposite-position(top)          => bottom
opposite-position(center)       => center
opposite-position(top left)     => bottom right
opposite-position(center right) => center left
Comments

Compass学习笔记

Published on:
Tags: CSS, Compass

Compass CSS3

Border Radius

Configurable Variables
* $default-border-radius 5px
Mixins
* border-radius($radius, $vertical-radius)
* border-corner-radius($vert, $horz, $radius)
* border-top-left-radius($radius)
* border-top-right-radius($radius)
* border-bottom-left-radius($radius)
* and so on...

Text Shadow

Configurable Variables
* $default-text-shadow-color #aaaaaa
* $default-text-shadow-h-offset 0px
* $default-text-shadow-v-offset 0px
* $default-text-shadow-blur 1px
* $default-text-shadow-spread false
Mixins
* text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
* single-text-shadow($hoff, $voff, $blur, $spread, $color)
Comments