Sass(Scss記法)でよく使う7つの記述方法をまとめてみた

CSSをより効率的にコーディングできる言語として知られているSassという言語。フロントエンドエンジニアに限らずエンジニアなら理解しておきたい言語ですね。

そのSassには、Sass記法とScss記法の2通りがありますが、今回は一般的なScss記法でよく使われる記述方法をまとめました。1時間もあればマスターできてしまうくらい簡単です。

Scss記法とは
Sass(Scss記法)でよく使う7つの記述方法
Sassでコーディングを楽にしよう

Scss記法とは

SassにはSass記法とScss記法の2通りがあり、Sass記法の後にScss記法が生まれました。Sass3.0から、よりCSSのようにコーディングができるScssが生まれたのです。

ちなみにRuby on Railsは標準でScssファイルなので、RailsエンジニアならSass記法ではなくScss記法を学んでおいた方がいいですね。

Sassの導入手順については以下の記事を参照してください。

CSSの記述をシンプルにするSassのインストール手順を解説【Mac】

Sass(Scss記法)でよく使う7つの記述方法

それでは、Scss記法でよく使う記述方法を通常のCSSと比較しながら説明していきます。

ネスト

この「ネスト」はSassの中で最も使います。CSSでは、例えばexampleというセレクタに a や img それぞれにスタイルを与えたい場合にはその都度セレクタexampleを書かなければいけませんでした。
しかし、Sassではその必要がありません。

▼ CSS

.example{
  padding:10px;
}

.example a{
  text-decoration:none;
}

▼ Sass

.example{
  padding:10px;

  &a{
    text-decoration:none;
  }

}

親参照セレクタ

:hoverや:active、::beforeのような擬似クラスを使う場合にもネストで書けます。この場合には&:hoverのように&の後に擬似クラスを書きます。
▼CSS

.example a{
  color:blue;
  text-decoration:underline;
}

.example a:hover{
  color:red;
}

▼Sass

.example a{
  color:blue;
  text-decoration:underline;

  &a:hover{
    color:red;
  }
}

変数

Sassでは、変数が使えます。何度も使う値は変数にしておくと便利ですね。変数の定義の仕方は、$変数名:値;。

▼CSS

h1{
  color:#dd2e2e;
}

a{
  color:#dd2e2e;
}

▼Sass

$font-color:#dd2e2e;

h1{
  color:$font-color;
}

a{
  color:$font-color;
}

mixin

mixinとは、名前をつけていくつものコードを管理し、再利用できる機能です。これによって同じコードを何度も書く手間が省けます。
@mixin mixin名　{コード}で定義することができます。呼び出すときは、@include mixin名。

▼CSS

.example{
  width:100%
  font-size:20px;
  color:red;
}

.example-2{
  width:100%
  font-size:20px;
  color:red;
}

▼Sass

@mixin example-mixin{
  width:100%
  font-size:20px;
  color:red;
}

.example{
  @include example-mixin;
}

.example-2{
  @include example-mixin;
}

mixinでは引数を使うこともできます。引数を使うことで色やフォントサイズなどをその都度指定することができるようになります。

▼Sass(引数を使わない場合)

@mixin example-mixin{
  width:100%
  font-size:20px;
  color:red;
}

.example{
  @include example-mixin;
}

.example-2{
  @include example-mixin;
  color:blue;
}

▼Sass(引数を使う場合)

@mixin example-mixin($color:red){
  width:100%
  font-size:20px;
  color:$color;
}

.example{
  @include example-mixin;
}

.example-2{
  @include example-mixin(blue);
}

関数

Sassでは色を指定するような関数がよく使われるので覚えておくと便利です。関数を使えば、@mixinなどは必要なく、「あるプロパティで指定した色から40%明るくする」といったようなことができます。

▼よく使う色に関する関数

color : darken(色, 50%); //色を暗くする関数

color : lighten(色, 50%); //色を明るくする関数

color : rgba(色, 0.5);  //色の不透明度を指定する関数

color : mix(色1, 色2, 50%); //2つに色と割合を指定して間の色を返す関数

color : saturate(色, 50%); //彩度を指定できる関数

color : complement(色); //捕食(色相環で正反対に位置する色)を返す関数

よく使うのは上の3つなので、他は覚えなくても大丈夫です。