0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?