Try   HackMD

Compass

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 資料夾內就會出現合併過後的圖片了。