【プログラミング初心者】　Scssとは何か　実践的な使い方を解説！！

皆さんこんにちは。しゅんへいです。今回はProgate中のプログラミング初心者の方やScssを使ったことのない人に向けてScssの使い方を解説します！

Scssは変数は演習など色々できますが必要最低限の機能だけ紹介したいと思います！これを見ればScssの使い方を大体マスターできます！早速始めて行きます。

❶　Scssとは？SassとScssの違いはなんだろう

皆さんはScssと聞いてなんか新しい言語なのかな...?って思った方がいませんか？（自分も思いました。）Sassっていうのも聞いたこともあるけどScssと何が違うんだ...?ってなりませんでしたか？そこも解説します！

ScssとはSass（Syntactically Awesome Style Sheets）というRuby製のCSSメタ言語です。よく分からないですよね。簡単に言うと省略して書けて、後から見やすくて、変数とか関数も使えるCSSと言う感じです。便利なCSSと言う感じで捉えてもらって大丈夫です（あとで詳しく解説します。）

そしてScssとSassの違いについてですが、一番最初に Sassというものができました。作った理由としてはCSSの新しい仕様を待つよりも、自分たちで使いやすいCSSを作って、既存のCSSに合うように変換すれば良いという結論になり作りました。

普通のCSS(.css)

div {
   margin: 0 auto;
}

div p {
   padding: 20px;
}

Sassの書き方(.sass)

div
   margin: 0 auto
   p
       padding: 20px

という感じになります。要するにSassだと{}と;が要らないです。(場合によっては;も使う時があります。）

これだけ見るとSassってめっちゃ楽でSassで良いんじゃないの？となりそうですがその後にScssというのが登場します。

Scssの書き方(.scss)

div　{
   margin: 0 auto;
   p{
       padding: 20px;
}
}

Scssになると{}が書きますが pのdivが省略できます。

Scssの方が情報量が多く後から見ると分かりやすいのとScssの方が都合が良くて、現在ではScssが一般的です。（Sassの方が量が少なくて楽にかける部分もあるのでsass使う人もいる）

なので今回はこのScssに焦点を当てます。

② Scssの導入方法

scssを使うには.scssファイルを作ってそこに書けばできる！と思いそうですがScssを使うにはコンパイルという作業が必要になります。

簡単に言うとscssで書いたファイルをcssに訳す必要があります。

本来だとRubyを導入して色々しないと導入ができません。初心者の人だと大変だと思います（自分も最初それでやろうとしましたが心が折れました。）

なのでvscodeの拡張機能のLive Sass Compiler を導入するやり方を紹介します。

https://yumegori.com/vscode-sass-setting20200116

この記事に詳しく書いてありますが基本的にはvscodeの拡張機能でLive Sass Compilerとダウンロードして、右下にwatch sassと出るのでそこをwatching sassにすればコンパイルされると思います。

またatomでもプラグイン？でコンパイルされるのがあるので他のエディタを使ってる方は調べてみるとコンパイルできると思います。

これでScssの準備は完了です。

③基本的なScssの使い方

ここから本題に入って行きます！まず仮にindex.htmlとstyle.scssと（コンパイルされる）style.cssを用意します。vscodeだと！を押してlinkタグを追加します。

　html

style.scss

基本的な考え方は boxのの中にh1があるのでboxの{}でh1を囲ってh1{
}で書くと言う感じです。CSS自体の書き方は変わりません。そして書くと

コンパイルがちゃんとされていればこうなると思います。これをindex.htmlがlinkタグで読み込めばしっかり反映されると思います。

またこれは余談なので飛ばしても大丈夫ですがstyle.min.cssが生成された方がいると思います。これは何なんだろう？と言うと

これはインデントとかがないので軽量化されていてページの読み込みが速くなります。なのでサーバーにアップロードする時とかに使うのはありだと思います。（最初は修正すると思うので慣れてきたらが良いと思います。）

次は実践的な使い方を紹介します。

④ Scssの実践的な使い方5選！

色々な使い方を紹介していこうと思います。コピペですぐ再現できるので、是非やってみて欲しいです！まず1つ目は変数についてです。変数とはprogateとかで見たと思いますが $id : #fff み;たいな感じです。どこで使うのかと言うと色の指定とかに使います。例えばcssの場合だとサイトの基本カラーを青だったのが赤にしてほしいとなった時にcssだと全てカラーを手打ちで変えないといけません。しかしScssを使えば

この$maincolorを指定すれば簡単に色を変えることができるので大規模なサイトだととても楽になります。他には画像のパスを変数に入れて変数を変えれば画像もすぐ変わるという使い方です。覚えておく価値はあります！

次は複数のscssファイルの使い方です。scssファイルは記述が多くなるとエラーが起きることがあります。そうなるとコンパイルができなくなることもあります（自分は何度かありました。）

そうなるのを防ぐためと見やすくするために複数ファイルに分割して書くことをお勧めします！なので解説していきます。まずstyle.scss以外に_reset.scss（リセットcssを記述）と _variable.scss（変数を記述）と_responsive.scss（レスポンシブ の記述）を作ってみてください。（_は入れましょう）

このままだと別々のcssに記述されます。分割するというイメージなので新しく作った３つのscssファイルをimportでstyle.scssに呼んでstyle.cssにコンパイルするというイメージです。記述してみましょう。(コピペで貼り付けても大丈夫です。）

style.scss

@import "_reset", "_variable","_responsive";

こうするとこの3つのファイルを読み込みます。写真は省略しますが_reset.scssにリセットcssを記述して、._variable.scssに変数などを指定して、_responsive.scssにレスポンシブになります。

3つ目はmixinについてです。コードを再使用する際に使えると思います。具体的な例を出します

@mixin button-blue($background: #0d70bc , $width: 100px) {
 width: $width;
 height: 30px;
 border-radius: 15px;
 background-color: $background;
 color: #fff ;
}


 .form-button {
   @include button-blue();
 }

}

これはボタンに付けている例です。@mixinで再使用のコードを決めて@includeを使って呼び出すという方法です。@mixinをいじれば全部反映されるのでとても使い勝手が良いと思います。覚えておいて損はないと思います。

4つ目は@includeを使ったレスポンシブ書き方の紹介です。別のscssで分けて書くやり方も便利ですがこれだと速いです。なぜ速いかというと模写サイトなどをしてる時にレスポンシブを書く欄ってめっちゃ下にありませんか？サイトが長くなるといちいち行ったり来たりしないといけません。（少し面倒です。）しかしScssを使えばこの問題を解決できます。

記述はどこでも大丈夫ですが今回は_variable.scssに

// スマホレスポンシブ の設定
$pc:768px;
@mixin pc {
 @media (max-width:($pc)){
   @content;
 }
}
// タブレットレスポンシブ の設定
$sp:1024px;
@mixin sp {
 @media (max-width:($sp)){
   @content;
 }
}

と打ち込みます。（コピペok)　簡単に言うとpcを呼び出せばスマホレスポンシブの設定が、spを読み込めばタブレットレスポンシブを呼び出せます。では実際に呼び出してみましょう。

html

 <div class="box1">
   <h1>あああ</h1>
   <p>いい</p>
   
 </div>

style.scss

@import "_reset", "_variable","_responsive";
.box{
 padding: 20px;
 h1{
   color: red;
 }
 @include pc{
   padding: 10px;
   h1{
     color: blue;
   }
 }
 @include sp{
   padding: 10px;
   h1{
     color: green;
   }
 }
}

このようにコンパイルされていると思います。この書き方だとpc版のレイアウト確認してレスポンシブ を書くときに楽にかけます！ぜひ使ってみて欲しいです！（慣れるととても便利です。）

scssだと使うのはここらへんだと思います！演算とかifとかもありますが自分はあまり使う機会はありません。興味がある方は調べてみると面白いと思います！（他に便利な使い方があったら教えてください笑）

特に最後のレスポンシブの書き方は本当にコーディングが早くなるので試してみてください！閲覧ありがとうございました！