---
tags: CSS
---
# [Compass](http://compass-style.org/reference/compass/css3/)

Sass 的框架，有許多預寫好的 mixin 可使用，可編譯出所有的前綴瀏覽器支援。

- `@import "compass/css3"` 來使用

## Div

div {
  @include border-radius(50px);
  @include opacity(0.2);
  @include box-shadow(3px 3px 5px #000);
}

div {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;

  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;

  -webkit-box-shadow: 3px 3px 5px black;
  -moz-box-shadow: 3px 3px 5px black;
  box-shadow: 3px 3px 5px black;
}

## Image

/* 自動計算該圖片的高與寬 ＊/
@debug image-width("../image.png");  /* 100px */
@debug image-height("../image.png"); /* 200px */

## CSS Sprite

網路上有許多線上圖片合併服務，但有修改時又要重新調整十分麻煩。

$icon-spacing: 10px;  /* optional */
$icon-layout: horizontal;  /* optional */
@import "icon/*.png";
@include all-icon-sprites;

images 資料夾內就會出現合併過後的圖片了。