Haml / Sass / CoffeeScriptでビューを書く ~Sass~

Sass：https://dotinstall.com/lessons/basic_sass

共通変数定義

$baseFontSize: 13px;
#main{
  font-size: $baseFontSize
}

色の特徴

llightn darken で少し明るめ、暗めとかできる

$brandColor: red;
#main{
  color: lighten($brandColor, 30%)
}

条件分岐

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

ループ

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

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

リスト

$animals: cat, dog, tiger;

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

 関数

$totalWidth: 940px;
$columnCount: 5;

@function  getColumWidth($width, $count) {
  // $culumWidth計算
  $padding: 10px;
  $columnWidth: floor(( $width -  ($padding * ($count -1))) / $count)
  @debug $columnWidth;
  @return $columWIdth;
}

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

ファイルの分割

_settings.scss

_functions.scss

と用意して、

メインのscssに

@import "settings"

@import "functions"

@mixin

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

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

@extend

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

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

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