月別アーカイブ
検索

CSSが使えなかった頃と比べると、構造(HTML)と見た目(CSS)が分離されているので、かなり保守は楽になりました。

それでも欲が出てくるもので、CSSは何かと面倒。

CSSのここが面倒

例えば、入れ子になった要素に属性を指定するとき。

div#container
{
   ・・・
}

div#container div#left-area
{
   ・・・
}

div#container div#left-area div.widget
{
   ・・・
}

↑のような記述を書いていると、イライラしてきます。

特に、後からクラス名やIDを変えた時に、全部変えないといけないのが嫌で嫌でたまらない。

あとは、色とか文字の大きさを変えるとき。それこそ、あちこちに散らばっているので、面倒極まりない。

SASS を試してみた

SASSを使うと、上述のCSSは↓のように入れ子構造で書けます。

div#container
{
   ・・・
  div#left-area
  {
     ・・・
    div.widget
    {
     ・・・
    }
  }
}

他にも、変数が使えたり、関数(っぽい記述)が使えたりと、少しでもプログラムが組める人ならば、CSSに抱いていた不満がかなり解消されると思います。

SASSの文法に関しては、「続きはWEBで」ってことで、ここではWordPressに導入した時の注意点を。

プラグイン:WordPress SASS

WordPress SASSというプラグインを使いました。

基本はプラグインの説明ページ(英語)の通りにやればいいのですが、なんだか改行が入っていなくて読みにくいのでそのままでは動きませんでした。

注意1 : function.php に書く記述

説明ページに書いてあるコードは改行が入っていないので、そのままでは動きません。正しくはこう。

// Enables SASS to CSS automatic generation
function generate_css()
{
	if(function_exists('wpsass_define_stylesheet')) wpsass_define_stylesheet("style.scss", "style.css");
}
add_action( 'after_setup_theme', 'generate_css' );

注意2 : style.css のパーミッション

説明ページには775にしろって書いてあるけど、環境によってはNG。今回導入したサーバでは、Apache君が書き込みできるようにしておく必要があります。今回入れたところはApacheが別のユーザで動いているので、所有者をApacheユーザにしたうえで、644 。

注意3 : SASSの文法

どうもSASSの記述法には何種類か(少なくとも2種類)あるみたい。

初めにここの記述を試したがまったく動かない。設定が間違えているのかと思い、何度も見なおしたけど原因が分からなかった。

でも、ここの書き方だと、すんなりと動いた。

関係ありそうな記事

コメント