Sass / SCSS 入門

http://dotinstall.com/lessons/basic_sass

変換

sass scss/main.scss:css/main.css
sass --style expanded scss/main.scss:css/main.css

フォルダ監視
sass --style expanded --watch scss:css

基本・変数（数値、文字列、真偽、色、リスト:配列）

$debugMode: true;
$x : 10;

#content_if {
   @if $debugMode == true {
       color: red;
   } @else {
       color: green;
   }
   p {
       @if $x > 20 {
           color: yellow;
       }
   }
}

/* comment */
// comment (変換後非表示)

$beseFontSize: 14px; // → lighten darken etc
$imgDir: "../img/";
$balndColor: red;

#main {
   width: 90%;
   background: url($imgDir + "bg.png");
   p {
       color: lighten($balndColor, 30%);
       font-size: $beseFontSize;
       background: url("#{$imgDir}bg.png");
       .sub {
           font-size: $beseFontSize - 2px;
       }
       a {
           text-descration: none;
           &:hover {
               font-wight: bold;
           }
       }
   }
}

関数

$totalWidth: 940px;
$columnCount: 5;

@function getColumWidth($width, $count) {
   $padding: 10px; // ローカル変数
   $columnWith: floor(($width - ($padding * ($count - 1))) / $count);
   @debug $columnWith; // コンソール表示デバッグ

   @return $columnWith;
}

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

for 文

$animals: cat, dog, tiger;

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

@each $animal in cat, dog, tiger {
   .#{$animal}-icon2 { background: url("#{$animal}.png"); }
}

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

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

mixin

設定をまとめて管理

@mixin round2($radius: 5px) { // 引数+デフォルト値
   border-radius: $radius;
}

.label2 {
   font-size: 12px;
   @include round2(7px);
}

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

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

extend 継承

.msg {
   font-size: 12px;
   font-weight: bold;
   padding: 2px 4px;
   color: white;
}

.errorMsg {
   @extend .msg;
   background: red;
}

.warnigMsg {
   @extend .msg;
   background: orange;
}

ファイル分割

ファイル名
_functions.scss

@import "functions";