####素晴らしい構文を備えたスタイルシート
この節では、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は定義しなくていいようだ。