Derin Compass

13 Jan 2014

Compass ‘ın kendi gölgesinde kalmıs özellikleri.

Image Dimension

Image dosyasının width ve height degerlerini compass a okutmak mumkun.

Örneğin;

.graphic-div
  width: image-width (image.png)
  height: image-height (image.png)
  background-image: image_url (image.png)

Ayrıntılı bilgi için buraya tıklayınız.

Experimental

İstenmeyen browser prefix lerini css de gizlemek icin kullanılabilir.

=box-sizing($box-size)
  $box-size: unquote($box-size)
  @include experimental(box-sizing, $box-size, -moz, -webkit, not -o, not -ms)

css output:

.box-div {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

Ayrıntılı bilgi için buraya tıklayınız.

Sprite Dimensions

Sprite image set olusturmak icin kullanılır.

$icons: sprite-map('icons/*.png')
i
  +inline-block
  background: $icons

@each $icon in sprite_names($icons)
  .icn-#{$icon}
    +sprite-dimensions($icons, $icon)
    background-position: sprite-position($icons, $icon)
    background-size: image-width(sprite-path($icons)) auto

Ayrıntılı bilgi için buraya tıklayınız.