sass build in function

Function module
http://sass-lang.com/documentation/Sass/Script/Functions.html

lighten, darken

$brandColor: red;

#main {
  width: 90%;
  p {
    color: lighten($brandColor, 30%);
    font-size: $baseFontSize;    
  }
}

if文

$debugMode: true;

#main {
  @if $debugMode == true {
    color: red;
  } @else {
    color: green;
  }
}

for文

@for $i from 10 through 14 {
  .fs#{i} { font-size:#{$i}px; }
}

while文

$i: 10;
@while $i <= 14 {
  .fs#{i} { font-size:#{i}px; }
  $i: $i + 1;
}

リスト

$animals: cat, dog, tiger;

@each $animal in $animals {
  .#{$animal}-icon {background: url("#{$animal}-.png");}
}

関数

$totalWidth: 940px;
$columnCount: 5;
@function getColumnWidth($width, $count){
  $padding: 10px;
  $columnWidth: floor(($width - ($padding * ($count - 1)) / $count));
  @debug: $columnWidth;
  @return $columnWidth;
}

.grid {
  float: left;
  width: getColumWidth($totalWidth, $columnCount);
}

別ファイル・パーシャルの読み込み
@import "setting";
@import "functions";

mixin

@mixin round{
  border-radius: 4px;
}

.label {
  font-size: 12px;
  @include round:
}