こんにちは朱夏です。
今回はCSSの拡張言語であるSCSSについて調べてみました。
CSSの記述や管理を楽にするための拡張言語の様です。
これからの主流になるかもしれないと書かれていた情報もあったので、調べてまとめてみました。
SCSSとは何なのか
最初に、SCSSというものがどんなものなのかというのを説明したいと思います。
SCSSとは、SassというCSSの拡張言語で、記述方法によってSCSSとSASSがある様です。
Ruby製の様ですね。
こんなイメージでしょうか。
SASSとSCSSの違いは、コードを書く上で言うとカッコやセミコロンを省略できるかどうかといった違いがあります。
この二つでスタイルを書くとどうなるのか、サンプルを用意してみました。
テストに使うHTMLのコードはこちらです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/sample.js"></script>
</head>
<body>
<div class="box">
<p class="coment">テストテキスト</p>
</div>
</body>
</html>
これに対して、テキストの背景を黒、テキストを白にする場合、普通のCSSなら以下の様に書きます。
.box {
background-color: #555555;
}
.box .coment {
color: #eeeeee;
}
Sassの場合だとこうなります。
SASSの書き方
.box
background-color: #555555
.coment
color: #eeeeee
SCSSの書き方
.box {
background-color: #555555;
.coment {
color: #eeeeee;
}
}
これら3つのスタイルの実行結果は同じになります。
解りやすくするためにシンプルな構成にしましたが、それでも短縮して書けるということが解ると思います。
そして、もう一つのポイントとして、入れ子ができるという点があります。
これにより、特定の場所を指定するのにセレクタを長々と書くといった事がなくなります。
入れ子で書いたスタイルのセレクタは、それより上位の部分を省略して書くことになるので、結果コードの短縮につながります。
導入方法
この非常に便利なSassですが、導入するのにいくつかの手順が必要です。
最低テキストさえあれば書けるHTMLやCSSと違いハードルは少しだけ高いですが、わずか3ステップです。
- Rubyのインストール
- Sassのインストール
- Guiソフトのダウンロード
これだけです。
ハードルというより段差レベルですね。
順番に行きます。
1.Rubyのインストール
Windowsの場合は以下からダウンロードできます。
https://rubyinstaller.org/
赤いDaunloadボタンからダウンロードページに移動し、「WITH DEVKIT」の最新バージョンをダウンロードしてください。
ダウンロードした].exeファイルをダブルクリックしてインストーラーに沿ってインストールすれば完了です。
インストールの参考サイトはこちらが解りやすかったです。
Macの方はこちらからダウンロードできるみたいです。
https://www.ruby-lang.org/ja/
2.Sassのインストール
Sassのインストールはコマンドプロンプトから行います。
起動後「gem install sass」を入力してEnterです。
完了すると、戻って来るのでコマンドプロンプトを閉じます。
これでSassのインストールは完了です。
3.Guiソフトのダウンロード
これは、作成したSassのファイルをコンパイルするソフトです。
コマンドプロンプトからコンパイルできるよって方は必要ないかもしれません。
GUIソフトはこちらのkoalaというソフトを使用します。
ダウンロードしたらインストールして完了です。
使い方
使い方の手順は以下の4ステップです。
- koalaを起動する
- フォルダを指定(初回のみ)
- style.scss(もしくはstyle.sass)を書く
- 保存する
koalaの操作方法は、こちらのサイトが解りやすかったです。
ただ、フォルダ指定にはドラッグ＆ドロップが何故か使えなかったので、左側の「+」ボタンからフォルダを指定しました。
これでSassを使えるようになりました。
エディタでSCSSファイルを編集して保存すると、自動的にkoalaがコンパイルしてCSSファイルを吐き出してくれます。
なので、HTMLファイルには今まで通りCSSに変換されたファイルをリンク先として指定すれば読み込まれます。
あとがき
というわけで、Sassを調べて導入までやってみました。
通常のCSSと記述方法が違うので覚える事もありますが、基本の部分はCSSと一緒なので、「ルールの追加や変更があって使いやすくなった」と考えると理解しやすいかもしれません。
コンパイルについても、最初は「コード書いてから実行結果確認までに時間かかりそうだな」と思っていたのですが、自動コンパイルで保存直後に変換されているので殆どストレスなしで使えました。
これでSassが使えるようになりました。
試しにこれで一つサンプルページを作ってみたいと思います。
今回はここまでです。
次回もよろしくお願いします。
