Menu
HAGANE Blog
  • About
  • 書いてる人
HAGANE Blog

ゴイスーなスタイルシート「Sass」の話をしよう

Posted on 2015-7-10 金2015-7-10 金

お久しぶりです。 久々にアフィアフィしてないまともな記事書こうと思いました(笑)

というわけで、今日はゴイスーなスタイルシート「Sass」の導入メリットについて書き殴ります。とはいえ、私もまだSass初心者ですので、突っ込む箇所があれば容赦なくツッコンでもらえると有り難いです。

Sassってなんなの?

Sassは、”Syntactically Awesome StyleSheets”の略で、『サス』と呼びます。その名の通り『構文的にゴイスーなスタイルシート』という意味です。

通常のCSSは、書式は簡単で1日もあれば余裕で基本を学べて、プロパティなどを覚えてしまえば簡単に誰にでも習得できるものです。

しかしそれ故に複雑な事ができないという事もあります。例えば変数や条件分岐、コードの再利用等々。プログラムでは当たり前のように出来る機能がありません。なので同じコードをコピペして、クラス名を変えて再流用。違う箇所はクラス名だけ。子孫セレクタが違うだけ。なんて事が多々ありました。よね?

それを解決する目的で誕生したのがSassです。
四の五の言わずに、まずはSassの例を見てみましょう。

$maincolor: #f00;

#main{
  p {
    margin:0  {
      left:10px;
    }
    strong {
      color:$maincolor;
    }
  }
}

header {
  border: 1px solid #ccc {
    bottom: $maincolor;
  }
}

って書いて、コンパイルすると

#main p {
  margin: 0;
  margin-left: 10px;
}

#main p strong {
  color: #f00;
}

header {
  border: 1px solid #ccc;
  border-bottom: #f00;
}

と生成されます。

関数

上記例に限って注目すべき点は「ネスト出来る」と「関数が使える」点でしょうか。

大して変わらないじゃん。と思いましたか? しかしサイトが中〜大規模で、マークアップエンジニアが複数居た場合、修正箇所が少ないというのは大きなメリットだと思いませんか?

例えば、Sassを使わないで上記サンプルサイトで使用しているメインカラー(#f00)を修正しようとした場合、今までであれば「#f00」を全CSSファイル検索して置換。なんてやり方だったと思います。それでもまだエディタの一発置換の方が早いと思うかと思います。

しかし複数人のマークアップエンジニアで運用していると想像してみてください。

デザイナから上げられた仕様書には「メインカラー:FF0000(HEX)」と書かれていた場合、人によってはそのままCSS内の記述を「#FF0000」としている可能性も有ります。(逆も然り)そしてその場合の修正作業の内容はどうなるでしょうか。

恐らくメインカラー(#f00)の置換だけでは修正は完了しません。 置換後ブラウザチェックして変わっていない事を知り、firebug等で確認して原因を突き止め「なんだ#ff0000で書いてたのか」と知り修正を穂通し再度アップ。なんだか馬鹿みたいな工程ですよね。

しかしSassが導入されれば、1行目の変数の値

$maincolor: #f00;

#main{
  p {
    margin:0  {
      left:10px;
    }
    strong {
      color:$maincolor;
    }
  }
}

header {
  border: 1px solid #ccc {
    bottom: $maincolor;
  }
}

を修正するだけで、CSS内で指定していたメインカラーを一発で変更することができます。

ネスト

次にサンプルで注目すべき点はネストです。
上記サンプルではイマイチメリットが伝わらないかもしれないので以下のhtmlソースにcssをあてる事を考えて見て下さい。

<div id='main'>
    <section>
        <h1>サンプル見出し</h1>
        <p>パラグラフ〜</p>
        <p class="notice">注意事項</p>
        <ul>
            <li>注意事項その1</li>
            <li>注意事項その2</li>
        </ul>
    </section>
    <section>
        <h1>サンプル見出し</h1>
        <p>パラグラフ</p>
    </section>
</div>

id mainの中の、sectionの中の、pやulに対してつけるスタイルとは別に、pのclassのnoticeにも別のスタイルをあてて、、、 というように階層を考慮しながらスタイルを振っていくと思います。まぁ慣れてしまえば大した手間じゃ有りませんけど、こいつをSassで書こうとすると、

#main {
    section{
        margin-bottom: 1em;
        h1 {
            font-size: 140%;
        }
        p,ul {
            margin-bottom: 1.5em;
        }
        p.notis {
            color: #f00;
        }
    }
}

これで終わりです。何か気付きましたか?

そうです、毎回同じセレクタを記述(コピペ)しなくて済んでいるのです。
cssでの記述に比べ、「#main section」を書かなくて良いので、スッキリと可読性にも優れています。
どうですか? 少し興味出てきましたか? Sassにはまだまだ便利な機能が沢山あります。

結論ありきの論調で少々強引な感じもしますが、なんとなくメリットは感じて貰えたかと思います。

では、次回はSassの導入についてを書いていきたいと思います。

参考にした書籍

0 thoughts on “ゴイスーなスタイルシート「Sass」の話をしよう”

  1. ピンバック: Sassを導入してみる | HAGANE Blog

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Translate

つぶやき中

@takeyou

- February 28, 2021, 12:21 pm

RT @masa_rhythm: 岡山県は聖火ランナーに、五輪マラソン2大会連続メダルの有森裕子さんが決定と発表しました。 しかし先程、ご本人は懸念を表明。本人の意思を無視して走らせるつもりでしょうか?そんな聖火リレーになんの意味があるのでしょうか? https://t.c…
h J R
@takeyou

- February 28, 2021, 12:18 pm

RT @nukomiti: みずほ銀行のATM障害で怒りの声がTLに満ちておるが、折角の日曜日の非番、仕事終わったらと色んな心算をしながら業務に励んでいたのに、全て台無しとなりATM裏の機械室に閉じ込められて、みずほ銀行行員の3割位の給料で、行員の3倍客に罵られるALSOKの機…
h J R
@takeyou

- February 28, 2021, 10:18 am

【ゆっくり解説】セブンが信用回復のためにおにぎりの断面図を公開するも合成がバレて大炎上中!? https://t.co/KDdDw8R0EV @YouTubeより
h J R
@takeyou

- February 28, 2021, 8:37 am

RT @iroha_saka: みずほ銀行、ひっどいことになってんなぁ 出金しようとしたら入口で私服の方に止められて、事情を聞くとお金をおろしに来てカードが吸い込まれて出てこないんだとか つまりお客が動けなくて入口でボランティアでやめた方がいいですよ、と言ってくれてる状態…
h J R
@takeyou

- February 28, 2021, 8:32 am

RT @PAGSSIORIO: みずほ銀行のATM使おうとしたら、機械に背にこちらを向いて仁王立ちしているおじさんから「使えないですよ!今全国的に使えないみたいです」って声かけられて通してもらえなかったんだけど、めちゃくちゃRPGのNPC感半端なかった。別のイベントクリアしてか…
h J R
Follow @takeyou

最近の投稿

  • ゴイスーなスタイルシート「Sass」の話をしよう
  • 完訳 7つの習慣がkindleでワンコインセール中!
  • Xperia Z3用のOverlay Glassが発売されてた!
  • amazonでバンド・オブ・ブラザース blu-rayBOXがめっちゃ安かった
  • 【予約中】PlayStation4 ドラゴンクエスト メタルスライム エディション
  • この3年
  • 復活します
  • 初日の前半
  • IS01 x wordpress
  • [お得情報]急げ!comドメインが66円!

タグ

book CANAAN CSS DQ9 Firefox Font GAME google Hawaii HDD lifehack PC PCトラブル sports travel web webservice windows windows7 X Japan youtube ご連絡 ぼやき アニメ イベント ゲーム コーディング トラブル ニコニコ動画 ハルヒ ブラウザ モニタ ラノベ ラブプラス 愚痴 感想 憤慨 日常 朝倉さん 涼宮ハルヒ 田吾咲 病 茅原実里 長倉さん 飛蘭

いつでも里親募集中

年間数十万匹の犬と猫が殺処分されています。ペットショップへ行く前に是非殺されていく子の里親になる事をご検討ください。

Ad

©2021 HAGANE Blog | WordPress Theme by Superb WordPress Themes