Sassのお勉強

Sassの勉強をしたので、忘れないうちに書いておく。
今日やったのはeachとfor。mixinもやった。

以下書いたコード

$black: green;
$red: red;
$colors: red,blue,green,white;
$font: 12,14,16,18,20;
$black: #000000;
$test-width: 800px,600px,400px,200px;
$test-height: 200px;

@each $color in $colors {
.#{$color}{color: #{$color}}
}

@for $size from 12 through 20 {
@if($size % 2 == 0) {
.fontsize-#{$size} {font-size: $size + px;}
}
}

@each $fonts in $font {
.fontsize-#{$fonts}{font-size: $fonts + px}
}

@mixin test {
font: {
size: 40px;
}
color: blue;
}

%test {
font: {
size: 40px;
}
color: blue;
}

.test {
background: lighten($black, 80%) ;
width: nth($test-width,2);
height: $test-height;
}

eachはいくつかのものを同時にやるのにむいてる。
forは一つづつやる場合に使う。
nthは$test-widthの2番めの値を読んでる。