読者です 読者をやめる 読者になる 読者になる

ぞえの技術めも

Ruby on Rails勉強中

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

Ruby on Railsチュートリアル(第3版)

今日は「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;
    }
  }
}

5.3 レイアウトのリンク

ナビゲーションとか、各ページへのリンクを作りましょう。

パス直書きでこうも書けるけど

<a href="/static_pages/about">About</a>

Railsではこう書くそう。

<%= link_to "About", about_path %>

次からは作ってない各ページを作っていきます。
今日の作業時間は【18分】

次は「5.3.1 Contactページ」から。