sass

//sass style
//-------------------------------
$fontSize: 12px !default;
body{
    font-size:$fontSize;
}
//css style
//-------------------------------
body{
    font-size:12px;
}

$baseLineHeight:        2;
$baseLineHeight:        1.5 !default;

$borderDirection:       top !default; 
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;
//应用于class和属性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}

//一维数据
$px: 5px 10px 20px 30px;
//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);

length($list)
Returns the length of a list.
nth($list, $n)
Returns a specific item in a list.
set-nth($list, $n, $value)
Replaces the nth item in a list.
join($list1, $list2, [$separator])
Joins together two lists into one.
append($list1, $val, [$separator])
Appends a single value onto the end of a list.
zip($lists…)
Combines several lists into a single multidimensional list.
index($list, $value)
Returns the position of a value within a list.
list-separator(#list)
Returns the separator of a list.

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

//sass style
//-------------------------------
$fontSize:      12px;
$color:         #333;
body{
    $fontSize: 14px;        
    $color：   #fff !global;
    font-size:$fontSize;
    color:$color;
}
p{
    font-size:$fontSize;
    color:$color;
}
//css style
//-------------------------------
body{
    font-size:14px;
    color:#fff;
}
p{
    font-size:12px;
    color:#fff;
}

//sass style
//-------------------------------
.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}
//css style
//-------------------------------
.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc; 
}

//sass style
//-------------------------------
//没有跳出
.parent-1 {
  color:#f00;
  .child {
    width:100px;
  }
}
//单个选择器跳出
.parent-2 {
  color:#f00;
  @at-root .child {
    width:200px;
  }
}
//多个选择器跳出
.parent-3 {
  background:#f00;
  @at-root {
    .child1 {
      width:300px;
    }
    .child2 {
      width:400px;
    }
  }
}
//css style
//-------------------------------
.parent-1 {
  color: #f00;
}
.parent-1 .child {
  width: 100px;
}
.parent-2 {
  color: #f00;
}
.child {
  width: 200px;
}
.parent-3 {
  background: #f00;
}
.child1 {
  width: 300px;
}
.child2 {
  width: 400px;
}

//sass style
//-------------------------------
//跳出父级元素嵌套
@media print {
    .parent1{
      color:#f00;
      @at-root .child1 {
        width:200px;
      }
    }
}
//跳出media嵌套，父级有效
@media print {
  .parent2{
    color:#f00;
    @at-root (without: media) {
      .child2 {
        width:200px;
      } 
    }
  }
}
//跳出media和父级
@media print {
  .parent3{
    color:#f00;
    @at-root (without: all) {
      .child3 {
        width:200px;
      } 
    }
  }
}
//sass style
//-------------------------------
@media print {
  .parent1 {
    color: #f00;
  }
  .child1 {
    width: 200px;
  }
}
@media print {
  .parent2 {
    color: #f00;
  }
}
.parent2 .child2 {
  width: 200px;
}
@media print {
  .parent3 {
    color: #f00;
  }
}
.child3 {
  width: 200px;
}

@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}
//css style
//-------------------------------
.opacity{
  @include opacity; //参数使用默认值
}
.opacity-80{
  @include opacity(80); //传递参数
}

//box-shadow可以有多组值，所以在变量参数后面添加...
@mixin box-shadow($shadow...) {
  -webkit-box-shadow:$shadow;
  box-shadow:$shadow;
}
.box{
  border:1px solid #ccc;
  @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}
//css style
//-------------------------------
.box{
  border:1px solid #ccc;
  -webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
  box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
}

@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}
@include max-screen(480px) {
  body { color: red }
}
//css style
//-------------------------------
@media only screen and (max-width: 480px) {
  body { color: red }
}                     

h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}
//css style
//-------------------------------
h1,.speaker{
  border: 4px solid #ff9aa9;
}
.speaker{
  border-width: 2px;
}

%ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
%clearfix{
  @if $lte7 {
    *zoom: 1;
  }
  &:before,
  &:after {
    content: "";
    display: table;
    font: 0/0 a;
  }
  &:after {
    clear: both;
  }
}
#header{
  h1{
    @extend %ir;
    width:300px;
  }
}
.ir{
  @extend %ir;
}
//css style
//-------------------------------
#header h1,
.ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
#header h1{
  width:300px;
}

$baseFontSize:      10px !default;
$gray:              #ccc !defualt;        
// pixels to rems 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}
body{
  font-size:$baseFontSize;
  color:lighten($gray,10%);
}
.test{
  font-size:pxToRem(16px);
  color:darken($gray,10%);
}
//css style
//-------------------------------
body{
  font-size:10px;
  color:#E6E6E6;
}
.test{
  font-size:1.6rem;
  color:#B3B3B3;
}

$baseFontSize:          14px !default;
$baseLineHeight:        1.5 !default;
$baseGap:               $baseFontSize * $baseLineHeight !default;
$halfBaseGap:           $baseGap / 2  !default;
$samllFontSize:         $baseFontSize - 2px  !default;
//grid 
$_columns:                     12 !default;      // Total number of columns
$_column-width:                60px !default;   // Width of a single column
$_gutter:                      20px !default;     // Width of the gutter
$_gridsystem-width:            $_columns * ($_column-width + $_gutter); //grid system width

$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
//css style
//-------------------------------
.ib{
    display:inline-block;
    *display:inline;
    *zoom:1;
}
p {
  color: green; 
}

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
//css style
//-------------------------------
.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
}
.item-3 {
  width: 6em; 
}

$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url(‘/images/#{$animal}.png‘);
  }
}
//css style
//-------------------------------
.puma-icon {
  background-image: url(‘/images/puma.png‘); 
}
.sea-slug-icon {
  background-image: url(‘/images/sea-slug.png‘); 
}
.egret-icon {
  background-image: url(‘/images/egret.png‘); 
}
.salamander-icon {
  background-image: url(‘/images/salamander.png‘); 
}

$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url(‘/images/#{$animal}.png‘);
    border: 2px solid $color;
    cursor: $cursor;
  }
}
//css style
//-------------------------------
.puma-icon {
  background-image: url(‘/images/puma.png‘);
  border: 2px solid black;
  cursor: default; 
}
.sea-slug-icon {
  background-image: url(‘/images/sea-slug.png‘);
  border: 2px solid blue;
  cursor: pointer; 
}
.egret-icon {
  background-image: url(‘/images/egret.png‘);
  border: 2px solid white;
  cursor: move; 
}

$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}
//css style
//-------------------------------
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}