Zenn
✅

.Scssの書き方について

2024/02/06に公開
Markdown
tech

内容

今更ながらScssの書き方を知ったので、書いておこうと思います。
カリキュラムに、ばちこり書いてあるんですけど書いておきます。

application.html.erbのコードを変更

修正前

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

修正後

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

app/javascriptの配下にstylesheetsフォルダを作成し、scssファイルを作成

作成したファイルに記述していく

こんな感じ

header {
  position: fixed;
  top: 0;
  width: 100%;
  background: #0A6651;
  height: 100px;
  z-index: 1000;
  span {
    font-family:'Times New Roman';
    font-size: 40px;
  }
  ul {
    font-family:'Times New Roman';
    font-size: 20px;
  }
}

Discussion