【簡単に美しく】Sass(.scss)のメリット・導入方法・使い方を解説!

困った人

CSSが適応されない…どこに書いたっけ…

CSSの変更が反映されなかったり、どこに何を書いたか分からなくなっちゃうことないですか?

どこにどのCSSを書いたかわからず、変更が反映されなかったり、そこで!importantを多用しまったり。

実はとっても簡単に見やすいCSSが書けるSassという言語があるんです。

この記事では、

  • Sassの特徴
  • 導入するメリット
  • 導入方法|たった2STEP
  • Sassの便利機能

を紹介していきます。

快適なCSSライフを手に入れましょう!

 

そもそもSassってなに?

一言で表すとCSSの派生版

ミミ

そもそもSassって何なの?

まずはじめにSassについてサクッと紹介します。

簡単にいうと、SassはCSSを効率的に書くための言語です。

CSSの仲間・派生版とイメージしてください。

 

ネスト(入れ子構造)が使える

冒頭でSassは簡単に美しいコードがかけると紹介しました。

その理由は、Sassではネスト(入れ子構造)でコードが書けるからなんです。

たとえば、「containerクラスがついたh2タグの色を赤色に、pタグを灰色にしたい」場合を考えてみます。

ふつうのCSSで書くと、こんな感じ。

stylesheet.css
.container h2 {
  color: red;
}
.container p {
  color: grey;
}

こちらのコードをSassを使って書くと、次のようになります。

.container {
  h2 {
    color: red;
  }
  p {
    color: grey;
  }
}

違いがわかりますでしょうか?

普通のCSSでは、それぞれに対して、.containerの〇〇という風にCSSを書かないとだめでした。

一方でSassでは、.containerの{}の中に、h2タグ、pタグのCSSを書くことができるんです。

つまりHTMLのようにネスト(入れ子構造)が使えるんです。

どこの要素にどのCSSが効かせたいのかが感覚的に分かって、とても書きやすい。

また、ネストはとっても見やすく美しいですよね。コードの修正も容易にできそうです。

また、拡張子は.scss(Sassy CSS:SassのCSS)に変わりますので、ご注意ください。

 

Sass導入のメリット|仕事の幅が広がる

Sassを導入するメリットは、美しくコードが書けるだけではありません。

フロントエンドエンジニアとしての仕事の幅が広がるんです。

クラウドソーシングサービスの王道、クラウドワークスを見ていると、実案件でもSassが使える方限定の案件がけっこうあります。

つまり、Sassができるだけで引き受けられる案件の数もグッと増えるんですね。

これは導入するしかありません!

Sassの特徴
  • CSSを効率的に書くための言語
  • ネスト(入れ子構造)が使える
  • 簡単に美しいコードが書ける
  • 仕事の幅が広がる
注意点

ちょっと注意点。

実はSass(.scss)はそのままだとブラウザが認識してくれないんです。

そこでSassをCSSに変えるコンパイルという作業必要。

でも超簡単なので安心してください!ここも含めて導入方法を解説していきます。

※また、この記事ではSCSS記法を使用しています

 

導入方法|たったの2ステップ

導入に必要なのはたったの2ステップ!

  • RubyでSassをインストール
  • コンパイラの導入

【前準備】Rubyをインストール

前準備としてRubyのインストールが必要になります。

Macの方はRubyが標準でインストールされているので特にすることはありません。

Windowsの方はまずRubyのインストールをしてください。

参考:はじめてのRuby環境構築 (Windows編その1)(外部サイトに飛びます)

 

[STEP1]RubyでSassをインストール

次に実際にSassをインストールしていきます。

Macの方:ターミナルを起動

Windowsの方:スタートメニュー→Rubyコマンドプロンプトを開く

次にこのコマンドを打ち込みます。

gem install sass

下のような文章が出てくればSassのインストールは完了!

Successfully installed sass-3.6.0
Parsing documentation for sass-3.6.0
Done installing documentation for sass after 4 seconds
1 gem installed

 

[STEP2]Koalaの導入

冒頭でちらっと言ったように、ブラウザはSass(.scss)ファイルを認識してくれません。

そこでSassファイルをCSSファイルに変えてくれるコンパイラを使って、ファイルの変換をしてあげる必要があります。

そのSassコンパイラをインストールしていきましょう。

ぼくはKoalaというフリーソフトを使っています。(MacでもWindowsでも使用可。無料です!)

Koalaの公式HPへ

緑色のDownloadからインストーラーがダウンロードできます。

その後インストーラーを実行してみてください。

これでSassをCSSに変えてくれるコンパイラのインストールが完了しました。

これにて準備完了!

 

実際にSassを書いて使ってみる

それでは次に実際にSassを書いて使ってみましょう。

作業の流れはこんな感じ。

  • Sassファイルの用意
  • コンパイラ(Koala)にSassファイルを認識させる
  • Sassファイルのコーディング

まずは.scssの拡張子を持つSassファイルの用意

サンプルのディレクトリを用意します。

普段はこのように.cssというCSSファイルを使っていると思います。

Sass 導入方法 使い方 はじめて フロントエンド Sassコンパイラ

今回はこのCSSファイルの拡張子をいじります。

Sassファイルの拡張子は.scssなので、stylesheet.cssの拡張子を.scssに変更しましょう。

Sass 導入方法 使い方 はじめて フロントエンド Sassコンパイラ

こんな警告が出るかもしれませんが、.scssを使用でOK。

Sass 導入方法 使い方 はじめて フロントエンド Sassコンパイラ

これでSass(.scss)ファイルが用意できました。

Sass 導入方法 使い方 はじめて フロントエンド Sassコンパイラ

 

コンパイラ(Koala)にSassファイルを認識させる

次にコンパイラ(ブラウザが認識できるようにSass→CSSの変換を行うソフト)にSassファイルを認識させましょう。

といってもやることは超簡単で、Koalaを起動して、ファイルをドラッグするだけ。

Sass 導入方法 使い方 はじめて フロントエンド Sassコンパイラ

するとこんな画面になります。

Sass 導入方法 使い方 はじめて フロントエンド Sassコンパイラ

上の方のRefreshで更新してみましょう。

すると、SassファイルからCSSファイルが生成されるのが確認できると思います。

Sass 導入方法 使い方 はじめて フロントエンド Sassコンパイラ

サンプルディレクトリの中にもしっかりと、stylesheet.scssというSassファイルが生成されていますね。

Sass 導入方法 使い方 はじめて フロントエンド Sassコンパイラ

MEMO

同時に生成されたstylesheet.css.mapが気になった方もいると思います。

これはソースマップと呼ばれるファイルですが、とりあえずは気にしなくてOK。

一度認識させると、Sassファイルに変更があった場合、自動的にCSSファイルを更新してくれます。

Koalaを終了するまで、ずっと自動的に更新してくれるので超便利。

 

実際にSassを書いてみる

それでは簡単なSass記法を試してみて、ちゃんとCSSに変換されていることを確認してみましょう。

試しにこんなコードを書いてみます。

stylesheet.scss
.container {
  h3 {
    font-size: 28px;
    font-weight: bold;
  }
  p {
    font-size: 15px;
  }
}

ファイルを保存すると、KoalaがSassファイルの変更を自動的にCSSファイルにしてくれます。

CSSの中身はこんな感じ。

stylesheet.css
.container h3 {
  font-size: 28px;
  font-weight: bold; }
.container p {
  font-size: 15px; }

きちんとCSSの基本の記法に直してくれていますね。

これでブラウザもバッチリ認識してくれます。

MEMO

ちなみに、生成されるCSSの書き方はKoalaの設定で変更できます。

歯車マーク(Setting)→Sass→Output Style

 

【補足】ソースマップが気になる方向け(飛ばしてOK)

「さっきのソースマップがやっぱり気になるよ」という方向けの補足です。

ソースマップには、生成されたCSSがどのSassファイルから生成されたのかが書いています。

v3.3.0以降のSassは、コンパイルするとソースマップファイル(.map)という、Sassコードが記述されていたファイル名と行数が書かれたファイルを書き出します。

引用:現場で役立つ実践Sass(1)Sassの環境を整える

これがあると、デベロッパーツール(検証機能)でどこのファイルに対応するCSSが書いてあるか確認できるんです。

Sass 導入方法 使い方 はじめて フロントエンド Sassコンパイラ

逆にこのソースマップがないと、Sassファイルに対する足がつきません。

生成元のSassファイルが1つならいいのですが、規模が大きくなるといくつものファイルから1つのCSSを生成することもあります。

だから元のSassファイルが複数あるとき、ソースマップがないと、訂正したい箇所があっても該当箇所を探すだけで時間がかなりかかってしまうんですね。

ソースマップは規模が小さいうちは気にしなくていいけど、規模が大きくなったら大事だよねという補足でした。

 

Sassの便利機能|変数やmixinを紹介

さっきも紹介した通り、Sassを導入するメリットは入れ子機能だけじゃないんです。

Sassにはいろいろな便利機能があるのですが、今回は初心者の方でも取り入れやすい3つの機能を紹介します!

  • 親要素の参照(ネストの補足)
  • 変数が使える
  • @mixinでコードの塊が作れる

これからそれぞれ解説していきますね。

 

Sassの便利機能1|親要素の参照

こちらはネスト(入れ子構造)の補足です。

Sassでは、ネストで『&』で親要素を参照できます。

たとえばこんな感じ。

stylesheet.scss
a {
  text-decoration: none;
  &:hover {
    opacity: 0.8;
  }
}

こちらはCSSで書くとこうなります。

stylesheet.css
a {
  text-decoration: none;
}
a:hover {
  opacity: 0.8;
}

Sassではコードの依存関係がひと目でわかりやすいですよね。

 

Sassの便利機能2|変数が使える

Sassでは変数も使えるんです。

ぼくは色の管理とかに使ったりします。

変数の定義と呼び出しは、$マークで行えます。

stylesheet.scss
// 変数の定義
$main-color: #006699;
$accent-color: #ff6633;
// 変数の呼び出し
div {
  background-color: $main-color;
  p {
    color: $accent-color;
  }
}

変数を使うことで、あとあとコードの修正があったときに、修正箇所が少なくてすみます。

 

Sassの便利機能3|@mixinでコードの塊が作れる

Sassでは、@mixinを使ってコードの塊を作ることができます。

さっき紹介した、変数を塊で使えるというイメージでOK。

ちなみに呼び出しは@includeで行います。

実際に例を出してみますね。

ここでは、.black-boxというコードのまとまりを作って、それを.boxクラスの中身で呼び出してみます。

stylesheet.scss
// boxの定義
@mixin black-box {
  color: #FFFFFF;
  background: black;
  font-weight: bold;
}
// boxの呼び出し
.box {
  @include black-box;
  border: 1px solid black;
  padding: 15px;
  font-size: 18px;
}

変数と同じく、こうすることでメンテナブル(メンテナンスしやすい)コードを仕上げることができます。

 

また@mixinは引数を渡すこともでき、もっともっと使いこなすことができるんです。

ぜひ調べてみてください。

 

まとめ|Sassを使って美しいコーディン

さいごにSassのポイントをおさらいしておきます。

  • CSSを効率的に書くための言語
  • 簡単に美しいコードが書ける
  • 仕事の幅が広がる
  • 便利な機能がたくさん(ネスト、変数、@mixin…etc)

Sassは簡単に美しいコードが書ける素晴らしい記法です。

また、導入方法も簡単で初心者の方でも取り入れやすいと思います。

ホントに便利なので、ぜひ取り入れてみてください!

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です