などの疑問や悩みを解決してまいります。
Web制作をしている人なら使っていなくても「Sass」という言葉を聞いたことはありませんか？
おそらくこの記事を読んでいるあなたは「Sassを使ってみたい」「興味がある」と思っているのではないでしょうか。
ズバリ伝えますと、Sassはとても便利な言語です。
今回は2部に分けて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 をクリック。
③インストールをクリックします。
インストールできましたらこれで Sass を使う準備が整いました！
Live Sass Complier を使ってコンパイルしてみよう
Live Sass Complier をインストールできたら実際にコンパイルしてみましょう。
Sassファイルを用意する
Sassファイルの拡張子は、「.scss」です。
以下のようにファイルを作成しましょう。
これでSassファイルが作成できました。
「Watch Sass」をクリックする
コンパイルするにはSass「Watch Sass」をクリックする必要があります。
この「Watch Sass」は Live Sass Complier をインストールすると表示されます。
場所は以下にあります。
ここをクリックすることでコンパイルができるようになります。
クリックすると以下のようになります。
これでいつでもコンパイルできる状態になっています。
また、Watch 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の便利機能をご紹介していきます。
