HikoPro

こんにちは！大学生クリエイターでWebライター｜エンジニア｜YouTuberとして活動していますHikoProです！ 最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています！

• Sass（Scss）を使ってスタイリングしてみようと思うが、具体的なSassの書き方が分からない。
• これからがっつりSassを勉強する時間はないので、「これだけ覚えておけばOK」な、よく使う便利なSassの書き方を教えて欲しい！

今回の記事では、Sass（Scss）をこれから使ってみようと思う初心者の方に向けて、これだけ覚えておけばいい、Sassの書き方を分かりやすく解説していきます。

ネコ君

Sass（Scss）ってCSSと違う言語だから、習得するのに結構時間がかかるんじゃないの？

Hiko

いえ！Sassはとっても簡単で、この記事を読んで実践すれば1時間でサクッと習得できるんです！

Sass（Scss）とは？知っておきたい基礎知識

Sass（サス）とは、超簡単に言うと、、、

「CSSをより効率的に書ける言語です！」

つまりSassとCSSは密接な関係があることをまずは覚えておいてください！

Sass＝Syntactically Awesome StyleSheet を略した言葉で、

• Syntactically　＝　構文的に
• Awesome　＝　 驚くべき
• StyleSheet　＝　スタイルシート

と言う意味になり、具体的に言うと「変数や関数（構文的に）を使うことによって、驚くくらいに早くスタイルシートを作ることができる！」と言う解釈でいいでしょう！

つまりイメージ的には、CSSでは10分かかったスタイリングがSassを使うことにより3分でスタイリングできてしまうと言うことです！

→　Sass（SCSS）とは？使い方からメリットまで初心者向けに解説

Sasa（Scss）が使える環境を作ろう

基本的な書き方を学ぶ前に、Sass（Scss）を使える環境を作りましょう！

一般的にはRubyをインストールしたり、preprosと呼ばれるコンパイル（CSSに変換）ツールを使用しますが、僕がオススメするのはVSCodeの拡張機能を追加する方法です。

→ VSCodeでSassのコンパイル環境（CSSに変換）を一瞬で構築する方法

Sassの基本的な書き方

Sass（Scss）には様々な書き方や応用の仕方がありますが、全て使いこなせるようになる必要はありません。

あくまでSassを使う目的は「CSSを見やすく、早く書くこと」が目的なので、その目的に応じた便利な書き方をいくつかご紹介します！

基本的にこの書き方さえ押さえておけば、CSSでコーディングしていた時よりも格段にスタイリングが早くできるようになります！

入れ子

<nav>
   <ul>
      <li><a href="">TOP</a></li>
      <li><a href="">詳細</a></li>
      <li><a href="">費用</a></li>
      <li><a href="">概要</a></li>
   </ul>
</nav>

nav {
  padding: 0 20px;
  background: #fdbebe;
}

nav ul {
  list-style: none;
}

nav a {
  text-decoration: none;
}

nav{
  padding: 0 20px;
  background: rgb(253, 190, 190);
  ul{
    list-style: none;
  }
  a{
    text-decoration: none;
  }
}

例えばこのように、ナビゲーションのスタイリングをする際に、CSSではバラバラに記述していたものを入れ子を使うことによって、ナビゲーションのスタイリングをひとまとまりにすることができます！

Hiko

Sassで最も使うのがこの入れ子です！

変数に代入して使い回し

body{
 background:#ccc;
}
header li a{
color:#fdbebe;
}
footer{
 background:#ccc;
}

$main-color:#ccc;
$sub-color:#fdbebe;
$main-font:serif;

body{
 background:$main-color;
}
header li a{
color:$sub-color;
font-family:$main-font;
}
footer{
 background:$main-color;
}

よく使うスタイリングを予め変数に代入しておき、使い回しすることができます！

CSSでスタイリングしている時によくありがちな、「あれ、あの色コードなんだっけ？？」となって、スタイルシートを見返す作業をしなくて済みます。

また、予め変数に代入することにより、あとで修正する際に一括で修正できるのでとても便利です。

メディアクエリの指定

@media screen and (max-width:1440){
 body img{
  width:350px;
  height:auto;
 }
}
@media screen and (max-width:740px){
 body img{
  width:100%
  height:auto;
 }
}

//ここでpcとspの幅を定義
$pc: 1040px; 
$sp: 740px; 
//ここでmax-widthを指定
@mixin pc {
  @media (max-width: ($pc)) {
    @content;
  }
}
@mixin sp {
  @media (max-width: ($sp)) {
    @content;
  }
}
//＠includeする事で、上記が適用される
.body img{
  @include pc {
   width:350px;
   height:auto;  
  };
  @include sp {
   width:100%
   height:auto;
  };
}

@media screen and (max-width:1440)← これ書くの長いし、面倒ですよね！

Sassでは予めブレイクポイントを定義しておき、@mixinを使用することによりメディアクエリを書く手間を省きます。

さらに＋＠入れ子にして書くことにより、一つの塊でpc、タブレット、spとスタイリングできるので、とっても整ったコーディングをすることができます。

.body img{
//PCの時のスタイリング
  @include pc {
   width:350px;
   height:auto;  
  };
//タブレットの時のスタイリング
  @include tab {
   width:550px;
   height:auto;  
  };
//SPの時のスタイリング
  @include sp {
   width:100%
   height:auto;
  };
}

このように　.body img のくくりの中にPC、タブレット、SPのスタイリングをまとめれることができます。

擬似要素

a{
background:#1c23A0;
}
a:hover{
background:#135300:
opacity:0.7;
}

a{
 background:#1c23A0;
 &:hover{
 background:#135300:
 opacity:0.7;
 }
}

同じ塊の中で擬似要素のスタイリングをすることができます。

他にも、:before、:activeなどの擬似要素も可能です。

Sassの書き方 まとめ

いかがでしたでしょうか！

この4つを使いこなせるようになれば、普段CSSだけでコーディングしているスピードの1.５倍は早くコーディングできることでしょう！

新しい言語を習得するより難易度は低く、数時間学習するだけで使えるようになるので、ぜひチェレンジしてみましょう！

ProgateでもSassのレッスンコースがあるのでしっかり学びたい方は、受講してみましょう！

最後までご覧いただきありがとうございました！