Sassの配列とループを使って複数パターンのデザイン試す

nth(配列名, インデックスキー);

で呼ぶのがポイントですね。作業中のものをコピペすると次ようなイメージ。

/* pl-test */
$pl-width: 670px, 300px, null ,null;
$pl-float: null, left, null, null;
$pl-margin: 10px 20px , 10px 20px, 5px 5px, 5px 5px;
$pl-padding: null, null, null, null;

// eyecatch
$pl-eyecatch-width: 170px , 300px, 140px, null;
$pl-eyecatch-img-width: null, null, 100px, null;
$pl-eyecatch-img-padding: 15px 15px 0 15px, 20px 15px 5px 15px, 15px 5px 5px 5px, 15px 10px 5px 10px;


// each
@each $pl-num in 1, 2, 3, 4 {

    .pl-#{$pl-num} {

        @include clearfix;
        margin: nth($pl-margin,$pl-num);
        padding: nth($pl-padding,$pl-num);
        width: nth($pl-width,$pl-num) ;
        float: nth($pl-float,$pl-num) ;

        .date {
            color: darken($dh-gray,50%);
            border: solid 1px lighten($dh-gray,5%);
            font-size: 0.8rem;
            padding: 5px 5px;
            margin: 10px 15px 5px 15px;
            @include border-radius(2px);
        }
        
        .main-eyecatch {
            @include col;
            width: nth($pl-eyecatch-width,$pl-num);
            img {
                @include align-center;
                width: nth($pl-eyecatch-img-width,$pl-num);
                padding: nth($pl-eyecatch-img-padding,$pl-num);
            }
        }
    }
}

あ、ちなみにこれを試した理由としては、「コード量減って可読性が上がるかな」と思ったんですが、結局値が離れた位置に書いてあるし、あまり普通にCSS何個も書くのと変わらないなと思いました。残念。