Sass

使わない方が良い?WordPress 案件をsassでカスタマイズして思う3つのこと。


みなさんこんにちは、mayukouです。
先月、仕事の案件でwordpressのカスタマイズを行いました。
元となるテンプレートは、バズ部が出しているXeory Baseというものです。
その際、CSSコーディングに使ったのが
SASSという言語もの。ちょっと専門的になりますが、

その時に、気をつけたほうがいい点を書いてみます。

スポンサードリンク

Sassとは?

Sassとは、CSSメタ言語と呼ばれる言語です。
メタ言語は、ある言語を生成するための言語で、Sassと呼ばれる言語をコンパイルして
CSSファイルを生成するものです。
by LIG

メリットとしては、
コードを効率的に書けて、CSSのコーディングスピードが早くなる、
ということが挙げられます。
独自の関数が使えるために、やり方を覚えれば作業の効率がアップします。

特徴的なのが、入れ子にして書く書き方です。

 

wordpressカスタマイズの方法

今回は、大元のXeory Baseを元にした、子テーマを使う方法で行いました。
PHPは扱わずに、CSS(Sass)を変更する方法です。
方法については、別ブログに書いています。

 

wordpressでSassを使う時に気になったこと

1.社内でwebデザイナー以外の人と仕事を共有する場合は、
Sassは避けたほうがいいこと。Sass知識のない人がカスタマイズできない。

2.googleデベロッパーツールやfirebugとの相性があまり良くないので微調整がしにくいこと。

3.レスポンシブ表記のメディアクエリは、見にくいCSSが吐き出されること。

一つずつ解説していきます。

1.社内でSassを避けたほうがいい理由

Sassの知識のあるwebデザイナー同士ならば問題がないかもしれませんが、
例えばクライアントなどSassの知識のない方と共有する場合、
wordpressテーマを納品した後に、ちょっとカスタマイズしたい、
ということが出るかもしれません。
そんなときに、CSSだとできても、Sassになるとハードルが上がってしまうのです。
wordpressのテーマを販売する場合も、
カスタマイズ性を高めたいならば、Sassは避けたほうがいいかもしれません。

使うとしても簡単な表記に抑えた方がよさそうです。

2.chromeのデベロッパーツールやfirebugとの相性が良くない

Chromeブラウザやfirefoxについている開発ツールのデベロッパーツールやfirebug。
コーディングするときに重宝します。

wordpressテーマをカスタマイズする際、
元のCSSを修正(上書き)したいことがあります。
その時に、CSSだとツールよりセレクタを全部コピーして
スタイルを書くことができますが、
Sassの場合、入れ子(ネスト)にして書かないとといけないので、
セレクタを分解しないといけません。
手間が増えてしまいます。

69-sass

3.Sassをコンパイルしたメディアクエリが見にくい。

Sassの場合、メディアクエリは、ネストしたセレクタごとに表記します。

コンパイルしてCSSにすると、
同じ宣言がいくつもできてしまうので、
見にくいCSSの書き方となってしまいます。
その際、カスタマイズ性が落ちてしまいます。

70-sass-media

では、どうすればよい?

私の現時点の知識では、wordpressにはSassを使わないほうがいいのでは、
という見解に至りました。
使うとしても、一人で完結する案件や、
知識のあるwebデザイナー同士の案件に限ったほうがよさそうという考えです。
クライアントワークの場合や、wordpressテーマ販売の場合は、
カスタマイズ性を考えてCSSでの開発がよい気がします。

以上、Sassを始めたばかりの私が感じたことでした。
何かいいアドバイスがある方、よければコメントでもいいのでご教授ください。

最後に

いかがでしたか?
sassでのwordpressカスタマイズについての考えをご紹介しました。
これからwordpressカスタマイズする方は、ぜひ参考にされてください。

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約5年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. CSSフレームワーク

    簡単にBootstrapで!100%表示のレスポンシブ対応のカルーセルスライダー

    こんにちは、mayukouです。お盆も過ぎて、後半戦が始まった感じで…

  2. Web Design

    作るごとに成長しよう!キュレーションメディアを作るときに気をつけること。

    みなさんこんにちは、mayukouです。仕事でキュレーション風ニュー…

  3. Web Design

    webデザインのトレンドと取り入れよう!デザインの参考になるwebリソース 〜海外編〜

    みなさんこんにちは、mayukouです。あっという間に土曜の半日が…

  4. Web Design

    モバイルフレンドリーなwebデザインするときにおすすめなツールまとめ

    みなさんこんにちは、mayukouです。今回は、スマホサイトやレス…

  5. Photoshop

    Photoshop の水彩画ブラシで描いた植物イラストのご紹介

    みなさんこんにちは、mayukou です。肌寒いような暖かくなった…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. Tutorial

    ワイヤーフレームがプロ仕様に!素敵なグラフィックスタイル「WireMagic」
  2. wordpress

    wordpressバックアップツールの決定版!All in one Migrat…
  3. Web Design

    モバイルフレンドリーなwebデザインするときにおすすめなツールまとめ
  4. Web Design

    今後のデザインのトレンドとして注目!コンテンツファーストのサイトをまとめてみた
  5. Mac

    仕事のBGMに!Apple Music始めてみました。使用感をご紹介
PAGE TOP