本記事では『Sassの基本的な書き方』について詳しく解説しています。
本記事の内容
- Sassの基礎知識
- Sassの開発環境を整える
- Sassの基本的な書き方
それでは、早速本文に入っていきましょう。
Sassとは?基礎知識

Sassを簡単に言うと、『CSSを効率的に書くことができる言語』です。
Sass(サス)の略称
→Syntactically Awesome StyleSheet
- Syntactically:構文的に
- Awesome:驚くべき
- StyleSheet:スタイルシート
Sassを活用することで、CSSでは実現できなかった速さ×修正力を実現させることができるます。
Sassのメリット
- 作業効率が格段に上がる
- コード量が減る
- メンテナンス性が高まる
イメージ的には、CSSでは5分かかるコードがSassだと3分程度でスタイリングができる様になる感じです。
それほど魅力的なSassを活用するには、Sassの開発環境を整える必要があります。
Sassの環境を整えよう(現在準備中)
現在、Visual Studio Codeでの開発環境を整える方法を準備しています。
Sassの基本的な書き方5選

Sassの基本的な書き方は5つあります。
Sassの基本的な書き方
- 入れ子(ネスト)
- 変数を活用
- 擬似要素
- メディアクエリの指定
- Sassのファイル分け
1つずつ詳しく解説していきます。
書き方①入れ子(ネスト)
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箇所だけの修正でコード記述が終わるのです。
入れ子(ネスト)の注意点:入れ子の階層を深くしていくと、生成されるCSSコードが複雑化されてしまうので、階層の深い入れ子は作成しない様にしましょう。
書き方②変数を活用
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) {
}
色の定義の書き方
$primary: red;
$secondary: blue;
$accent: yelloe;
.box {
background: $primary;
}
Webサイトを運営している方であれば、この設定をしている人が多いです。
僕自身も活用し始めたのですが、かなり良い感じです。
書き方③擬似要素
Sassの基本的な書き方③は『擬似要素』です。
/*CSSの書き方*/
a{
background: red;
}
a:hover{
background: blue;
opacity:0.8;
}
/*Sassの書き方*/
a{
background: red;
&:hover{
background: blue;
opacity: 0.8;
}
}
書き方④メディアクエリの指定
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の基本的な書き方⑤は『ファイル部分分け』です。
分けたファイル名をパーシャル(部品)と呼びます。
ファイル部分分けのメリット
どのコードが書かれているのかが明確化される
実際の書き方は下記の通りです。
/*主な例)_reset.scss*/
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
/*Scssファイルにimportする*/
@import ‘reset’;
body {
Background: black;
}
パーシャルを読み込むには@importを活用します。
まとめ:Sassの書き方

ここまでが『初心者向け】Sass(Scss)の基本的な書き方【分かりやすく】』になりました。
本記事で紹介した内容を使いこなせれば、普段のCSSコーディングの1.5倍程度はコーディングが早くなるはずです。
最後までご覧いただきありがとうございました!