compass-bug

手册网址：http://compass-style.org/reference/compass/

box-sizing

设置盒子宽度包括不包括内边距和边框
content-box：不包括
border-box：包括

//盒子阴影，单个默认盒子阴影设置
$default-box-shadow-h-offset: 2px; //失效
$default-box-shadow-v-offset: 2px; //(横向距离)
$default-box-shadow-blur: 2px;//(纵向偏移)
$default-box-shadow-spread: 5px;//模糊距离
$default-box-shadow-inset: insert;

 @include single-box-shadow;

//弹性盒子，E11以下，兼容性不好，手机可以使用弹性盒子
#vertical-center {
  padding: 0;
  li {
    background: #CCC;
    width: 15em;
    margin: .5em;
    height: 5em;
    text-align: center;
    vertical-align: text-top;
    display: inline-block; /* non-flexbox browsers */

    @include display-flex(inline-flex);
    @include align-items(center);
    @include justify-content(center);
  }
}

#flexible {
  padding: 0;
  text-align: center;
  @include display-flex;
  @include flex-wrap(wrap); //是否折行，反向

  li {
    background: #CCC;
    min-width: 12em;
    margin: .5em;
    padding: .5em;
    display: inline-block; /* non-flexbox browsers */
    @include flex(1 0);
  }
}

#reorder {
  $flex-legacy-enabled: true;
  width: 100%; /* fix for old Firefox */
  @include display-flex;
  @include flex-direction(column);

  li:nth-child(even) {
    background: #CCC;
    @include order(1);
  }
  $flex-legacy-enabled: false;
}

#layout {
  @include display-flex;
  @include flex-wrap(wrap);

  header, footer {
    @include flex(1 0 100%);
  }

  header {
    background: lighten(yellow, 40%);
  }

  nav {
    $flex-legacy-enabled: true;
    ul {
      padding: 0;
      margin: -.5em;
      min-width: 100%; /* fix for old Firefox */
      @include display-flex(flex);
    }

    li {
      background: #CCC;
      margin: .5em;
      display: inline-block; /* non-flexbox browsers */
      @include flex(1 1 30%);
    }
    $flex-legacy-enabled: false;
  }

  article {
    @include flex(2 1 30em);
  }

  aside {
    flex: 1 0 15em;
    background: lighten(blue, 40%);
  }

  footer {
    background: lighten(green, 50%);
  }
}

//字体mixins
@include font-face("dali", font-files("font266/dali.woff", "font266/dali.ttf","font266/dali.svg"),"font266/dali.eot",normal,normal);

//径向将变
@include background-image(radial-gradient(160px 20px, cyan 500px, dodgerblue 800px));
//线性渐变
@include background-image(linear-gradient(to top left, white, #dddddd));
//线性渐变多一种颜色更圆滑
@include background-image(linear-gradient( white, #aaaaaa));
 @include background-image(linear-gradient(white, #cccccc 30%, #bbbbbb 70%, #aaaaaa));
 //角度渐变
 @include background-image(linear-gradient(120deg, #2ac363, #cd8c14, #9c4cc2));
 //试了一下，没啥作用
     @include inline-block;

 //透明度
 @include opacity(1);

//调整颜色
background: lighten(blue, 40%);

//文字阴影
$default-text-shadow-color: #82aa44;
$default-text-shadow-h-offset: 1px;
$default-text-shadow-v-offset: 2px;
$default-text-shadow-blur: 1px;
$default-text-shadow-spread: false;

 @include single-text-shadow;
 @include text-shadow(rgba(blue, 0.2) 1px 1px 0, rgba(blue, 0.2) 2px 2px 0, rgba(blue, 0.2) 3px 3px 0);

//设置transform-origin参数，z轴的确定只能是像素值。
$default-origin-x: 0;  //
$default-origin-y: 50%; //默认最后一个
$default-origin-z: 50%;

@include apply-origin( 20%, true );//设置一个参数
@include transform-origin(50% 50%);//默认两个，也可以是三个参数

//transition
@include transition(all 1s);

//placeholder  
@include input-placeholder {
    color: #bfbfbf;
    font-style: italic;
  }

//reset utilities模块
可以统一reset，也可以分开reset。


//@import "compass/utilities";
//设置文字可读性,背景颜色

$contrasted-dark-default: black;
$contrasted-light-default: white;

@include contrasted(#060cff);

//清除浮动
clearfix

//表格工具，加线
$contrasted-dark-default: black;
$contrasted-light-default: white;

@include inner-table-borders(1px, #7a98c6);
@include outer-table-borders(10px, #123456);

//表头变粗，数字向右对齐
@include table-scaffolding;

@import "compass/typography"
//hover-link
//鼠标悬停出现下划线
a{
  @include hover-link;
}
//一次指定链接所有状态的颜色
link-colors($normal, $hover, $active, $visited, $focus)
//使链接样式与普通文本无异样
 @include unstyled-link;