Simplicity カスタマイズ補助として 親テーマのcssをscssにしてみる part3

現在公開されているSimplicity ver 1.6.3のcssをscssに変換してみました。利用法方法としては元々の親テーマstyle.cssと入れ替えるだけです(元々の親テーマstyle.cssはバックアップしておいて下さい)。
これまでにも何度か公開したわけですが、今回の変更点は以下になります。

  • Simplicity 1.6.3のファイル構成変更に伴い、
    • footer-mobile-buttons.css、footer-mobile-buttons-dark.css、footer-mobile-buttons-light.css(実際はドット区切り(?))
      jquery-sidr-dark.css、jquery-sidr-light.css
      slicknav.css、sns-twitter-type.css、media.css、print.css 等の追加&scss化

      • jquery-sidr-dark.css、jquery-sidr-light.cssについては、おそらく同じ構成のはずなのでcssの記載の違う部分を同じように修正
    • responsive-pc.css、narrow.css等の表示形式に関係するcssを_structure.scssに統合
  • バイラルボタンのテキストがうちの環境で若干下に表示されていたのでheight:35pxを修正
  • print.cssをsccs化に伴い@media printで記載(動作するかは不明)
  • _mixin.scssのフォント変換(px → rem)を古いブラウザ向けにremだけではなくpxも表示し、remで上書きするように設定(以下説明参照)
  • その他ver 1.6.3で変更されたであろう各ファイルの修正部分部分を追記・修正他

とりあえずの Simplicity 親テーマ scss化ファイルzip: sass20150427.zip
コンパイル済み圧縮css: style.min.css
コンパイル済み通常css: style_nonecomp.css

2015/05/02追記
ブレイクポイント(440px)の設定と、@importが@inportになっていてscssファイルが読み込めていなかったものの修正をしたファイル: sass20150502.zip
その圧縮版css: style.min.css
そのノーマル版css: style_nonecomp.css

また、全称セレクタ「*」と継承でbox-sizing: border-box;を設定していますので、各プロパティから該当部分はコメントアウトしています。コメントアウトしているだけので復帰することも可能です。その際は各_(アンダースコア)で始まるscssのコメントアウト部分を復帰する必要があります。cssファイルの場合は出力されていないので追記する必要があります(明記したい場合、あるいは全称セレクタを利用したくない場合)。
全称セレクタ「*」と継承でのbox-sizing: border-box;は、_structure.scssに記載してあります。

これらファイルは 当サイト海外サーバー(hostinger)で実際に動作しているものが公開されています。
また以前公開したscssファイルと説明は以下のブログカードから

Simplicity カスタマイズ補助として 親テーマのcssをscssにしてみる part2
前回、Simplicityの親テーマのstyle.cssをsass(scss)化すると言うことでzipファイルを公開しました。 今回は、前...

上記ブログカードの記事で少し説明していますが、今回_mixin.scssの中身にあるfont-sizeをpxからremに変更する部分で、これまでremだけ出力させていたものから以下のように変更しました。

これによりどうなるかと言いますと、

こうすることで新しいブラウザは1remを認識してpxの方を自動でコメントアウトしますし、古いブラウザでremがわからないブラウザはremを無視してpxで表示するようになります。

また、新しくpxからptに変換するmixinも入れました。そもそも、ptにすることなんてのはそうそうないわけですが、今回print.cssを追加したので、そこでptが使われており、上記で公開したzipファイル内の_print.scssでは元々のprint.cssに記載されていたptに合わせるべく、手動で計算して書きましたが、このmixinでおそらくは、pxで指定すればptに変換して出力されると思うのでイメージしやすくなるかも知れません。

@include fzpt(15)と書くと、15pxをptに直して、11.25ptで出力されます。

ひとまず、ザーッとsccs化したので記入漏れとかあるかもしれません。何かおかしなところがあれば修正したいと思いますのでコメントいただければと思います。

スポンサーリンク

シェアする

フォローする