Sass (SCSS) 書き方のメモ

5年ぶりくらいにSass (SCSS) を触る機会があってすっかり忘れてて手間取ってしまったので、基本的な事を思い出す意味も込めてメモ。

Sass

Sassには{}の不要なSASS記法と、{}が必要でCSSに近いSCSS記法の2つがある。
このエントリーは SCSS にについて。

`{ }` で囲って、文末に `;` がないとエラーになる

body {
  color: #333;
  // 行末にセミコロン必須
}

セミコロンがないとエラーになる。(忘れがち

変数は `${変数名}: {値};` で定義

$color: #333;

body {
  color: $color;
}

変数定義にも ; は必須。

Mixin

@mixin 関数名() で定義、@include 関数名() で呼び出し
引数には${変数名}: {値}で初期値を設定できる

@mixin heading($font-size: 1.8rem, $color: #333) {
  color: $color;
  font-size: $font-size;
}

h2 {
  @include heading(1.6rem);
}

@content でブロックを渡すことができる

$mb: 750px;

@mixin media-breakpoint($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

@include media-breakpoint($mb) {
  .float-mb-left:  { float: left; }
  .float-mb-right: { float: right; }
  .float-mb-none:  { float: none; }
}

↓ CSS

@media (min-width: 750px) {
  .float-mb-left:  { float: left; }
  .float-mb-right: { float: right; }
  .float-mb-none:  { float: none; }
}

extend

@extend 継承元 と指定する
コンパイル後には出力されない%から始まるプレイスホルダーセレクタを使うこともできる

%heading-shared {
  border-bottom: 1px solid #333;
  color: #333;
  margin-bottom: 1rem;
}

.fw-bold {
  font-weight: bold;
}

.heading {
  @extend %heading-shared;
  @extend .fw-bold;
  font-size: 1.6rem;
}

.page-title {
  @extend %heading-shared;
  @extend .fw-bold;
  font-size: 2rem;
}

↓ CSS

.heading, .page-title {
  border-bottom: 1px solid #333;
  color: #333;
  margin-bottom: 1rem;
}

.fw-bold, .heading, .page-title {
  font-weight: bold;
}

.heading {
  font-size: 1.6rem;
}

.page-title {
  font-size: 2rem;
}

if 文

@if { ... } で条件分岐、if-else を使う場合は @if { ... } @else { ... } と両方に @ が必要 (@を書き忘れるとifやelseがセレクタとして出力される )

$is-error: true;

.message {
  @if($is-error == true) {
    &-error {
      color: #f12d23;
    }
  } @else {
    color: #333;
  }
}

↓ CSS

.message-error {
  color: #f12d23;
}

if 関数

条件によって返す値を変える事ができる
if( {条件}, {trueの時の値}, {falseの時の値} ) (if 関数は@が不要なので紛らわしい…

$is-error: true;

.alert-error {
  color: if($is-error, #f12d23, #333);
}

.alert {
  color: if($is-error != true, #f12d23, #333);
}

↓ CSS

.alert-error {
  color: #f12d23;
}

.alert {
  color: #333;
}

List (Array / 配列)

ref. Sass: Lists

$list: val1, val2, val3, ... 値は, 区切りで指定する
Listのループには @each $val in $list を使う
配列のインデックスは index($list, $val) で取得することもできる
※ インデックスは 0 ではなく、1 から始まるから注意が必要

$colors: #4d5361, #8ab734, #fa4444, #fecc00;

@each $color in $colors {
  $index: index($colors, $color);
  li:nth-child(#{$index}) {
    color: $color;
  }
}

↓ CSS

li:nth-child(1) {
  color: #4d5361;
}

li:nth-child(2) {
  color: #8ab734;
}

li:nth-child(3) {
  color: #fa4444;
}

li:nth-child(4) {
  color: #fecc00;
}

List用の関数

ref. Sass: List Functions

e.g.

index($list, $val) ... インデックスを取得、存在しない場合はnullを返す。 ※ インデックスは1から始まる
nth($list, $n) ... $n番目の値を返す。※ インデックスは1から始まる
負の数を指定すると後ろから$n番目の値を返す。e.g. -1の場合は最後の値を返す
append($list, $val) ... 配列に値を追加
length($list) ... リストの長さを返す

Map

ref. Sass: Maps

Sass v3.3 から導入された、連想配列とかハッシュとかみたいなオブジェクト
$map: (key: val, key: val, key: val, ...); で定義
ループは @each $key, $val in $Map

$breakpoints: (
  xs: 0,
  mb: 560px,
  tb: 780px,
  pc: 980px,
  xl: 1300px
);

@each $size, $breakpoint in $breakpoints {
  @if( $breakpoint != 0 ) {
    @media (min-width: $breakpoint) {
      .float-#{$size}-left {
        float: left;  
      }
    }
  } @else {
    .float-#{$size}-left {
      float: left;  
    }
  }
}

↓ CSS

.float-xs-left {
  float: left;
}

@media (min-width: 560px) {
  .float-mb-left {
    float: left;
  }
}
@media (min-width: 780px) {
  .float-tb-left {
    float: left;
  }
}
@media (min-width: 980px) {
  .float-pc-left {
    float: left;
  }
}
@media (min-width: 1300px) {
  .float-xl-left {
    float: left;
  }
}

Map用の関数

ref. Sass: Map Functions

e.g.

map-get($map, $key) ... マップから値を取得して返す
map-has-key($map, $key) ... マップ内に値があるか調べる
map-keys($map) ... マップのキーを配列で返す
map-merge($map1, $map2) ... マージしたマップを返す
map-remove($map, $keys...) ... マップから対象のキーを削除
map-values($map) ... マップの値を配列にして返す

MapはArray用の関数も使用できる

ref. Sass: List Functions

ポエム

ずっと stylus で書いてたから、;付け忘れたり、$ 付け忘れたり、@ 付け忘れてエラーになったりで、なかなか大変な思いをしてる。
タイプ数が多かったりコンパイルエラーになったりでメンドーに感じるけど、それでもSCSSが広く使われてるのはCSSそのものに書き方が近いくて学習コストが低いからなのかなって思ってた。コンパイルにRuby必須だった気がするけど、Macならデフォルトで入ってるから昨今のマークアップエンジニアは環境作るのそんなに大変じゃないってことなのかな。(僕が最後にSass使ってた頃はいろんなバージョンのIE対応が必須だったから、マークアップする人はWindowsマシンのことが多かった印象がある。そして当時はコーダーって呼ばれてた。