Sassを使ってCSSの効率化を図りたい！【導入編】

Tweet

Pocket

北海道もやっと気温が20度を超える日が多くなってきました。
最近は自転車で通勤をしていても気持ちがいいです！
しかし事故や転倒によるケガなどには気をつけないと…。菅原です。

何回かに渡ってSassの導入手順から使用方法、特長などについて書いていきますっ！

目次

• Sassとは?
• Sass導入手順
• まとめ

Sassとは?

Sassとは？ cssを拡張したメタ言語です。
簡単かつ具体的に言うと、cssの機能を拡張した言語という感じでしょうか。

“CSS with superpowers”
スーパーパワーを持つCSS。

“Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.”
Sassは、世界で最も成熟した、安定した、強力なプロフェッショナルグレードのCSS拡張言語です。

“Syntactically Awesome Stylesheets”
の頭文字を取ってSass（サス、もしくはサース）と呼ばれています。
直訳すると、”構文的に素晴らしいスタイルシート”となるようです。

Sass導入手順

Sassを使用するためにはRubyが必要になります。

Rubyをインストール

Windowsを使っている方はRubyInstallerからダウンロードしてインストールします。

MacへSassをインストール

macには標準でRubyがインストールされています。
Sassを導入するには、ターミナルから下記のコマンドを実行します。

mac osのユーザーパスワードを聞かれるので、入力してEnterキーを押しましょう。

WindowsへSassをインストール

Windowsの場合はコマンドプロンプトを立ち上げて、下記のコマンドを実行しましょう。

まとめ

導入できたでしょうか？
普段黒い画面を使用していないと恐怖しか感じませんが、
これを機会に使い方なども調べてみるといいかもしれません。

Sassはそのファイル自体をcssのように読み込ませてもスタイルが反映されません。
コンパイルという一手間が必要になってきます。
次回はコンパイルの手順を説明していきます。

参考文献

Tweet

Pocket