覚えておきたいSassの基本的な機能８選

CSSの拡張メタ言語である**Sass(Syntactically Awesome StyleSheet)**を学習しているなかで、個人的に覚える必要があると感じた基本的な記法をまとめた。

Sassの記法の種類

Sassの記法はSASS記法とSCSS記法に分かれているが、この記事ではCSSとの互換性が高いSCSS記法に沿って記述する。

Sassの基本的な機能

１．ネストを使ったスタイルの記述

親要素のなかに子要素のスタイルをネストして書くことができる。同じ要素のセレクタを何度も書く必要がなくなる。

sample1.scss

.wrapper {
  height:100vh;
  width: 100vw;
  .box {
    height: 20px;
  }
}

２．コメントアウト

sample2.scss

.wrapper {
  height:100vh;
  width: 100vw;
}
//Sassファイルのみ反映されるコメント
/*SassとCSS両方で反映されるコメント*/

CSSのコメントアウトには/* */が用いられるが、Sassでも同様に利用できる。またSassでは、/ /を用いてもコメントアウトができる。

３．別ファイルへのパーシャル

ファイルを複数に分割（パーシャル）し、それらの内容を別ファイルにインポートすることができる。１つのファイルに記述する内容が少なくなることから、可読性が良くなり、修正・変更が容易になる。

configs/_reset.scss

* {
  margin:  0;
  padding: 0;
}
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

sample3.scss

//分割したファイルの読み込み
@import "./configs/reset.scss"  

分割したファイル名はアンダースコア（_）を先頭につける。ファイルを読み込む際には@import "ファイル名"と記述するが、その際にはアンダースコアは外すことに注意する。

４．値の演算

値を演算して求めることができる。

sample4.scss

.wrapper {
  height: 1000px - 100px;  //900px
  width: 100px * 2;  //200px
}

５．&（アンパサンド）を使った要素の参照

&（アンパサンド）を用いてセレクタを参照することができる。

sample5.scss

.box {
  height: 100vh;
  width: 100vw;
  & p {
    height: 20px;
    color: white;
    &:hover {
      color: gray;
    }
  }
}

sample5.css

.box {
  height: 100vh;
  width: 100vw;
}
.box p {
  height: 20px;
  color: white;
}
.box p:hover {
  color: gray;
}

６．$を使った変数定義

$変数名: 値として定義した変数に値を代入することで、以降のプロパティの値として変数を利用できる。

sample6.scss

$text-color: #f7f7f7;  //変数の定義

p {
  height: 20px;
  color: $text-color;
}

７．mixin/include

複数のまとまったプロパティと値をmixinで予め定義し、includeで同じスタイルを別のセレクタにも適用することができる。

sample7-1.scss

@mixin gradation-green {
  background-color: #08AEEA;
  background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
}

.box {
  @include gradation-green;
}
  

mixinを使って定義する場合は@mixin mixin名 {}と記述する。定義したmixinは@include miｘin名で呼び出すことができる。

※引数を使ったmixinの定義(応用)
mixinでプロパティと値を定義する際、引数を設定することで、includeで呼び出すたびに値を変更できる。

sample7-2.scss

@mixin position($top, $right, $bottom, $left) {
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

.box {
  @include position(0, 0, 0, 0);
}

８．extend

extendを用いて、既に記述されているセレクタのプロパティと値をそのまま適用することができる。

sample8.scss

.message {
  height: 20px;
  font-size: 20px;
  font-weight: bold;
  color: white;
}

.message1 {
  @extend .message;
  color: blue;
}

.message2 {
  @extend .message;
  color: green;
}

@extend セレクタ名と記述することで任意のセレクタのスタイルを適用する。

参考にした記事

Sass Basics
Sassを極める！デザイナーがすぐ実践できる基本テクニック12連発