373diary

好きなモノを褒める練習をするつもりです。

「ドットインストール Sass入門」をざっくり一周した

メモ。

学んだこと

1 Sassとはなにか?

CSSを効率的に書くための記法
2つの記法がある

  • .sass: Ruby/Hamlっぽい
  • .scss: CSS3っぽい

今はscssの方が主流

2 はじめてのSass

// scssは子要素のスタイル指定を以下のように入れ子で書ける
#main {
  width: 90%;
  p { // -> #main p
    font-size: 14px;
  }
}

3 自動で変換させてみよう

# 変更があった場合、自動で変換を走らせる
sass --watch (監視ディレクトリ):(変換先ディレクトリ)

4 入れ子構造を使ってみよう

  • /* ~ */: 変換後のCSSにも残るコメント
  • //: 変換後のCSSに残らないコメント
// 疑似要素の書き方の例
// '&'は親要素を表すセレクタ
a {
  &:hover { // -> a:hover
    font-weight: bold;
  }
}

5 変数を使ってみよう

// '$'で変数宣言ができる('='ではなく、cssと同じように':'で宣言)
$baseFontSize: 14px;

p {
  font-size: $baseFontSize;           // -> 14px
  .sub {
    // 計算も行える
    font-size: $baseFontSize - 2px;   // -> 12px
  }
}

6 文字列を扱ってみよう

// 文字列は""で囲う
$imgDir: "../img/";
#main {
  // 文字列結合は'+'でできる
  background: url($imgDir + "bg.png");  // -> ../img/bg.png

  // 文字列内で変数展開する場合は'#{変数}'とする
  background: url("#{$imgDir}mg.png");  // -> ../img/bg.png

  p {
    // '{}'内は評価せよという意味合いなので、計算も行える
    font-size: #{12 + 12}px;            // -> 14px
  }
}

7 色を扱ってみよう

// CSSで解釈できる記法で色を指定できる
$brandColor: red;

p {
  // 指定した分明るくする
  color: lighten($brandColor, 30%)
}

lighten()などの、ビルトイン関数はModule: Sass::Script::Functionsで確認できる

8 @if文を使ってみよう

$debugMode: true;

// scssでの条件分岐
#main {
  @if $debugMode {
    color: red;
  } @else {
    color: green;
  }
}

9 @for,@while文を使ってみよう

// scssでのforループ
@for $i from 10 through 14 {
  .fs#{$i} { font-size: #{$i}px; }
}

// scssでのwhileループ
$i: 10;
@while $ i <= 14 {
  .fs#{$i} { font-size: #{$i}px; }
  $i: $i + 1;
}

10 リストを扱ってみよう

// リストはカンマ区切りで宣言
$animals: cat, dog, tiger;

@each $animal in $animals {
  .#{$animal}-icon { background: url("#{$animal}.png"); }
}

11 関数を使ってみよう(1)

12 関数を使ってみよう(2)

$totalWidth: 940px;
$columnCount: 5;

// scssでの関数作成の例
// 横幅とカラム数から、カラム1つ分の横幅を計算
@function getColumnWidth($width, $count) {
  $padding: 10px;
  $columnWidth: floor($width - ($padding * ($count - 1)) / $count);

  // 変換時にコンソールに値を出力する
  @debug $columnWidth;

  @return $columnWidth;
}

.grid {
  float: left;
  width: getColumnWidth($totalWidth, $columnCount);
}

13 ファイルを分離させてみよう

分割したファイルは'_‘で始まるファイル名にする

// "_settings.scss"を読み込む
@import "settings";

// "_functions.scss"を読み込む
@import "functions";

14 @mixinを使ってみよう

@mixinで定義したコード片が、@includeで挿入した箇所で展開される

// 引数や、デフォルト値をつけることもできる
@mixin round($radius: 4px) {
  border-radius: $radius; // 引数がなかった場合、4px
}

.label {
  font-size: 12px;
  @include round(5px); // -> border-radius: 5px;
}

15 @extendを使ってみよう

スタイルの継承

// 返還前のscssファイル
.msg {
  font-size: 12px;
  font-weight: bold;
  padding: 2px 4px;
  background: red;
  color: white;
  
}
.errorMsg {
  @extend: msg;
  background: red;
}

.warningMsg {
  @extend: msg;
  background: orange;
}

これがCSSになると以下のようになる

// 変換後のcssファイル
.msg .errorMsg .warningMsg {
  font-size: 12px;
  font-weight: bold;
  padding: 2px 4px;
  background: red;
  color: white;
  
}
.errorMsg {
  background: red;
}

.warningMsg {
  background: orange;
}

共通するプロパティは一つのルールセットに、差分だけが新たなルールセットに、と合理的なコードとして生成される。

感じたこと

  • 想像以上にプログラミングライクに変数、制御文、関数を書けるので驚いた
  • そのプログラミングライクな部分は'@‘できっちり区別されているので、コードの見通しも良かった
  • @extendを利用したscssが生成するcssが、かなり合理的な構造をしていて感動した
  • 個人的にもscssならガリガリ書いていけると感じた
  • 制御文や関数が作るブロックと、cssが作るブロックが同じ'{}‘なのが少しだけ気になった(いつかどこかでそれが原因でハマりそう)
  • はてブロがscssのシンタックスハイライトに対応していない……