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

現在、親テーマのcss(style.css)をscssにして管理しやすくしようとしています。

具体的にどういうことかと言いますと、Gulpと言うタスクランナーを利用してsassをコンパイルし、自動でプレフィックスをつけたり、各パーツごとにまとめてわかりやすくするという意味合いなんですが、基本的にはメディアクエリ等の面倒臭い設定を自動化したいという点と、プレフィックスを付けるのが面倒臭い大変という所から設定しているわけです。

Gulpについては後述します。scssやsassは、凄いcssです。

現在作成中のsass(style_parent.scss)。ウチの環境での話なんですがファイルをコンパイルする都度上書きすると困ることが多々あるので、違うファイル名をつけてコンパイルし、内容を本来のstyle.cssに貼り付けて利用しています。
また、まだ変換している最中でもあるので、ごちゃっとしています。

上記zipファイルの中身の説明

※ 必要ないものが入っている可能性があります

style_parent.scssが本体で、_(アンダースコア)から始まるファイルはscssでインポートするファイルになっており、それぞれに用途別に分けています。
だいたいファイル名でわかる感じですが、そうでないヤツを説明しますと、

_structure.scss : #containerとか#mainなどのレイアウト用です
_basic_html.scss : 基本的なhtml関係と、フォーム、wordpressで汎用的に使うクラスなど

コンパイルしたもの(css化したもの)を、親テーマにコピペして、自分の海外サイト(hostinger)で適用していますが、特に表示崩れなどは無いようなので一応大丈夫かと思います。もしかしたら一部の環境で不足しているクラスやidがあるかもしれません。もし気が付かれたらコメントいただけるとすぐ追記します。ちなみに変換しているオリジナルテーマはver 1.6です。
オリジナルの親テーマstyle.cssだけしか触ってないので、その他の部分についてはその内になんとか順次やっていこうと思ったり。

※ scssやsassはコンパイルしてcssにしないと動作しないので注意です。

動作サンプルとしてhostingerの方のblazechariotで上記親テーマのcssを動作させています。またリスト表示を3列で表示しています(以下のブログカードの内容のため)。※ 2015/04/16追記、リスト3列表示は一時的にやめてます。

Simplicityを少し改造してみた 番外編 part4 リストスタイル3列で字数制限をして高さを揃える
※ 2015/07/24追記 記事中央辺りに、現在の最新版Simplicityでも対応できるであろう設定を書いておきました。何かしらの参考...

オリジナルのcssをscssにしていくと、重複している箇所、あるいは「あれ?このパラメーター必要なのかな?」と言う所もでてきたので勝手に直していたりします。また、勝手に整理整頓してくれるgulpプラグインを利用しているのでコメントがエライことになっているかも知れませんが、そのあたりは気が付き次第修復していきます。(まぁコメント部分なので動作に支障はないという…いいわけです。

ちなみにメディアクエリの部分はまだ何も手を付けていません。

scssやsassにするメリット

これらは基本コンパイルするので、エラーがある場合はコンパイルできません。そのため何かしらの問題があった時はすぐに修正ができます。また関連するパラメーターをネスト(入れ子)にして書けるので子孫要素が増えるとわかりにくくなりますが、比較的わかりやすい記述になります。

例えば、

上記はsimplicityのアンカー部分をまとめたものですが、これをコンパイルすると以下のようになります。

おそらく、zipファイル内の .related-entry-read a は重複していると思います(現在見直し中)が、scssの方は構造がわかりやすくなっていると思います。
scssでは、親要素を&でつけられるため、記述も少なくなりまたネストしていることで関係性がわかりやすくなります。必要のない場合もあるわけですが、ひとまず入れています。
scssでhoverの部分に$hover_colorと言うのが付いていますが、他のプログラムで言う所の変数が利用できるわけです。これで、特定の要素を、上記で言うならhoverの色は$hover_colorでまとめられ、管理が容易になります($hover_color:xxxのxxxを変えるだけで全体に適用)。

フォントのように色々と設定があるものは、

このように「font:」と入れることでnamespaceを利用することができます。他にも、

など。

sassでは計算もできてしまいます。

計算ぽいけど、計算しない例。

他にもよく使う構造は@mixinと言うものでまとめることができ、@includeでそれを呼びだすことができます。そうするとその構造が1行で書けるためより見通ししやすくなるわけです。cssに書き出したらダーッと書き出すわけですけども。

例えばどういうことかと言いますと、

こういう感じに書いておくと、

こういうふうに書き出してくれます。#container内だけで使うのであれば、そのままafterを書けばよいですが他の要素に利用する時はとても便利です。
mixinは関数のようにしても使えます。記述は同じだけど値が異なると言う場合に有効です。

このように定型文が同じで値が異なる時に任意の値を入れることができるわけです。

メディアクエリも強力な機能があります。極簡単な書き方をすると、

より詳しくは英語ですが Sass (Syntactically Awesome StyleSheets) など。公式なんですけどね(笑)

Gulpについて

GulpGruntのような、タスクランナーみたいなものです。どちらもnode.jsを利用します。利用法はGoogle等で検索すれば嫌というほど出てきます。なぜこういったものがあるのかと言いますと、いわゆる面倒な部分を自動化させようという事なのです。
面倒な部分とは、例えば縮小化(minfy: xxx.min.cssや xxx.min.js等)や、前述したベンダープレフィックス(-webkit-や-moz-等)を付けるに際して、これはもうプレフィックスいらなかったっけ?と迷うことはもうなくなります。またコンパイルしてscssやsassからcssを作成する時に、その都度何かしらの操作をするのは面倒です。できるならファイルが保存された時に自動でコンパイルして欲しいと言うのが人の常。そういった面倒な部分を自動化してくれるのがこういったタスクランナーです。

他にも画像のオプティマイズであったり色々と可能です。

GulpもGruntもnode.jsで動作しますが、利用する前準備が案外大変です。これまでコマンド操作をしたことがない人にとってはどうやって利用するのかも未知の世界かも知れません。Windowsあたりでは何かしら便利なアプリ等があるかも知れませんが基本ターミナル(端末)のいわゆる黒い画面(コンソール)を利用して操作します。

最初にするべきは、package.jsonを作成し、gulpfile.jsを作成しなくてはなりません。
package.jsonはgulpが動作するフォルダで、gulp initと入力すれば後は質問に答えるだけなのですが、gulpfile.jsは自分で作成するのでちょっと敷居が高く感じられます。ただし、GulpはGruntよりもjavascriptっぽい書き方ができるので、比較的簡単にわかりやすい記述ができるのが特徴でもあります。

gulpfile.jsには、Gulpで動作させるタスク等を書いていきます。node.jsをインストールしてある状態ならnpm installが利用できると思うので、必要なプラグインを導入しておく必要もあります。また、

とすることで、プラグインをpackage.jsonに追記していくと思います。package.jsonに記述されたプラグインはnpm installで勝手にインストールしてくれます。

例えば、

このように書いておけば、ターミナルで

と入れるだけでsassフォルダ以下にあるscssをcssフォルダに書き出してくれます。require(“gulp-sass”)とあるように、

としてプラグインをインストールしておく必要があります。
また、自動でプレフィックスをつけるプラグインを導入する場合は、

こんな感じになります。
このままだと保存時にコンパイルしてくれないので、それを可能にするためにwatchを追加して、デフォルトの設定を記入します。

これでターミナルにgulpと入れるだけで待機・監視状態になりファイルを保存(更新)した時にsass以下のファイルでマッチするファイルすべてがコンパイルされます。

ここまでの基本的な情報は、Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ(LIGinc.)に詳しく書かれています。
またより詳しくgulpの基本的な使い方(gulp.jsを理解する)mae’s blogで書かれていますので参考までに。

sassについては【Sassを覚えよう!Vol.4】Sassの基本的な記述方法 css happylifeが入門用には良いと思います。

スポンサーリンク

シェアする

フォローする