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

css を削減するべく、実際に記事として公開されている AMP ページの html ソース（のスタイルシート部分）を眺めていました。

「WordPress」・「Cocoon 親テーマ」・「自作スキン」と書き出されているスタイル指定の中で二点、気になった事がありました。

calc()
1. 結論から述べると
2. scss
もう一つの気になった点
1. 使用されているスタイルのみ読み込まれている？
今後の対応

calc()

calc()、、、存在は知っていました。しかし、これは「scss」だと思い込んでいました。これが css 内で記述できるのであれば、固定解像度毎の記述を統一出来るのでは、、、つまり、 css の削減が可能になるのでは？

結論から述べると

ダメでしたｗ

404 Error - Not Found

こちらの記事を参考にし、 calc() の記述をしていたのですが、どうにも上手く動かない。

どうやら剰余（mod）が上手く働いてくれていないっぽい。

調べてみると、 mod は使えない様です、、、

残念。

calc() を使うと CSS で四則計算ができる。それもコンパイルしなくていいぞ！ - Qiita

【メモ】高さを css で % 指定し、可変に。という記事を発見したので、ちょっと調べてみたら。 CSS で四則計算ができるではないか！それもコンパイルなしで。 SASS とか LESS とか Stylus とかのメ…

scss

後日、使える日が来た時用にソースを残しておきます。忘備録ですね。

 $font_width_n: $font_width / 1px; 
 @each $class, $count in $cocoon_block_class { 
   .#{$class} { 
     @for $i from 2 through $thx_beta_column_loop { 
       $i_1: $i - 1; 
       .has-#{$i}-columns{ 
         .wp-block-column{ 
           margin-right: calc( 
           ((67% - #{$contents_padding} * 2 
           - 
           (67% - #{$contents_padding} * 2 mod #{$font_width_n}) 
           - 
           #{$font_width} * #{$count}) 
           mod 
           (#{$font_width_n} * #{$i})) 
           / #{$i_1} + #{$column_margin} 
           ); 
         } 
       } 
     } 
   } 
 }

もう一つの気になった点

使用されているスタイルのみ読み込まれている？

AMP ページの <head> 内、 <style amp-custom> に AMP 用のスタイルが記述されていますが、例えばブログカード、

 .bct-reference .blogcard::before{ 
 content:"  参考記事 " 
 }

の様に記述されていますが、そのページ内で使用していないラベル用の css は記述されていません。

通常のスタイル
AMP のスタイル

となると、以前 css セレクタをまとめたことによって

 .wp-block-columns.has-2-columns .wp-block-column, 
 .wp-block-columns.has-5-columns .wp-block-column, 
 .blank-box .wp-block-columns.has-2-columns .wp-block-column, 
 .blank-box .wp-block-columns.has-3-columns .wp-block-column, 
 .blank-box .wp-block-columns.has-4-columns .wp-block-column, 
 .blank-box .wp-block-columns.has-6-columns .wp-block-column, 
 .secondary-box .wp-block-columns.has-2-columns .wp-block-column, 
 .secondary-box .wp-block-columns.has-3-columns .wp-block-column, 
 .secondary-box .wp-block-columns.has-4-columns .wp-block-column, 
 .secondary-box .wp-block-columns.has-6-columns .wp-block-column, 
 .toggle-content .wp-block-columns.has-2-columns .wp-block-column, 
 .toggle-content .wp-block-columns.has-3-columns .wp-block-column, 
 .toggle-content .wp-block-columns.has-4-columns .wp-block-column, 
 .toggle-content .wp-block-columns.has-6-columns .wp-block-column, 
 .sticky .wp-block-columns.has-2-columns .wp-block-column, 
 .common-icon-box .wp-block-columns.has-3-columns .wp-block-column, 
 .common-icon-box .wp-block-columns.has-5-columns .wp-block-column { 
   margin-right: 54px; 
 }