【Sass初心者入門】 Sassとは何か？Sassの使い方について解説します。

Sass Web制作

【Sass初心者入門】Sassとは何か？Sassの使い方について解説します。

※本記事は広告が含まれる場合があります。

なやむくん
Sassって何なの？
なやむさん
Sassの使い方を学びたい

などの疑問や悩みを解決してまいります。

Web制作をしている人なら使っていなくても「Sass」という言葉を聞いたことはありませんか？

おそらくこの記事を読んでいるあなたは「Sassを使ってみたい」「興味がある」と思っているのではないでしょうか。

ズバリ伝えますと、Sassはとても便利な言語です。

今回は2部に分けてSassの使い方から便利機能の解説まで丁寧に解説した記事にしました。

今回はSassについてとSassの使い方についてです。

Sassとは？

Sassロゴ

Sass（サス、サースともいう）とは「Syntactically Awesome StyleSheet」の略語で、CSSの拡張言語（メタ言語）と言われています。

簡単に言うとCSSをさらに便利にした言語と認識していただけたらOKです。

Sassを使用するメリットは何といっても作業効率とメンテナンス性がCSSと比べ格段に上がるということです。

なぜそのようなメリットがあるかは2部のSassの便利機能の解説のときに改めて説明します。

Sassを使う準備をしよう

Sassはそのままでは使用することができません。

どういうことかと言いますと、Sassファイルで記述した内容はそのままCSSとして使用することができなく、CSSとして使えるように変換してあげなくてはいけないのです。

その変換方法を「コンパイル」といいます。

SassファイルをコンパイルすることでCSSとしてWebページに反映させることができます。

その手順について解説します。

Visual studio codeの拡張機能 「Live Sass Complier」をインストール

Sassファイルをコンパイルするために拡張機能の Live Sass Complier をインストールします。

①Visual stidio codeの拡張機能アイコンをクリックします。

拡張機能アイコンをクリックします。

②検索窓で Live Sass Complier と入力。Live Sass Complier by Green Marks をクリック。

検索窓で Live Sass Complier と入力。Live Sass Complier by Green Marks をクリック。

③インストールをクリックします。

インストールをクリックします。

インストールできましたらこれで Sass を使う準備が整いました！

Live Sass Complier を使ってコンパイルしてみよう

Live Sass Complier をインストールできたら実際にコンパイルしてみましょう。

Sassファイルを用意する

Sassファイルの拡張子は、「.scss」です。

みつた
なぜ、「scss」なのかというとSassには「SASS記法」と「SCSS記法」があり、SCSS記法が一般的なため、拡張子には .scss が使われます。

以下のようにファイルを作成しましょう。

拡張子に.scssと入力します。

これでSassファイルが作成できました。

「Watch Sass」をクリックする

コンパイルするにはSass「Watch Sass」をクリックする必要があります。

この「Watch Sass」は Live Sass Complier をインストールすると表示されます。

場所は以下にあります。

Visual studio codeの画面下の青帯の右辺りにあります。

ここをクリックすることでコンパイルができるようになります。

クリックすると以下のようになります。

「Watching・・・」となることでコンパイルすることができるようになる。

これでいつでもコンパイルできる状態になっています。

また、Watch SassをクリックしたことでCSSファイルも同時に作成されます。

Watch Sassをクリックすることで、Sassファイルと同じ名称のCSSファイルが生成される。

それでは実際にSassファイルにコードを書いてコンパイルして読み込ませてみましょう。

以下のHTMLを用意してSassファイルをコンパイルしたCSSを反映させます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>【Sass初心者入門】Sassとは？Sassの使い方解説します。</title>
        <link rel="stylesheet" href="/css/style.css">
    </head>
    <body>
        <section>
            <h1>【Sass初心者入門】Sassとは？Sassの使い方解説します。</h1>
            <p>ズバリ伝えますと、Sassはとても便利な言語です。</p>
        </section>
    </body>
</html>
h1 {
    font-size: 24px;
}
p {
    color: pink;
}

Sassファイルはこれで保存をかけるとコンパイルされてstyle.cssに自動記述されます。

h1 {
  font-size: 24px;
}

p {
  color: pink;
}/*# sourceMappingURL=style.css.map */

HTMLではstyle.cssを読み込んでいるので、結果は以下のように反映されます。

このようにstyle.scssに記述した内容がstyle.cssにコンパイルされて、その内容を読み込んだ結果がしっかりページにも反映されています。

これがコンパイルの仕組みです。

しかしこれだけではCSSを直接書くのと何も変わりないので、次回はSassの便利機能をご紹介していきます。

-Sass, Web制作