【初心者向け】Sass(Scss)の基本的な書き方5選【分かりやすく】

おにちゃん

Sass(Scss)の書き方を学びたい方『Sassとは何なのか。Sassの開発環境を準備したい。Sassの書き方を詳しく知りたい。』

本記事では、上記の方に向けて『Sassの基本的な書き方』について詳しく解説しています。

おにちゃん

Sassをこれから活用したい方は必ず最後までご覧ください。

本記事執筆日：2021年2月24日

おにちゃん

2021年12月11日にリライトしました。

そもそもSass(Scss)の書き方の前に、Sass(Scss)が全く分からない方は下記の記事を最初に読んでください。

あわせて読みたい

【入門】Sass(SCSS)とは？使い方・メリットを詳しく解説 本記事の想定読者 Sass(SCSS)ってなに？Sass(SCSS)のメリットを知りたいSass(SCSS)の使い方について知りたい 本記事は、上記の方に向けて執筆しています。 執筆者：2020...

上記の記事を読んだ後の方が、本記事の理解率が格段に上がります。

おにちゃん塾で人気の記事

サイト運営者

大学4年｜経済学部(現在休学中)

おにちゃん塾を3年ほど運営しております。副業、フリーランス、独立までの情報を網羅していく予定です。

運営者情報を詳しく知る

書き方の前に：Sass(Scss)とは？

Sassを簡単に言うと、『CSSを効率的に書くことができる言語』です。 

Sass(サス)の略称

→Syntactically Awesome StyleSheet 

Sassを活用することで、CSSでは実現できなかった速さ×修正力を実現させることができるます。

Sassのメリット

イメージ的には、CSSでは5分かかるコードがSassだと3分程度でスタイリングができる様になる感じです。

おにちゃん

Web制作初心者の私でもSassを活用し始めたら、CSSでコードを書きたいとは思いません。

それほど魅力的なSassを活用するには、Sassの開発環境を整える必要があります。 

Sassの書き方の前に：環境を整えよう

2021年5月25日：開発環境についての説明を追記しました。

newフォルダ

Sass(Scss)の基本的な書き方5選

Sassの基本的な書き方は５つあります。

１つずつ詳しく解説していきます。

Sassの書き方①入れ子(ネスト)

Sassの基本的な書き方①は『入れ子(ネスト)』です。

入れ子(ネスト)のメリット

コードの書き方は下記の通りです。

/*CSSの書き方*/
header {
  width: 100%;
  height: 70px;
  background: red;
}

header .text{
  color: white;
}

/*Sassの書き方*/
header {
  width: 100%;
  height: 70px;
  background: red;
  .text {
    color: white;
  }
}

Sassを活用すると、コードの記述量が減るだけではなく、修正がしやすくなるメリットがあります。 

例えば、上記のコード内のheaderをfooterに変えたい時を想像してみてください。

CSSでは2箇所の修正が必要ですが、Sassであれば1箇所だけの修正でコード記述が終わるのです。

おにちゃん

Web制作を本格的に始めるとこのメリットを実感することができます。

入れ子(ネスト)の注意点：入れ子の階層を深くしていくと、生成されるCSSコードが複雑化されてしまうので、階層の深い入れ子は作成しない様にしましょう。  

Sassの書き方②変数を活用 

Sassの基本的な書き方②は『変数を活用』

変数を活用するメリット

変数を使ったSassの書き方は下記の通りです。 

$site-color: red; 

.box { 
Background: $site-color; 
} 
/*このように定義すると、簡単に複数のコードに対応することができます。*/

よく使用する書き方は『メディアクエリ』『色の定義』です。

メディアクエリの書き方 

$breakpoint-sp: 450px; 
$breakpoint-pc: 970px; 

@media screen and (max-width: $breakpoint-sp) {

 } 
@media screen and (max-width: $breakpoint-pc) { 

}

おにちゃん

僕自身は@mixinをを活用してメディアクエリを使用していますが、ここでは変数の１つの例として活用させていただきます。

色の定義の書き方 

$primary: red; 
$secondary: blue; 
$accent: yelloe; 

.box { 
background： $primary; 
}

Webサイトを運営している方であれば、この設定をしている人が多いです。 

僕自身も活用し始めたのですが、かなり良い感じです。 

Sassの書き方③擬似要素

Sassの基本的な書き方③は『擬似要素』です。

/*CSSの書き方*/

a{
background: red;
}
a:hover{
background: blue;
opacity:0.8;
}

/*Sassの書き方*/

a{
background: red;
 &:hover{
 background: blue;
 opacity: 0.8;
 }
}

Sassの書き方④メディアクエリの指定

Sassの基本的な書き方④は『メディアクエリの指定』です。

メディアクエリのメリット

//pcとspの幅を定義
$pc: 1140px;
$sp:740px;
//ここでmax-widthを指定
@mixin pc {
  @media (max-width: ($pc)) {
    @content;
  }
}
@mixin sp {
  @media (max-width: ($sp)) {
    @content;
  }
}

main {
  @include pc {
    width: 350px;
    background: red;
    height: 500px;
  };
  @include sp {
    background: blue;
    width: 100%;
  };
}
footer {
  @include pc {
    width: 100px;
    background: red;
    height: 500px;
  };
  @include sp {
    background: blue;
    width: 80%;
  };
}

Sassの書き方⑤Sassファイルを部品分け

Sassの基本的な書き方⑤は『ファイル部分分け』です。 

分けたファイル名をパーシャル(部品)と呼びます。

ファイル分けのメリット

どのコードが書かれているのかが明確化される

実際の書き方は下記の通りです。

/*主な例)_reset.scss*/
 
html, 
body, 
ul, 
ol {  
margin: 0; 
padding: 0; 
} 
/*Scssファイルにimportする*/ 
@import ‘reset’; 

body { 
Background: black; 
} 

パーシャルを読み込むには@importを活用します。 

Sass(Scss)の書き方を本格的に学びたい方は動画教材がおすすめ

Sassの書き方を本格的に学びたい方はUdemyを活用してみてください。

Sassの書き方だけでなく制作スキルはスクールでも学べます。

Sassの書き方以外に学ぶべきこと

本記事の読者は「プログラミングでお金を稼ぐこと」を目標にしているはずです。

であれば、いますぐ勉強することではなく形あるものを作成しましょう。

具体例

おにちゃん

また、ご自身でサイトを立ち上げて、SASSの書き方を復習してみてください。

エックスサーバーのキャンペーン情報

1. 初期費用0円
2. 月額792円〜(20%オフ)
3. ドメイン永久無料

〜2022年7月21日18時まで〜

まとめ：Sass(Scss)の書き方

ここまでで「【初心者向け】Sass(Scss)の基本的な書き方5選【分かりやすく】」の解説は以上です。

おにちゃん

本記事は以上です。最後までご覧くださりありがとうございました。

読者におすすめの記事

あわせて読みたい

【完全初心者対応】プログラミングの始め方｜3ヶ月で成功を目指す プログラミングを始めたいなぁ、、IT知識のない僕でも簡単に始められる方法はないのかぁ。 →あります。プログラミングはIT未経験の方でも正しい手順で始めることができ...

あわせて読みたい

【完全版】AdobeXDデータでコーディングする方法【有料動画紹介】 AdobeXDデータからコーディングをしたい方『XDでコーディングってどういうこと。デザインツールの知識なんてないから俺には絶対無理だ』 本記事では、上記の方に向けて...

SASSの書き方は実践で学ぼう

SASSの基本的な書き方を学んだ方は、実践で使えるようにしていきましょう。

おにちゃん

僕はSASSの書き方を学んだ後に、模写コーディングに力を入れて、SASSのスキルを磨きました。

模写を上手く活用できると、スキルアップが早くなるので、ぜひ活用してみてください。

やり方が分からない方は下記の記事を参考にしてみてください。

あわせて読みたい

【徹底解説】模写コーディングにおすすめのサイト【ポートフォリオ可有り】 本記事の想定読者 本格的にWeb制作でお金を稼いでいきたいスキルを身につけるためにおすすめの模写コーディングサイト模写コーディングサイトをポートフォリオとして掲...

SASSの書き方と同時にスキルアップしよう

SASSの書き方が理解できた方は、そのままの流れでBootstrapとWordPressの知識理解を進めましょう。

Bootstrap：イケてるデザインを簡単に導入できる
WordPress：案件が多数あり、稼ぎやすい

あわせて読みたい

【Bootstrap5の使い方】高速でモダンなイケてるサイト構築 本記事の想定読者 Bootstrapってなに？Bootstrapの使い方を詳しく知りたい 本記事は上記の方に向けて、執筆しています。 執筆者：僕はサービスを開発する際にもBootstra...

あわせて読みたい

【保存版】WordPress初心者が独学で勉強する方法【サイト紹介】 本記事の想定読者 WordPress初心者が独学で勉強する手順を知りたい独学で勉強するためのおすすめ本を知りたい独学で勉強するためのおすすめサイトを知りたい 本記事は上...