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. illustration

    簡単!Illustratorでキラキラ星を作る方法

    みなさんこんにちは。mayukouです。だいぶ秋らしくなってきまし…

  2. Web Design

    ブログ作りの参考に♬ジャンル別オススメwordpressテーマを考察してみました

    皆さんは、wordpressのブログを持っていますか?ブログを持ってい…

  3. jQuery

    画像も文字もスライド可能!Swiper.jsでコンテンツスライダーを簡単に!

    皆さんこんにちは、mayukouです。先日、スライダーに便利で簡単な…

  4. Web Design

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

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

  5. Web Design

    スキルアップ!Webデザイナーになるための勉強をしたい人にオススメ書籍まとめ

    みなさんこんにちは、mayukouです。webの業界は、日々進歩して…

  6. Web Design

    意外と知らなかった…google map をホームページに貼付ける方法

    みなさま、こんにちは。mayukouです。今回は、仕事で必要に…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. ブログリニューアル

    wordpress

    ブログリニューアルしました。そのときやったことなど。
  2. Photoshop

    Photoshopのウィンドウを見やすく!ワークスペースを工夫してみよう
  3. デザイン

    デザインの引き出しを増やすために!スクラップがオススメ♪
  4. デザイン

    【随時更新】クリスマス&年賀状に使えるイラスト素材を無料配布します♩
  5. jQuery

    画像も文字もスライド可能!Swiper.jsでコンテンツスライダーを簡単に!
PAGE TOP