cssにphpの変数（Cocoon設定）を反映する−その②

いま thx.jp にて作成しているスキンは 「文字」 に関係しているカスタマイズがほとんどです。

そして、 多くの方が設定されていると思いますが、 PC サイトとモバイルサイトでは使用するフォントサイズを変更しています。

この対応として、 メディアクエリを作成したり、 calc() と em 単位を用いたりしてレスポンシブルを目指してきましたが、 どちらも css の記述量が増えてしまうため、 css の肥大化に繋がってしまいます。

そもそも、 amp の事を考慮さえしなければ、 css の肥大化はそれほど気にしなくても良いと思いますが、 勉強の意味も込めてコンパクトな css 作成を目指します。

 <?php  
 // 行の高さ
 if (get_entry_content_line_hight()){ 
   $thx_lh = floatval(get_entry_content_line_hight()); 
 } 

 // グリッド揃え用行間の設定
 if ( !function_exists( 'get_grid_line_space' ) ): 
 function get_grid_line_space($fz, $lh){ 
   $gls = round(($lh - 1) * $fz / 2) * 2; 
   return floatval($gls); 
 } 
 endif; 

 // グリッド揃え用 line-height の設定
 if ( !function_exists( 'get_grid_line_height' ) ): 
 function get_grid_line_height($fz, $lh){ 
   $gls = get_grid_line_space($fz, $lh); 
   $glh = $fz + $gls; 
   return floatval($glh); 
 } 
 endif; 

 // スマホ判別
 if (is_mobile()) { 
   $thx_fz = $thx_mb_fz; 
   $thx_fz_px = $thx_mb_fz_px; 
 } 
 $thx_gls = floatval(get_grid_line_space($thx_fz, $thx_lh)); 
 $thx_gls_px = $thx_gls.'px'; 
 $thx_glh = floatval(get_grid_line_height($thx_fz, $thx_lh)); 
 $thx_glh_px = $thx_glh.'px'; 

 // フォントのコンデンス率
 $thx_font_condense = 1.0; 
 $thx_fw = $thx_fz * $thx_font_condense; 
 $thx_fw_px = $thx_fw.'px'; 
 ?> 

 <?php $thx_bw = 0;// 案内ボックス
 $cocoon_box = array( 
   'primary', 
   'secondary', 
   'success', 
   'info', 
   'warning', 
   'danger', 
   'light', 
   'dark' 
 ); 
 ?> 
 <?php foreach ($cocoon_box as $name): ?> 
   .<?=$name?>-box { 
     <?php if ($thx_bw != 0) { 
       echo "border-width: ".$thx_bw."px;"; 
     } ?> 
     padding: <?=$thx_glh / 2 - $thx_bw?>px <?=$thx_fw - $thx_bw?>px; 
   } 
 <?php endforeach; ?> 

 // ボタン色
 if (get_go_to_top_background_color()){ 
   $thx_sub = get_go_to_top_background_color(); 
 } elseif (get_site_key_sub_color()) { 
   $thx_sub = get_site_key_sub_color(); 
 } else { 
   $thx_sub_hsla = generate_sub_color($thx_key_hsla); 
   //$thx_sub_hsla = generate_counter_color($thx_key_hsla); 
   $thx_sub = hsla_to_css_code($thx_sub_hsla); 
 } 

 if (!$thx_sub_hsla) { 
   $thx_sub_hsla = colorcode_to_hsla($thx_sub); 
 } 

 $thx_sub_090 = hsla_to_css_code($thx_sub_hsla,'90%'); 
 $thx_sub__000 = hsla_to_css_code($thx_sub_hsla, 1.0, 0.0); 

 // グリッド
 <?php $grid_color = $thx_sub_090; ?> 
 <?php $transparent = $thx_sub__000; ?> 

 .thx-set-grid { 
   line-height: <?=$thx_glh_px?>; 
   background-image: 
   linear-gradient( 
     to bottom, 
     <?=$grid_color?> 0%, 
     <?=$transparent?> 1.5px, 
     <?=$transparent?> <?=$thx_fz - 1.5?>px, 
     <?=$grid_color?> <?=$thx_fz?>px, 
     <?=$white?> 0%  ), 
   linear-gradient( 
   to right, 
     <?=$transparent?> 0%, 
     <?=$grid_color?> 0%, 
     <?=$transparent?> 1px, 
     <?=$transparent?> <?=$thx_fw - 1?>px, 
     <?=$grid_color?> 0%  ); 
   background-size: 
     <?=$thx_fw_px?> 
     <?=$thx_glh_px?> 
   ; 
 }