02/25 14:09

[Sass入門] 導入したったー!

otake


はじめまして。インタラクティブメディアグループのオオタケです。

最近は、ActionScriptだけではなく、HTML&CSSでのお仕事も増えてきました。
まず、簡単に自己紹介をさせてください。

PHPやMySQLでWebアプリケーション開発

Flashやりたい

Flashはある程度できるようになったけど、Flashコンテンツ減ってきたな…
コーディングもはじめなきゃ!!

HTML&CSSで通常のコーディングできるようになったでー

Sass、いつやるか。今でしょ!(←イマココ)

これから、私が書いていく記事に関しては
Flasherが、CSSやJavaScriptの知識で得たことをご紹介していく予定です。


さ〜やるぞ!ん?
SassとLessって?違いがよくわからない…。
って事で、調べてみました。
詳しく書かれている方もいらっしゃるので、割愛しますが
すごーく、ざっくりとご説明しますと….
コンパイラーが、SassはRubyでLessがJavaScriptなところでしょうか。

情報を集めているうちに、「むむう。Sassの方が多機能だし使えそうだな….」
んー、Sassに決定!!
慣れてきたらLessにも手をだしてみようと思います。


まずは環境作りからスタート

私の開発環境は、Mac OS 10.6 + WebStormです。
もともとMAMPやNode.jsはインストール済みでしたので、
こちらを参考に環境を整えました。
思ってたよりもカンタン!

その他にも、ググるといろいろあるんで自分のお好みの環境にしましょう。
coda
Sublime Text 2


さて、いよいよ初Sassコーディング!

■プロジェクトを作る

プロジェクトを作ります。


■HTMLを書く

サンプルなので適当に…


■Sassを書く

src/cssに、index.scssファイルを作る。

sass_01

一緒に、Sassの特徴も解説していきます。


・ネスト

CSSでは何度も同じ記述でてきますよね。
それを入れ子にできます。

#main{
  .txt { color:aqua; }
  .txt2 { color:#dc143c; }
}

・親の参照

入れ子にした親のセレクタに参照できます。
&をつけると親を参照

#main{
  a {
    font-weight:bold;
    &:hover { filter:alpha(opacity=60); -moz-opacity:0.60; opacity:0.60; }
  }
}

・変数

変数を定義しておけば、あとで調整する場合もラクラクです。
$マークのところが、変数

$main_lineHeight : 150px;
#main{
  p{ font-size:90%; line-height:$main_lineHeight; }
}

・演算

変数とか組み合わせ自体で便利になりますね。

#main{
  width: 1000px - 30;
}

今回は初級ということで、ここまで。
次回は、Sass関数についての記事アップ予定です!

COMMENT