Scss学習メモ

制御構文　- p127.~

@if 条件分岐

Scssでの論理演算子
使える and or not
使えない && ||

@for 繰り返し処理

@for 1(開始) through 3（終了）　 ...3含む
@for 1(開始) to 3（終了）　　...3含まない

@while 繰り返し処理ループ 増やし方を指定できる

$index: 300;
@while $index > 200 {　//条件
	.box_#{$index} {　　　　　　　　　//スタイル
        width: 2px * $index; 
    }
    $index: $index - 32; //増やし方
}

@each リスト要素に対して繰り返し処理

よく使う処理　- p135.~

• abs() 数値の絶対値を取得する

小数点

• round() 小数点以下、四捨五入
• ceil() 小数点以下、切り上げ
• floor() 小数点以下、切り捨て

カラー

• rgba() RGB値＋透明度
• mix()
  中間色　（色,色,割合%）　
  透明度を計算した中間色（色,色,透明度の寄り合い%）

明度を調節

• lighten() 色＋明るくしたい割合%
• darked() 色＋暗くしたい割合%

指定したキーの取得

• map-get()

セレクタ置き換え

• selector-replace()

調べたこと

• 構造化データ