段落を整えて表示する−その⑦

 $column_per_000: (); 
 $column_per_020: (); 
 $column_per_025: (); 
 $column_per_033: (); 
 $column_per_040: (); 
 $column_per_050: (); 
 $column_per_060: (); 
 $column_per_066: (); 
 $column_per_075: (); 
 $column_per_080: (); 
 $column_per_100: (); 

変数を準備します。

計算された css セレクタを、 ここに順次放り込んでいきます。

 @for $i from 2 through $thx_beta_column_loop { 
   .wp-block-columns.has-#{$i}-columns{ 
     .wp-block-column{ 
       $columns_width: 
         $contents_width 
         - $column_margin * ($i - 1) 
       ; 
       $columns_rem: 
         $columns_width / $font_width % $i 
       ; 
       $columns_per: 
         $columns_rem /  ($i - 1) 
       ; 
       @if $columns_per == 0 { 
         $column_per_000: append($column_per_000, &, 'comma'); 
       } 
       @if $columns_per == 0.2 { 
         $column_per_020: append($column_per_020, &, 'comma'); 
       } 
       @if $columns_per == 0.25 { 
         $column_per_025: append($column_per_025, &, 'comma'); 
       } 
       @if $columns_per == (1/3) { 
         $column_per_033: append($column_per_033, &, 'comma'); 
       } 
       @if $columns_per == 0.4 { 
         $column_per_040: append($column_per_040, &, 'comma'); 
       } 
       @if $columns_per == 0.5 { 
         $column_per_050: append($column_per_050, &, 'comma'); 
       } 
       @if $columns_per == 0.6 { 
         $column_per_060: append($column_per_060, &, 'comma'); 
       } 
       @if $columns_per == (2/3) { 
         $column_per_066: append($column_per_066, &, 'comma'); 
       } 
       @if $columns_per == 0.75 { 
         $column_per_075: append($column_per_075, &, 'comma'); 
       } 
       @if $columns_per == 0.8 { 
         $column_per_080: append($column_per_080, &, 'comma'); 
       } 
       @if $columns_per == 1 { 
         $column_per_100: append($column_per_100, &, 'comma'); 
       } 
     } 
   } 
 } 

いつもの通りループで回します。

まずは 「$columns_width:」 で文章の幅を計算します。

続いて、 「$columns_rem:」 で割り切れない文字数を求めます。

ここが新たな試みです。 「$columns_per:」 で、 割り切れなかった文字が各カラムマージンに何％ずつ分配されるかを計算します。

あとは該当する変数に css セレクタを放り込みます。 「@if」 の列挙がとても初心者らしいですね ｗ

いや、 連想配列 （マップ型） とか使おうとしたのですが、 値の追加方法がどうにも分からなくて、、、

で、 「append()」 を使います。 変数 「$column_per_xxx」 に 「& （css セレクタ）」 をカンマ区切りで追加します。

 @each $class, $count in $cocoon_block_class { 
   .#{$class} { 
     @for $i from 2 through $thx_beta_column_loop { 
       .wp-block-columns.has-#{$i}-columns{ 
         .wp-block-column{ 
           $columns_width: 
             $contents_width 
             - $font_width * $count 
           ; 
           $columns_width: 
             $columns_width 
             - $column_margin * ($i - 1) 
           ; 
           $columns_rem: 
             $columns_width / $font_width % $i 
           ; 
           $columns_per: 
             $columns_rem /  ($i - 1) 
           ; 
           @if $columns_per == 0 { 
             $column_per_000: append($column_per_000, &, 'comma'); 
           } 
           @if $columns_per == 0.2 { 
             $column_per_020: append($column_per_020, &, 'comma'); 
           } 
           @if $columns_per == 0.25 { 
             $column_per_025: append($column_per_025, &, 'comma'); 
           } 
           @if $columns_per == (1/3) { 
             $column_per_033: append($column_per_033, &, 'comma'); 
           } 
           @if $columns_per == 0.4 { 
             $column_per_040: append($column_per_040, &, 'comma'); 
           } 
           @if $columns_per == 0.5 { 
             $column_per_050: append($column_per_050, &, 'comma'); 
           } 
           @if $columns_per == 0.6 { 
             $column_per_060: append($column_per_060, &, 'comma'); 
           } 
           @if $columns_per == (2/3) { 
             $column_per_066: append($column_per_066, &, 'comma'); 
           } 
           @if $columns_per == 0.75 { 
             $column_per_075: append($column_per_075, &, 'comma'); 
           } 
           @if $columns_per == 0.8 { 
             $column_per_080: append($column_per_080, &, 'comma'); 
           } 
           @if $columns_per == 1 { 
             $column_per_100: append($column_per_100, &, 'comma'); 
           } 
         } 
       } 
     } 
   } 
 } 

併せて Cocoon ブロック内も計算します。 前回からの課題でもあったメンテナンス性を考慮し、

 // Cocoon ブロックのクラス名
 $cocoon_block_class: ( 
   blank-box: 2, 
   secondary-box: 2, 
   toggle-content: 2, 
   sticky: 4, 
   common-icon-box: 5 
 ); 

を予め準備し、 各ブロックのクラス名と padding 等に要する文字数を与えておきます。

 @if $column_per_000 != () { 
   #{$column_per_000} { 
     margin-right: $column_margin * (1 + (1/2) * 0); 
   } 
 } 
 @if $column_per_020 != () { 
   #{$column_per_020} { 
     margin-right: $column_margin * (1 + (1/2) * 0.2); 
   } 
 } 
 @if $column_per_025 != () { 
   #{$column_per_025} { 
     margin-right: $column_margin * (1 + (1/2) * 0.25); 
   } 
 } 
 @if $column_per_033 != () { 
   #{$column_per_033} { 
     margin-right: $column_margin * (1 + (1/2) * (1/3)); 
   } 
 } 
 @if $column_per_040 != () { 
   #{$column_per_040} { 
     margin-right: $column_margin * (1 + (1/2) * 0.4); 
   } 
 } 
 @if $column_per_050 != () { 
   #{$column_per_050} { 
     margin-right: $column_margin * (1 + (1/2) * 0.5); 
   } 
 } 
 @if $column_per_060 != () { 
   #{$column_per_060} { 
     margin-right: $column_margin * (1 + (1/2) * 0.6); 
   } 
 } 
 @if $column_per_066 != () { 
   #{$column_per_066} { 
     margin-right: $column_margin * (1 + (1/2) * (2/3)); 
   } 
 } 
 @if $column_per_075 != () { 
   #{$column_per_075} { 
     margin-right: $column_margin * (1 + (1/2) * 0.75); 
   } 
 } 
 @if $column_per_080 != () { 
   #{$column_per_080} { 
     margin-right: $column_margin * (1 + (1/2) * 0.8); 
   } 
 } 
 @if $column_per_100 != () { 
   #{$column_per_100} { 
     margin-right: $column_margin * (1 + (1/2) * 1); 
   } 
 } 

んで、 各変数に収納された css セレクタにスタイルを設定します。

変数が空の場合はコンパイルエラーになるので、 if 判定を行っています。

いいですね。 思った通りの、 狙った通りの結果が得られると嬉しいです。 容量はこうなりました。

試しに AMP テストを行ってみた処、、、

既に超えてしまってます。 さらなる削減が必要ですね ；；