• sass

    Sassをはじめよう!

    2012/07/13

    CSSがかける人なら誰でも!今すぐに!Sassをはじめよう!

    sass.png

    Sassとは、CSSを拡張するためのメタ言語で、

    動作させる為にはRubyをインストールする必要があります。

     

    ・・・とか書くと難しい感じがしますが、全くそんなことありません!

     

    Sassは拡張子が「.scss」というファイルに記述します。

    (正確にいうとSassではなく"SCSS記法を.scssファイルに記述する"となるんですが、なんかややこしいのでSassで・・!)

    その記述した.scssファイルをcssに変換(コンパイル)して利用します。

     

    Sassでできること

     

    scss記法だけではなく、普通のcssもそのまま記述できます!

    とりあえず、拡張子を.scssに変えるだけからでも始められますね。

     

    分割したファイルを読み込んで統合できます!

    cssでも@importするよ?って思いますが、sassではいくつ読み込んでも1回のHTTPリクエストで済みます。1枚のcssとなって出力されるのです。

     

    コードを入れ子に(ネスト)して記述できます!

    入れ子にすることで記述も減り、また構造もわかりやすく管理がしやすいです。

    【Sass】ネスト(入れ子)

     

    演算できます!

    演算子が使えるので、元の値+なんちゃらができます。

    【Sass】演算

     

    プログラム処理が行えます!

    cssで出来なかったプログラム処理(条件分岐等)が使えます。

    【Sass】制御構文

     

    Sass用のコメントが使えます!

    cssに出力されない、sass用だけのコメントが記述できます。

     

    頻繁に使うスタイルを定義しておくことができます!

    何回も同じ記述を繰り返すのではなく、定義しておくことで呼び出して再利用ができます。

    【Sass】@mixin

    【Sass】@extend

     

    自動で圧縮できます!

    容量を減らすための圧縮も設定や命令で自動でしてくれます。

     

    もっと便利に使えるフレームワークがあります!

    さらに便利に、最初から色々と定義してくれたり使いやすくしてくれるフレームワークがあります。

    【Sass】compassの導入

    【Sass】compassを使う!(@mixin)

    【Sass】compassを使う!(独自機能)

     

    などなど。

    とにかく、管理しやすい!記述が減る!作業効率があがる!cssの容量が減る!

    などいい事尽くめだなと思うsassを一緒に勉強しましょう!

    はい勉強ーーーーーー!!!

     

    まずは【Sass】導入〜基本操作で!

     

     

    タグ:Sass

この記事へのコメント

コメントを送る

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

back