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

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

関連記事

  1. jQuery

    スマホに使える!3階層のアコーディオンメニューを作りました!

    仕事でスマホサイトを作っているのですが、その際にモックアップとして作…

  2. Web Design

    デザインが成功するテンプレがここに。「なるほどデザイン」を読みました

    みなさんこんにちは、mayukouです。今回は、デザイン関連のお勧め…

  3. CSS

    グローバルメニューに最適♫メニュー幅を均一にしてくれるtable cellが便利!

    みなさんこんにちは、mayukouです。「コーポレートサイト作るけど…

  4. jQuery

    軽量のスクリプトで簡単に!レスポンシブメニューを実装できるResponsive Nav

    みなさんこんにちは、mayukouです!今回は、うちのブログで結構…

  5. jQuery

    簡単設置で見やすい!レスポンシブ対応メニューslicknavの使用方法

    みなさんこんにちは、mayukouです。さて、4月21日から、goo…

  6. CSS

    一手間でおしゃれに。CSSでマテリアルデザイン風のボタンを作る方法

    みなさんこんにちは、mayukouです。ランディングページやネットシ…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Web Design

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

    wordpressでコーギーブログ始めました♫
  3. Illustrator

    webデザインに活用するゴーストボタンを作るときの文字をセンタリングする方法
  4. Illustrator

    ロゴやイラストに!Illustratorでかすれ表現をする方法!
  5. iPad Pro

    iPad Proを液タブに♫Astropad Studioはイラストレーターには…
PAGE TOP