どうも、デザインちーむのさむです。
本日のネタはSassになります。
みなさん使ってますか？
今では使ってるかたが多いと思います。
Sassを使うとコーディングの速度が確実に上がります。
そして便利な機能も多くやみつきになってる人も多いのではないでしょうか。
本日はまだSassを利用していない方のために簡単に環境整備について書きたいと思います。
目次
Sassとは
Sassとはなんぞや？
SassとはCSSを拡張したメタ言語。
簡単に言うとSassはCSSをより便利に効率的に書けるようにパワーアップさせてある言語です！
Sassのメリット
そもそもSassを導入するメリットとはなんでしょう？
以下に簡単に記載してみます。
- 記述を簡略化して書くことができる
ネスト（入れ子）して記述できるので効率的 - 同じ値を何度も使用することができる
変数を使用することによって共通部分のスタイルを一元管理できる - 四則演算ができる
あらゆる値に四則演算が使えます。 - セレクタを使いまわせる
@extendという機能を使えばスタイルを使いまわせる - コードの再利用が可能
ミックスインと呼ばれる機能で定義したスタイルを再利用可能 - 条件分岐等のプログラム的な処理が可能
制御構文を使い複雑な処理が可能 - CSSファイルを圧縮可能
コンパイル時に圧縮させることも可能 - 便利なフレームワークが多い
Compass（コンパス）等のフレームワークを利用して便利に使うことができる
などなど、便利な機能が多く導入しない理由はまったく見当たりません。
現在では大手の会社でも採用され初めていて業界標準になりつつあります。
環境を整えよう
本日はWindows7環境でのお話しになりますので、その他の環境の方は自身で調べてみてくださいw
Sassを利用するにはRubyが必要になります。
よってまずはRubyのインストールから始めます。
ここの操作は別の記事に記載されていますのでそちらでご確認ください。
「なにかと使える「Ruby」、インストール方法。 Windows7編」
Sassのインストール
続いて、いよいよSassをインストールしていきたいと思います。
gemコマンドを使っていきます。
gem install sass
インストールができましたらsassコマンドでバージョンを確認してみましょう。
sass -v
「Sass x.x.x」と表示されましたら無事にインストールが完了です！
Sassのアップデート
まずはgemをアップデートしローカルパッケージを最新のものにしましょう。
gem update --system
これを実行することによりgemパッケージが更新されSassも最新になります。
Sassのみアップデートしたい方は以下を実行
gem update sass
これで基本的な環境は整いました。
とりあえず使ってみよう！
とりあえず基本環境は整いましたので手を動かしてみましょう。
エディタにて「scss」と拡張子のつけたファイルを作成します。
では、test.scssというファイル名でやってみたいと思います。
以下のソースを書いてみました。
#container {
width: 800px;
p {
margin: 10px 10px;
span {
color: red;
}
}
.test {
font-weight: bold;
}
}
作成したファイルをホームフォルダに置く
ホームフォルダはWindows7の場合以下になります。
「Cドライブ → ユーザー → ユーザー名フォルダ」
ユーザー名フォルダは各個人によって違います。
sassコマンドでコンパイルする
ホームフォルダにおいたSassファイルを、sassコマンドにてコンパイルします。
sassコマンドの説明は以下の通りです。
今回は分かりやすいようにまだ説明をしていないスタイルオプション(–style expanded)をつけてみましょう。(このスタイルオプションを付けることによりコンパイル後のCSSが通常のスタイルで書きだされます)
以下のコマンドをコマンドプロンプトから実行してみます！
sass test.scss:test.css --style expanded
ホームフォルダにtest.cssファイルが作成されたと思います。
コンパイル後のcssファイルを確認すると
#container {
width: 800px;
}
#container p {
margin: 10px 10px;
}
#container p span {
color: red;
}
#container .test {
font-weight: bold;
}
いつものcssファイルができてますね！
このような流れでSassを使用していきます。
そんなに難しくないですよね！
また、今回のようなCUI操作ではなくGUIコンパイラ、「Koala」を利用することでマウスを使った直観的な操作をすることも可能です。
「黒い画面は嫌だ」というひとはこちらから初めても良いと思います。
まとめ
いかがでしたでしょうか？
今回は環境整備と簡単な基本操作しか説明してませんが、ここまでくれば「とにかく使ってみる」ことで自然と覚えていけると思います。
ちょっとしたこういう知識があるかないかで作業効率はかなり変わってきます。
みなさんも業界標準となりつつあるSassを利用してみてはいかがでしょうか！
