☰

Written by TSUYOSHI

【初心者向け】 Sassの基本まとめ！ 基礎を徹底解説

CSS PROGRAMMING

本記事ではSassの基本について、学習することができます。本記事を読むことにより、Sassの基本的な一通りの書き方を理解することができます。

Sass初心者が基本だけ押さえたいという内容をまとめており、一般的なSCSS記法での記述で進めます。

Sassには２種類の書き方があります。
» 「【Sassの始め方】 SASS記法とSCSS記法の書き方の違い＆環境構築を解説」

Sassはコードの可読性が上がり、メンテナンス性も向上します。一度書けるようになると便利で手放せない機能になること間違えなしの強力な機能を備えています。

本記事で紹介している内容

  • Sassの基本機能
    • ネスト
    • 親セレクタを「&」で参照できる
    • コメント
    • 変数
    • 四則演算ができる
    • Sassファイルをimportする
  • よく使う細かいSassの書き方を解説する
    • @extend
    • ミックスイン @mixin, @include
  • 便利な関数 round, ceil, floor など
  • 制御構文 @if, @for など
  • インターポレーション #{}

Sassの基本機能

SassMeisterというサイトで簡単にSCSSを試せるのでよければ参考にしてみてください。左にSCSS記法で書くとコンパイルされて、右側にCSSが出力されるようになっています。

ネスト

Sassではスタイルをネストして書くことができます。

▼SCSS ネスト

section {
  margin: 20px 0;

  p {
    margin-bottom: 0.5em;
  }
}

▼CSS

section {
  margin: 20px 0;
}
section p {
  margin-bottom: 0.5em;
}

また隣接セレクタや@mediaのネストも可能です。

▼SCSS ネストその他

ul {
  margin: 0;

  li {
    padding-left: 20px;

    + li {
      border-bottom: 1px solid #444;
    }
    
    @media screen and (max-width: 768px) {
      padding-left: 0px;
    }
  }
}

▼CSS

ul {
  margin: 0;
}
ul li {
  padding-left: 20px;
}
ul li + li {
  border-bottom: 1px solid #444;
}
@media screen and (max-width: 768px) {
  ul li {
    padding-left: 0px;
  }
}

親セレクタを「&」で参照できる

親セレクタを&で参照することが可能です。

▼SCSS &参照

a {
  text-decoreation: none;

  &:hover {
    text-decoration: underline;
  }
}

▼CSS

a {
  text-decoreation: none;
}
a:hover {
  text-decoration: underline;
}

余談になりますが、BEMなどで省略して書く場合もあります。この場合はclass名の検索ができるようにコメントを入れておくなどの配慮が必要になります。
またBEMで書く場合はSCSS記法ではなく、SASS記法で書く方が多い印象です。

▼SCSS BEM

.block {
  margin: 0;

  &__element {
    margin: 10px;
  }

  &--modifier {
    color: red;
  }
}

▼CSS

.block {
  margin: 0;
}
.block__element {
  margin: 10px;
}
.block--modifier {
  color: red;
}

コメント

Sassでは「//」のコメントが使え、これはコンパイル後に残りません。残したいコメントの場合は「/*! */」のように「/*」の後に「!」を入れます。

▼SCSS

// このコメントは残らない
/*! このコメントは残る */

▼CSS

/*! このコメントは残る */

変数

Sassでは変数を使うことができます。先頭に$を書きます。変数には英数字とアンダースコア、ハイフンが利用できます。
（一応マルチバイト、つまり日本語なども使えるみたいですが、可読性が落ちるので使わない方がよいと思います。）

▼SCSS

$colorRed: #f00;
$textColor: #444;

.red {
  background-color: $colorRed;
}

.text {
  color: $textColor;
}

▼CSS

.red {
  background-color: #f00;
}

.text {
  color: #444;
}

四則演算ができる

Sassでは四則演算で計算ができます。どのような根拠でそのCSSの値を算出したのかを示すために計算式を残すようにした方が、メンテナンス性が高くなるケースが多いと思います。

▼SCSS

$baseWidth: 500px;

.normal {
  width: $baseWidth - 20px;
}
.devide2 {
  width: ($baseWidth - 20px) / 2;
}

▼CSS

.normal {
  width: 480px;
}

.devide2 {
  width: 240px;
}

Sassファイルをimportする

Sassでは独自のimport設定があります。CSSファイルを生成せず、機能ごとにSassファイルを作ったりして１つのメインのSassファイルで読み込んでまとめてCSSファイルを出力する場合などに使います。

CSSファイルとして生成しないファイルは、アンダースコア(_)から始まるファイル名にします。

例えば、style.scssというメインのSCSSファイルがあり、そこに「_header.scss」「_footer.scss」を読み込む場合は以下のようになります。

▼style.scss

@import "_header.scss"
@import "_footer.scss"

またアンダースコアとscss拡張子を省略することができます。通常は以下のようにアンダースコアと拡張子を省略してしまってよいと思います。

▼style.scss

// _と.scss拡張子を省略した場合
@import "header"
@import "footer"

これで「style.scss」に「_header.scss」「_footer.scss」が書き込まれた形でCSS出力ができるようになります。

よく使う細かいSassの書き方を解説する

@extend

@extendは、指定したセレクタのCSSを継承することができる機能です。
例外として、@media無いでは@extendは使えないので注意が必要です。

▼SCSS

.font-base {
  font-size: 16px;
  color: #444;
}

.text-block {
  @extend .font-base;

  padding: 10px;
}

▼CSS

.font-base, .text-block {
  font-size: 16px;
  color: #444;
}

.text-block {
  padding: 10px;
}

また継承元のセレクタ自体がそのまま使われることなく不要である場合は、%を先頭に使うことによって、元になるセレクタを生成させないことが可能です。

▼SCSS

%font-base {
  font-size: 16px;
  color: #444;
}

.left-block {
  @extend %font-base;

  margin-right: 10px;
}

.right-block {
  @extend %font-base;

  margin-left: 10px;
}

▼CSS

.right-block, .left-block {
  font-size: 16px;
  color: #444;
}

.left-block {
  margin-right: 10px;
}

.right-block {
  margin-left: 10px;
}

ミックスイン @mixin, @include

Sassの中でも強力な機能のひとつで、スタイルの集まりを定義しておき、必要な時に呼び出せる非常に便利な機能です。
よく使うスタイルを@mixinで定義しておけば、@includeで簡単に呼び出すことが可能です。
@extendと似ているように見えますが、CSSの書き出され方の違いや、@mixinでは引数を渡してカスタマイズできるなど違いがあります。

▼SCSS

@mixin font-base {
  font-size: 16px;
  color: #444;
}

.text-block {
  @include font-base
}

▼CSS

.text-block {
  font-size: 16px;
  color: #444;
}

@mixinで引数を使った場合のケースを紹介します。
ミックスインを「@mixin 【mixin名】(引数) {}」の形で定義し、引数には変数を使って書くことが可能です。

▼SCSS 引数あり

@mixin font-custom ($size, $color) {
  font-size: $size;
  color: $color;
}

.big-block {
  @include font-custom (25px, #dedede)
}

.small-block {
  @include font-custom (14px, #444)
}

▼CSS

.big-block {
  font-size: 25px;
  color: #dedede;
}

.small-block {
  font-size: 14px;
  color: #444;
}

また、初期値をもたせることが可能です。引数の部分に「【変数】: 【初期値】」で記述します。引数を設定しない場合は「()」の省略も可能で、初期値が適用されます。

▼SCSS 引数に初期値あり

@mixin font-custom ($size: 16px, $color: #444) {
  font-size: $size;
  color: $color;
}

.big-block {
  @include font-custom (25px)
}

.middle-block {
  @include font-custom
}

.small-block {
  @include font-custom ()
}

▼CSS

.big-block {
  font-size: 25px;
  color: #444;
}

.middle-block {
  font-size: 16px;
  color: #444;
}

.small-block {
  font-size: 16px;
  color: #444;
}

便利な関数 round, ceil, floor など

round(), ceil(), floor()など、関数が用意されており、使いこなすことでより可読性の高いSassを書くことができます。

▼SCSS

$baseWidth: 100%;

.base-block {
  width: $baseWidth / 3;
}

.round-block {
  // 小数点以下を四捨五入
  width: round($baseWidth / 3);
}

.ceil-block {
  // 小数点以下を切り上げ
  width: ceil($baseWidth / 3);
}

.floor-block {
  // 小数点以下を切り捨て
  width: floor($baseWidth / 3);
}

▼CSS

.base-block {
  width: 33.3333333333%;
}

.round-block {
  width: 33%;
}

.ceil-block {
  width: 34%;
}

.floor-block {
  width: 33%;
}

他にも@functionを使えば自作関数を定義することも可能です。

▼SCSS

@function 【関数名】 ($引数) {
  // 処理など
  @return 【戻り値】;
}

制御構文 @if, @for など

他にもしばしば使うものとしては、以下のようなものがあります。そこまで使用頻度は高くないと思うので、必要に応じてよければ学習してみてもよいかもしれません。

▼SCSS @ifの書き方

@ if 条件A {
  // スタイルを記述
}
@else if 条件B {
  // スタイルを記述
}
@else {
  // スタイルを記述
}

▼SCSS @forの書き方

// @for 〜 through の書き方
@for $変数名 from 開始の数値 through 終了の数値 {
  // スタイルを記述
}
// ※throughは終了の数値を含んでループ

// @for 〜 to の書き方
@for $変数名 from 開始の数値 to 終了の数値 {
  // スタイルを記述
}
// ※toは終了の数値を含まず未満の回数ループ

※他にも@while、@eachなども便利な関数が存在します。

インターポレーション #{}

普通に計算するとエラーになるような場合に「#{【変数】}」インターポレーションを使うことにより、値として使うことができます。

▼SCSS

$imageRoot: '../asset/images';

.box {
  background-image: url(#{$imageRoot}/image.jpg);
}

▼CSS

.box {
  background-image: url(../asset/images/image.jpg);
}

まとめ

Sassは機能がたくさんありすぎて最初は戸惑いますが、ベースは数時間もあれば覚えることが可能です。
ネストなどの基本と、@mixinや@extendがわかればある程度は問題ないと思います。あとは都度、他の人の書いたコードでわからない部分があれば調べるなどでよいと思います。

Sassを動かすための環境については以下の記事を参考にしてみて下さい。
»【Sassの始め方】 SASS記法とSCSS記法の書き方の違い＆環境構築を解説
» 初心者向け Preprosの使い方 【無料でSassを使えるようにする方法】

ご参考になれば幸いです。

※当サイトでは一部のリンクについてアフィリエイトプログラムを利用して商品を紹介しています

RELATED

Vue「v-for」の正しい使い方 【バグ回避・key属性をつけるべき理由】...

JavaScript

【簡単】Lightboxで画像をモーダル表示 【jQueryプラグイン実装】...

JavaScript

初心者向け Preprosの使い方 【無料でSassを使えるようにする方法】...

CSS

システムエンジニア・プログラマーの年収差を男女別で比較...

PROGRAMMING

HOME >  CSS >  【初心者向け】 Sassの基本まとめ！ 基礎を徹底解説