SASSの基本的な文法

SASSの基本的な文法をまとめました。

変数

定義：

$hoge: #fff

使い方

color: $hoge

変数と文字を繋げる

$width: 100;
width: #{$width}px;
// width: 100px;

配列

定義

$hoges: 100, 200, 300;

使い方

width: #{nth($hoges, 1)}px;
// width: 200px;

ループ処理

@each $hoge in $hoges {
　$key: index($hoges, $hoge);
　li:nth-child(#{$key}) {
　　width: #{$hoge}px;
　}
}
// li:nth-child(0) { width: 100px; }
// li:nth-child(1) { width: 200px; }
// li:nth-child(2) { width: 300px; }

連想配列

定義

$hoges:(
  red: #ff0000,
　green: #00ff00,
  blue: #0000ff
);

使い方

@each $label, $code in $hoges {
  .color_#{$label} {
     color: $code;
  }
}
// .color_red { color: #ff0000; }
// .color_green { color: #00ff00; }
// .color_blue { color: #0000ff; }

ループ処理

for

@for $i from 1 through 3 {
　li:nth-child($i) { width: 100px * $i; }
}
// li:nth-child(1) { width: 100px; }
// li:nth-child(2) { width: 200px; }
// li:nth-child(3) { width: 300px; }

each

@each $width in 100, 200, 300 {
　.w#{$width} { width: #{$width}px; }
}
// .w100 { width: 100px; }
// .w200 { width: 200px; }
// .w300 { width: 300px; }

@each $label, $value in ( w100:100px, w200:200px, w300:300px ) {
　.#{$label} { width: $value; }
}
// .w100 { width: 100px; }
// .w200 { width: 200px; }
// .w300 { width: 300px; }

while

$i: 1;
@while $i <= 3 {
　li:nth-child(#{$i}) { width: #{($i * 100) + "px"}; }
　$i: $i + 1;
}
// li:nth-child(1) { width: 100px; }
// li:nth-child(2) { width: 200px; }
// li:nth-child(3) { width: 300px; }

継承

使い方1

.txt1 {
　color: #000;
　font-size: 1em;
}
.txt2 {
　line-height: 1.4em;
　@extend .txt1;
}

// .txt1 {
// 　color: #000;
// 　font-size: 1em;
// }

// .txt2 {
// 　line-height: 1.4em;
// 　color: #000;
// 　font-size: 1em;
// }

使い方2

%txt {
　color: #000;
　font-size: 1em;
}
.txt1 {
　line-height: 1.4em;
　@extend .txt;
}

// .txt1 {
// 　line-height: 1.4em;
// 　color: #000;
// 　font-size: 1em;
// }

ミックスイン

定義1

@mixin hoge {
　color: #000;
　font-size: 1em;
}

使い方1

.txt {
　@include hoge;
}
// .txt {
// 　color: #000;
// 　font-size: 1em;
// }

定義2

@mixin hoge($value1, $value2: 1.4em) {
　border: $value1 solid #000;
　line-height: $value2;
　color: #000;
　font-size: 1em;
}

使い方2

.txt {
　@include hoge(1px);
}
// .txt {
// 　border: 1px solid #000;
// 　line-height: 1.4em;
// 　color: #000;
// 　font-size: 1em;
// }

.txt {
　@include hoge(2px, 1.6em);
}
// .txt {
// 　border: 2px solid #000;
// 　line-height: 1.6em;
// 　color: #000;
// 　font-size: 1em;
// }

関数

定義1

@function add($warp, $element) {
　@return $element / $warp * 100%;
}

使い方1

.column_left {
　width: math_width(980, 400);
}
// .column_left { width: 40.81633%; }