【35日目】【1日20分のRailsチュートリアル】【第5章】Sassの変数とレイアウトのリンク

今日は「5.2.2 素晴らしい構文を備えたスタイルシート」の「変数」から。

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

変数

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

この機能素晴らしいよね…。CSSでできないのがもどかしくてたまらない。

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

変数定義と定義した変数を使う記述はこんな感じ。
毎回毎回#777って書かなくていいのと色を一括で変更したいときに楽。
デザイン的に「ここの色とここの色は統一したい」ってよくあるよね～

そして、Bootstrapの変数に下記があるそう。

@gray-light: #777;

元々定義されているものを新たに定義する必要はないので@gray-lightを使用する。

色々書き換えた結果がこちら。
(ソースコードが長いので折りたたみたかったけどデフォルトではできないようなので断念。。。)

短くはなってないけど結構すっきりしました。

app/assets/stylesheets/custom.css.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;
    }
  }
}