Sass入門講座（初心者向け） CSSを効率よく書こう

Sassは覚えてしまえば、効率的にCSSを作ることができますが、新しい記法を覚える必要がある為、少々学習コストがかかってしまいます。小規模のWebサイト作成などであればCSSで十分とも言えますが、長い目で見てCSSコーディングを行ない続けるようであれば今後のコーディングを効率よく行えるので学習する価値が十分にあります。まずはCSSとの違いや具体的な記述の仕方について以下で解説していきます。

Sassとは
【入門講座】SassとSCSSの違い
【入門講座】Sassの導入方法
【入門講座】Sassのメリット
SASS入門講座（6問）
まとめ

Sassとは

Sassとは、Syntactically Awesome StyleSheetの略で直訳すると「構文的に素晴らしいスタイルシート」です。その言葉通りCSSコーディングをスピーディに記述することができ、修正が楽になります。

Sassはメタ言語というある言語に新しいルールを定義するために使われる言語です。一方で拡張言語とも呼ばれています。

CSSの基礎を学びたい方は、忍者コードのCSS入門講座をご覧ください！

【入門講座】SassとCSSの違い

Sassが登場してからの初期は、Sass記法と呼ばれるCSSとは異なった独自の記法を採用していましたが、バージョン3.0以降にCSSの拡張言語であるSCSS記法が新たに導入されました。

SCSS記法の場合、ベースがCSSとなる為CSSをコピぺしても動いてくれます。少しややこしいですが、最初に作られたのがSass記法で、今一般的に普及しているのはSCSS記法になります。Sassという言語の中にSass記法とSCSS記法があるという事です。インターネット上などでよく表記されているSass（SCSS）とはSass言語のSCSS記法のことです。

この2つは両方とも入れ子（ネスト構造）で記述できるという部分は同じですが、SCSSはCSSと同様「波括弧{}」を使って記述することに対して、Sass記法は「波括弧{}」と「セミコロン；」を省略した簡素的な記述方式になっています。

Sassについてもっと詳しく知りたい方は、無料問題集をご覧ください！

【入門講座】Sassの導入方法

Sassを導入するには、Ruby、Sass、コンパイラの3つをインストールする必要があります。Sassファイルはそのままだとブラウザが認識できない為、コンパイラを使ってSassファイルをCSSに変換します。

Rubyのインストール

Sassでコンパイルを行なうには、Rubyをインストールする必要があります。Rubyはインストールするだけで、Ruby知識は必要ないので安心してください。また、Macであれば標準でRubyが入っているのでインストールは不要です。

Windowsの場合はインストールが必要になるのでまだRubyが入っていない場合はRubyの公式サイトからインストールしましょう。

最後にCUIを使って「ruby -v」コマンドを実行し、無事にインストールが出来ているか確認しておきましょう。バージョン情報が表示されればインストールができています。

次にSassをインストールします。SassのインストールはCUIのみでしか出来ません。Macの場合はターミナルから、Windowsの場合はコマンドプロンプトを開いてインストールのコマンドを打ちこんでいきます。インストールするにはgemコマンド「sudo gem install sass」を実行しましょう。実行後パスワードを要求されるのでPCに設定しているパスワードを打ち込みましょう。

Rubyと同様最後に「sass -v」コマンドでインストールが出来ているか確認してください。

Live Sass Compilerの使い方

Live Sass Compilerを使ってコンパイルをするには、コードエディタの下部にある「Watch Sass」をクリックします。クリックすると監視状態となり、監視中は「Watching…」と表示されます。監視を終了する場合はもう一度クリックします。一回目のクリックで監視が開始されるとすぐにCSSファイルが作成され、監視中はSassファイルを保存する度に自動でコンパイルしてくれます。

デフォルト設定では、コンパイルされたファイルはSassファイルと同階層のディレクトリに生成されます。但しCSSファイルはCSSフォルダ内で保管した方がいいと思うので、必要に応じてファイルを移動させましょう。

＼Sassについてもっと詳しく知りたい方必見！／

これからWEB制作を学ぶ方には、Web制作コースの独学プランがおすすめです!

WEB制作コースの詳細はこちら

【入門講座】Sassのメリット

Sassには、導入するべき価値のあるメリットがいくつかあります。具体的にどのようなメリットがあるのかをここで解説していきます。

入れ子（ネスト構造）で書くことができる

Sassを導入すれば、CSSを入れ子（ネスト構造）で記述することができます。入れ子構造を用いることで、親要素と子要素の関係性が理解しやすくなるため、可読性が一気に向上します。実際には以下のように記述します。

div {
  display: inline;
  width: 100%;
  height: 100%;

   h2 {
     margin-right: auto;
   }
   h3 {
     margin-left: auto;
   }

}

このようにdivの中にh2とh3をネストで書くことができます。通常のCSSの場合は「div h2{}」というように書いていた分を非常にシンプルにまとめることができます。Sassはこの点にメリットを感じる方が多いです。

アンパサンド（&）で親要素を取得できる

アンパサンドとは、「&」の記号のことで、Sassではこのアンパサンドが非常に役立ちます。アンパサンドには様々な使い方がありますが、基本的な使い方さえマスターしてしまえばそれだけでも非常に効率的です。アンパサンドはセレクタの親要素を取得することができます。hoverなどの疑似クラスを使う際などにとても便利な機能です。

.button {

              background-color: blue;

              color: white;

              

              &:hover {

                background-color: darkblue;

              }

            }

変数が使える

Sassでは、変数を使って共通の値を使いまわすことができます。Webサイト上で共通の色を使いたい場合、通常のCSSではその都度で色の指定を行なう必要があります。しかしSassを使う事で「共通の値」を変数に入れて使いまわすことができます。

通常、変数の定義はファイルの上部で行ない、「$favorite_color: #3498db;」のように定義します。そしてこの定義した変数を使用するには「color: $favorite_color;」というようにプロパティの値部分に変数を記述します。そうすることでコンパイルされたタイミングに変数が変数値に置き換わります。繰り返し使用するスタイルやメディアクエリの設定などで非常に役立つ機能になります。また、変更や追加などの修正が合った際にも迅速に対応ができるようになります。


            // 変数の定義

            $favorite_color: #3498db;

            

            a {

              color: $favorite_color;

              text-decoration: none;

            }

            

            .button {

              background-color: $favorite_color;

              border: 1px solid darken($favorite_color, 10%);

            }

四則演算ができる

四則演算とは、算術計算の中で最も基本的な4つの計算法である足し算、引き算、掛け算、割り算のことです。以下のように使用することができます。

div {
  display: inline;
  width: 200 / 5 + 5 * 10;
}

スタイルシートを分けることができる

大規模なウェブサイトやアプリケーションでは、複数のページやコンポーネントがあります。それらのスタイルを1つのCSSファイルにまとめると、管理が煩雑になり、保守性が低下する可能性があります。Sassでは、この問題を解決するために、スタイルシートを複数のファイルに分割することができます。

例えば、ヘッダー、フッター、ナビゲーション、サイドバーなど、異なる部分のスタイルを別々のSassファイルに分けることができます。そして、これらのファイルを必要な場所でインポートすることで、スタイルを効果的に管理できます。

条件処理を使用可能

Sassの条件処理は、条件に応じてスタイルを適用することができる機能です。@if、@else if、@elseを使用して、変数や関数の値に基づいてスタイルを制御できます。これにより、異なる状況や条件に応じて、適切なスタイルを適用することができます。

例えば、レスポンシブデザインで特定の画面幅に応じてスタイルを変更したり、テーマ切り替え機能を実装したりする際に活用されます。この機能は、柔軟性と効率性を高め、コードの再利用性を向上させます。

mixin機能を使用可能

Sassのmixin機能は、スタイルの再利用性と効率性を向上させます。`@mixin`ディレクティブを使用して、一連のスタイルルールを定義し、必要な場所で呼び出すことができます。これにより、同じスタイルを複数の要素に適用したり、複数のセレクタに対して同じスタイルを適用したりする際に、冗長なコードの重複を防ぎます。

また、引数を使用してmixinをパラメータ化することも可能であり、柔軟性が高まります。この機能は、スタイルの一貫性を維持しながら、コードのメンテナンスを容易にし、効率的な開発プロセスを実現します。

＼Sassについてもっと詳しく知りたい方必見！／

これからWEB制作を学ぶ方には、Web制作コースの独学プランがおすすめです!

WEB制作コースの詳細はこちら

SASS入門講座（6問）

まとめ

こちらではSassの導入方法や導入メリットについて解説しました。冒頭で書いていた通り、Sassは少々学習コストがかかってしまいますが、一度覚えてしまえばコスト以上のメリットが得られます。早いうちから慣れておくことで、効率的なWeb制作を行なうことができるので無料問題集にチャレンジしてスキルを身に着けていきましょう。

これからWeb制作を学ぶ方は、Web制作コースをご覧ください！

プログラミング入門講座へ戻る