ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

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

CSS
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
Adobeの期間限定セール開催中

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

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の書き方 まとめ

ネコ君
ネコ君

これだけ覚えれば、CSSを効率よくコーディングできるんだね!

すぐに使えそう!

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

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

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

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

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

HikoPro
HikoPro

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

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
CSS
HikoPro Blog

コメント

タイトルとURLをコピーしました