Learning site for website creation

Sass(SCSS)の基本記法

  • 投稿日:2020年10月18日

Sassには「SASS記法」と「SCSS記法」の二種類あります。

SASS記法(今回こちらは使用しない)

Sassファイルを拡張子「.sass」で作成

  • CSSのブロックを「{}」ではなくインデントで表現
  • 命令終了の「;」を省略

CSSと記述法が違うためあまり普及しませんでした。

ul
  background: red
  li
    padding: 10px

コンパイルして生成されるCSSファイル

ul {
  background: red;
}
ul li {
  padding: 10px;
}

SCSS記法(今回こちらを使用)

Sassファイルを拡張子「.scss」で作成

  • CSSと互換性があり通常のCSS記法 + Sass記法で記述

CSSの記述法がそのまま使えるため、Sass記法の主流になっています。

ネスト(入れ子)にしたセレクタは子孫セレクタになります。

ul {
  background: red;
  li{
    padding: 10px;
  }
}

コンパイルして生成されるCSSファイル

ul {
  background: red;
}
ul li {
  padding: 10px;
}

子孫セレクタ:セレクタをネスト

子孫セレクタはセレクタをネストにすることで実現できます。

ul {
  background: red;

  li{
    padding: 10px;
  }
}

コンパイルして生成されるCSSファイル

ul {
  background: red;
}
ul li {
  padding: 10px;
}

親の参照:「&」

セレクタをネストすると子孫セレクタになってしまうため、「:hover」などの擬似クラスを定義する際は「親の参照」を意味する「&」を使用します。

a {
  text-decoration: none;

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

コンパイルして生成されるCSSファイル

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

うまくいかない例

「&」を記述しないと子孫セレクタになり「a」と「:hover」のは間に半角スペースが入ってしまいます。

a {
  text-decoration: none;

  :hover {
    text-decoration: underline;
  }
}

コンパイルして生成されるCSSファイル

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

変数:「$変数名」

よく使う値を変数に代入して使用できます。

  • 文字色や背景色などのカラーコード
  • フォントファミリー
  • カラム幅
  • ブレイクポイント

変数に値を代入

「$」の後に変数名を記述し「:」の後に変数に代入する値を記述します。

$変数名: 値;

実際に使用してみます。

$color-main: #f00;
$color-sub: #0f0;

a {
  text-decoration: none;
  color: $color-main;

  :hover {
    text-decoration: underline;
    color: $color-sub;
  }
}

コンパイルして生成されるCSSファイル

a {
  text-decoration: none;
  color: #f00;
}

a :hover {
  text-decoration: underline;
  color: #0f0;
}

インターポレーション

文字列として変数を使用する場合は「#{変数名}」と記述します。

$path: '../img/';

.block {
  background-image: url(#{$path}bg.png);
}

コンパイルして生成されるCSSファイル

.block {
  background-image: url(../img/bg.png);
}

うまくいかない例

$path: '../img/';

.block {
  background-image: url($path/bg.png);
}

コンパイルした際のエラー

--------------------
Compilation Error
Error: Invalid CSS after "...e: url($path/bg": expected expression (e.g. 1px, bold), was ".png);"
        on line 4 of sass/c:\Users\x220\Desktop\test\sass_test\css\style.scss
>>   background-image: url($path/bg.png);
--------------------------------^

計算

値を計算できます。

  • + : 加算
  • - : 減算
  • * : 乗算
  • / : 除算
  • % : 余り算

除算の「/」はCSSの一括指定でも使用するため()で囲んで使用するか、変数と共に使用します。

$width: 100%;

.col2 {
  width: $width/2;
}

.col3 {
  width: $width/3;
}

.col4 {
  width: $width/4;
}

コンパイルして生成されるCSSファイル

.col2 {
  width: 50%;
}

.col3 {
  width: 33.33333%;
}

.col4 {
  width: 25%;
}

コメント

通常の「/* コメント */」と1行コメント「// コメント」が使えます。

1行コメントはコンパイル後のファイルに出力されません。

$width: 100%;

// 2列幅用クラス
.col2 {
  width: $width/2;
}

// 3列幅用クラス
.col3 {
  width: $width/3;
}

// 4列幅用クラス
.col4 {
  width: $width/4;
}

コンパイルして生成されるCSSファイル

.col2 {
  width: 50%;
}

.col3 {
  width: 33.33333%;
}

.col4 {
  width: 25%;
}

慣れてきたら使うもの

  • よく使う記述をテンプレート化:@mixin
  • テンプレートの呼び出し:@include
  • @includeで引数利用
  • @includeで初期値利用
  • セレクタの継承:@extend
  • プレースホルダー:%
  • 配列
  • 条件分岐:@if
  • 比較演算子・論理演算子
  • 繰返し構文:@for
  • 繰返し構文:@while
  • 繰返し構文:@each
  • 関数:@function