初心者も簡単ブログにコピペだけ!1クリック高単価7〜42円。登録無料最短1分でスタート。

CSSの面倒な四則計算やネストの記述をSassとLessで簡単に記述する。変数にも対応。

SassやLessはCSS拡張メタ言語として使われています。最初に使用方法の説明をざっくりしてからSass環境の準備方法を説明していきます。Lessの導入方法はこちら。

Sassのなにが便利かというと入れ子の記述を下記のような感じでできたり、ライブラリー化したり変数を使ってCSSを記述できたりします。


$hoge: 10;
$subcolor: #ccc;

#sample{

width:$hoge - 360px;
       background: $subcolor;
{

ul li{

float:left;

}

}

これをコンパイルすると下記のようになります。


#sample{width:350px; background:#ccc;}

#sample ul li{float:left;}

他にもたくさん便利なことができるのですが、おいおい紹介して行きたいと思います。

<h3>Sassを使えるように準備しょう。</h3>

MAC OSXを使用している方ははじめからRubyがインストール済みなので下記コマンドでSassをインストールすると使えます。

1:hamlをインストールする。

gem install haml

2:sassをインストールする。

gem install sass

3:CSSファイルを準備する。

hoge.cssなど適当なCSSファイルをつくります。

次にsassのwatchコマンドでscssという拡張子にして変更を自動的に追跡できるようにします。

watchコマンドはディレクトを指定することもできるので複数のCSSファイルの管理も可能です。

sass --watch hoge.scss:hoge.css

Sassの便利なところは変数が使えるので文字の色や背景などの決まった値をいつでも簡単に呼び出せるところです。他にも沢山の機能があるので慣れるととっても作業が捗ります。

ダイレクト特集ページ用バナー(ダウンロード版)

初心者も簡単ブログにコピペだけ!1クリック高単価7〜42円。登録無料最短1分でスタート。