HikoPro Blog

IT・テクノロジーで生活と仕事をもっと豊かに

【初心者向け】Sass(Scss)の基本的な書き方【この4つだけでOKです】

約8分
About|HikoPro

About|HikoPro

1998年生まれ|ITライフクリエイター
Webクリエイター|YouTuber|Blogger

学生時代は、タイピングのテストでクラス最下位レベルのパソコン音痴。
もっと自分の市場価値を高めたいと思い、、、
▷バンコク不動産▷インドIT留学▷ベトナムIT企業エンジニアを経て
Web系のフリーランスとして独立。

その後もっと大きい市場でインパクトのあることをしたいと思い、
ITメガベンチャーに就職。

#GoProAwards受賞 #14ヵ国渡航 #Z大学創業者 #ネコ好き

YouTube

I make videos of computer hack information and useful applications that
enrich people's work and life.


PC Hack

Web Create

Life Style

【初心者向け】Sass(Scss)の基本的な書き方【この4つだけでOKです】
HikoPro
HikoPro

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

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

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

ネコ君
ネコ君

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

Hiko
Hiko

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

✔︎こんな方にオススメ

  • これからSass(Scss)を勉強しようと思っている方
  • 時間をかけずにSassを習得したい方
  • よく使うSassの書き方だけを学びたい方

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>

CSS

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

nav ul {
  list-style: none;
}

nav a {
  text-decoration: none;
}

Sass(Scss)

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

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

Hiko
Hiko

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

✔︎入れ子にするメリット

  • ブロックを塊でスタイリングできる
  • 後から修正をしやすい
  • コーディングが早くなる

変数に代入して使い回し

CSS

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

Sass(Scss)

$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でスタイリングしている時によくありがちな、「あれ、あの色コードなんだっけ??」となって、スタイルシートを見返す作業をしなくて済みます。

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

✔︎変数に代入するメリット

  • よく使うスタイリングを使い回しできる
  • 後から修正する際に一括でできる
  • スタイルシートを見返さなくて済む

メディアクエリの指定

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;
 }
}

Sass

//ここで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のスタイリングをまとめれることができます。

✔︎メディアクエリの指定メリット

  • @media screen and (max-width:1440) ←これを書く手間が省ける
  • PC、タブレット、SPを塊でスタイリングできる(後から見やすい)
  • レスポンシブ化が爆速でできる

擬似要素

CSS

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

Sass

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

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

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

Sassの書き方 まとめ

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

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

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

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

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

Leave A Reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)