• sass

    実践まとめ④

    2012/10/11

    サイトの基本情報を変数に宣言する(_base.scss)

    compass.png

     

    _base.scssの中身

    _setting.scssの値を書いたあとは、

    _base.scssでサイトの基本スタイルを変数に宣言していきます。

    ただそれだけのファイルです。

     

     

    こんな感じでかいてます。

    ・フォントやテキストに関する指定

    
    /*
    * フォントファミリーの設定
    * 使用するフォントの変数を_layout.scssファイルで定義してください。
    * 呼び出し例): unquote($familyC);
    */
    $familyA: "'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'MS Pゴシック', 'MS PGothic', sans-serif";
    $familyB: "'MS P明朝', 'MS PMincho', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', serif";
    $familyC: "'MS ゴシック', 'MS Gothic', 'Osaka-等幅', Osaka-mono, monospace";
    
    /*
    * テキストカラーの設定
    * 使用しない項目は//でコメントアウトしてください。
    */
    //テキストカラー
    $color: #000;
    //サブテキストカラー
    $sub_color: #000;
    
    /*
    * リンクカラーの設定
    * 使用しない項目は$link_colorの値に統一してください
    */
    //リンクカラー
    $link_color: #f00;
    //リンクカラー(未訪問)
    $link: #f00;
    //visitedカラー(訪問後)
    $visited: #000;
    //hoverカラー(マウスオーバー)
    $hover: #f80;
    //activeカラー(クリック中)
    $active: #000;
    
    

    変数名は自分(作業者)がわかりやすい名前で。

    ここで宣言しておき、色んなところで使い回し、参照します。

     

     

    ・フォントファミリーを呼び出す

    上では仮に$familyA、$familyB、$familyCを変数名にfont-familyを宣言していますが

    これも自分のわかりやすい名前、自分が使うfont-familyを宣言しておきましょう。

     

    これを参照する時、宣言の為に書いた""(クォート)はいらないので、

    クォートを削除する関数unquoteを使ってこのように書きます。

    ※これは_layout.scssに記述しています。

    
    body{
     font-family: unquote($familyA);
    }
    
    

     

    背景カラーや、頻繁に使用するものもどんどん変数に宣言していきます。

    カラーコードは気づかずうちにサイト内でズレが出ていた・・なんてこともありますよね。

    宣言した変数を@mixinで使えば、とーっても見やすく&記述が楽になります!

    
    /*
    * 背景カラーの設定
    * 使用しない項目は//でコメントアウトしてください。
    */
    //基本背景カラー
    $bg: #fff;
    //サブ背景カラー
    $sub_bg: #fff;
    
    


     

     

    ・使用しない変数

    基本的にここにある変数で今回は使わない!っていうものは//でコメントアウト(もしくは削除)すればいいのですが

    @mixinで使用している変数をコメントアウトしてしまうとエラーになってしまいますよね。

     

    例えばリンクテキストについては_mixin.scssファイルで@mixin化しているので、

    使用しない変数の値はリンクカラーの値で統一しておきます。

     

    むー。他にいい方法あるのかな・・。

    もっといい方法が見つかれば追記します!

     

     

    ・数値を宣言する

    上記ではカラー指定ばかりですが、サイトの表示幅やマージン幅を宣言しても、とっても便利です。

    /*
    * サイト幅・余白の設定
    */
    //サイトの全体の幅
    $site_width: 950px;
    //コンテンツの幅
    $content_width: $site_width / 3;
    //基本マージン
    $default_margin: 20px;
    //サブで使うマージン
    $sub_margin: $default_margin / 2;
    
    

     

    例えば、上のようにサイト幅(950px)を宣言。

    それを3で割ったものがコンテンツ幅。

    基本で使うマージン幅(20px)を宣言。

    2で割ったものをサブマージン幅として宣言しておけば、統一性を出すための計算がいりません。

     

    でも、あんれ。

    950pxは3で割り切れないですよね。

     

    そういう場合も考え、割り算を使う場合は下記のように

    
    $content_width: round($site_width / 3);
    
    

    roundを使って書いた方が安全です。

    roundは小数点以下を四捨五入してくれる関数です。

    これで、上の場合$content_widthは 317px が出力されることになります。

     

    いや!四捨五入じゃなくて、小数点以下は切り上げたいんだ!

    って方はceil()を使用してください。

     

    いいえ!小数点以下は切り下げたいわ!

    って方はfloor()を使用してください。

     

    このように_base.scssファイルではサイト内の様々な情報を変数で宣言します。

     

    今まで修正が入る度に全ファイルを置換していましたが、

    変数宣言していれば、このファイル1枚の更新だけでOK!ってことになりますね!

     

     

    まとめ⑤に続く

    タグ:まとめ , Compass , Sass

この記事へのコメント

コメントを送る

  ※ メールは公開されません
Loading...
 画像の文字を入力してください

back