railsチュートリアル第五章 スタイルシート

素晴らしい構文を備えたスタイルシート

この節では、Sassが提供する2つの重要な機能
ネストと変数について説明
SCSSはCSSに新しい機能を追加しただけ
Railsのアセットパイプラインは、.scssという拡張子を持つファイルをSassを使って自動的に処理してくれます
custom.scssファイルはSassプリプロセッサによって前処理され、その後ブラウザへの配信に備えてパッケージ化される

ネスト

タイルシート内に共通のパターンがある場合は、要素をネストさせることができます

.center {
  text-align: center;
}

.center h1 {
  margin-bottom: 10px;
}

Sassを使って次のように書き換える

.center {
  text-align: center;
  h1 {
    margin-bottom: 10px;
  }
}

ネストの内側にあるh1というルールは、.centerのルールを継承

少し異なるルールに対してネスト機能を使う例を見てみましょう

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
}

#logo:hover {
  color: #fff;
  text-decoration: none;
}

＃logoというidが2回使われています。
1回目はロゴ自身を定義するために、
2回目はhover属性を定義するために使われています

ネスト機能は、フッターのCSSでも使えます
SCSSを使って次のように書き換えることができます。

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #777;
  a {
    color: #555;
    &:hover {
      color: #222;
    }
  }
  small {
    float: left;
  }
  ul {
    float: right;
    list-style: none;
    li {
      float: left;
      margin-left: 15px;
    }
  }
}

変数

Sassでは、冗長なコードを削除し、より自由な表現を可能にするために、変数が定義できるようになっています。

h2 {
  .
  .
  .
  color: #777;
}
.
.
.
footer {
  .
  .
  .
  color: #777;
}

上のコードの#777は薄い灰色を指しています

Sassでは、このような値を変数として定義し、次のように変数名を与えることができます。

$light-gray: #777;

この機能を使って、SCSSを次のように書き直すことができる

$light-gray: #777;
.
.
.
h2 {
  .
  .
  .
  color: $light-gray;
}
.
.
.
footer {
  .
  .
  .
  color: $light-gray;
}

$light-grayのような変数名は、#777のような値よりも分かりやすい
たとえその変数が繰り返し使われないとしても、変数名を与えることは多くの場合有用です
Sassでも同様の変数が使えるようになります。例えばLESSではアットマーク@を使っているのに対して、Sassはドルマーク$を使っていることはすぐにわかります。

@gray-light: #777;

h2 {
  .
  .
  .
  color: $gray-light;
}
.
.
.
footer {
  .
  .
  .
  color: $gray-light;
}

CSSでも同様に$gray-lightという変数が使えることを意味

先ほど定義した$light-grayというカスタム変数の代わりに、用意された変数を使ってみましょう。

Sassのネスト機能や変数機能を使ってSCSSファイルを全面的に書き直すと

ネストや変数を使って初期のSCSSファイルを書き直した結果

@import "bootstrap-sprockets";
@import "bootstrap";

/* mixins, variables, etc. */

$gray-medium-light: #eaeaea;

/* universal */

body {
  padding-top: 60px;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
  h1 {
    margin-bottom: 10px;
  }
}

/* typography */

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}

h1 {
  font-size: 3em;
  letter-spacing: -2px;
  margin-bottom: 30px;
  text-align: center;
}

h2 {
  font-size: 1.2em;
  letter-spacing: -1px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: normal;
  color: $gray-light;
}

p {
  font-size: 1.1em;
  line-height: 1.7em;
}


/* header */

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: white;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
  &:hover {
    color: white;
    text-decoration: none;
  }
}

/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid $gray-medium-light;
  color: $gray-light;
  a {
    color: $gray;
    &:hover {
      color: $gray-darker;
    }
  }
  small {
    float: left;
  }
  ul {
    float: right;
    list-style: none;
    li {
      float: left;
      margin-left: 15px;
    }
  }
}

演習

1.footerのCSSを手作業で変換してみましょう

$gray-medium-light: #eaeaea;
.
.
.
/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid $gray-medium-light;
  color: $gray-light;
  a {
    color: $gray;
    &:hover {
      color: $gray-darker;
    }
  }
 small {
   float: left;
 }
 ul {
   float: right;
   list-style: none;
   li {
     float: left;
      margin-left: 15px;
   }
  }

}

一応書いた。　
カスタム変数の関係でgray,gray-darkerは定義しなくていいようだ。